jQuery系列2---DOM操作和事件
来源：互联网 发布：m1136mfp扫描软件 编辑：程序博客网 时间：2024/06/06 08:32
一、DOM操作的分类
一般情况下，DOM操作分三个方面：DOM Core、HTML-DOM和CSS-DOM
1.1 DOM Core
并不是JavaScript所专有，也不仅仅只操作HTML文档。只要文档是DOM结构，都可以使用核心DOM中的方法，如html文档和xml文档都可以使用getElementByxx(s)相关的方法获得元素
1.2 HTML-DOM
专门针对HTML的一种DOM操作。提供了一些专属的方法。例如，直接通过document对象获取标签对象或操作标签的属性。这两种DOM操作都是HTML-DOM。
例如：document.froms element.src
1.3 CSS-DOM
CSS-DOM是针对CSS的操作。主要作用就是获取和数组style对象的各种属性。让网页呈现出不同的效果。
例如：element.style.color = “red”;
二、JQuery基础DOM操作
2.1 获取和设置元素的内容
三个方法：text()、html()和 val()
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { //获取得到的标签的内的文本，不包括内部的标签。但是内部标签与标签中的空格会获取到 var text = $(".box").text(); // ele.innerText console.log(text); var html = $(".box").html(); //标签内的所有内容，包括子标签本身 ele.innerHTML console.log(html); //上面的方法不传入参数表示只是获取，如果传入字符串表示设置// $(".box").text("哈哈哈"); //设置html，如果有标签，则会解析出来 $(".box").html("<button>点我啊</button>") }) $(function () { $("div button").click(function () { //获取一个标签的value值(如果有) var inputText = $("div input").val(); alert(inputText); }) }) </script> </head> <body> <div class="box"> <a href="http://www.yztcedu.com">点我去育知同创</a> </div> <div> <input type="text" name="user" id="user" value="" /> <br /> <button>获取输入框中的值</button> </div> </body></html>2.2 获取和修改元素的属性
attr(属性名)方法操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { //获取属性href的值 var $href = $("div a").attr("href"); console.log($href); //点击按钮的时候更换属性的值 $("div button").click(function () { $("div a") .attr("href", "http://www.sina.com.cn") //参数1：属性名 参数2：属性值 .attr("title", "浪浪") .text("浪一下"); }) }) </script> </head> <body> <div class="box"> <a href="http://www.yztcedu.com">点我去育知同创</a> </div> <div><button>更换友情链接</button></div> </body></html>如果需要同时设置多个属性也可以把多个属性封装在一个对象中
$("div a") .attr({ href:"http://www.sina.com.cn", title:"浪浪" }) .text("浪一下");2.3 元素的样式操作
这里的样式操作主要是针对一个元素的class属性进行操作。一般有一些潜规则：id是给js用的，class是给css用的。所以，大家希望用class去设置样式。
对样式的操作包括：获取class，设置class，追加class，删除class，切换class，判断是否有class属性
2.3.1 获取和设置样式
class也是属性，所以获取和设置的方法与获取和设置属性的方法一致。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div.nomal{ width: 200px; height: 200px; background: pink; border: 1px dashed blue; } div ul{ list-style: none; } .big{ width: 400px; height: 400px; border: 1px dashed green; } .color{ background: gray; } </style> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $("li:nth-child(1)").click(function () { $("div#box").attr("class", "big"); }) $("li:nth-child(2)").click(function () { $("div#box").attr("class", "color"); }) }) </script> </head> <body> <div class="nomal" id="box">我是div中的元素</div> <div> <ul> <li><button>点我变大</button></li> <li><button>点我变色</button></li> </ul> </div> </body></html>2.3.2 追加样式
替换样式会把原来的全部更新，有的时候，我们只想向更新某个样式，则使用追加。
CSS规定，一个元素的class属性可以多个值，多个值之间用空格隔开。表示合并这些样式的值。如果有重复的，则以后面的为准
JQuery使用addClass方法来追加样式.
addClass方法可以完成追加的效果
$(function () { $("ul li:first").click(function () { //追加样式 $("#box"). ("big"); }) $("li:eq(1)").click(function () { $("#box").addClass("color"); })})2.3.3 移除样式
removeClass(样式名)
2.3.4 切换样式
toggleClass(样式)
切换样式，如果类名存在则删除，不存在则添加
$(function () { $("li:last").click(function () { //该方法会自动判断这个class是否存在，如果存在就删除，不存在就添加 $("#box").toggleClass("color"); })})2.4.5 判断是否有指定的class
hasClass(样式)
2.4 each方法的使用
<script type="text/javascript"> $(function () { //变量选择到的所有元素。 传入的参数中有两个参数：参数1：遍历的元素的下标 参数2：遍历的那个元素(dom对象，不是jq对象) $("div").each(function (index, ele) { $(ele).html("呵呵呵") }) }) </script>三、CSS-DOM操作
CSS-DOM操作就是操作读取和设置sytle对象的各种操作。使用style属性只能获取行内style属性，内部样式和外部样式则无法获取。用JQuery一切都变得简单很多。
3.1 使用css方法获取和设置css属性
css方法既可以获取行间样式属性，也可以获取内部和外部样式的属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; border: 1px dashed red; background: pink; } </style> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("div button").click(function () { var bg = $(".box").css("backgroundColor"); //获取背景色。返回的是rgb颜色// alert(bg); //设置背景色。// $(".box").css("background-color", "#808080"); //也可是使用对象同时设置多个css属性 $(".box").css({"background-color":"#808080", "border":"10px solid green"}); //单独设置透明度。第二个参数是number可以不加引号。(加上也可以的) $(".box").css("opacity",0.5); //设置宽高属性既可以用css方法，也可以使用width方法和height方法// $(".box").css("width", "800px"); //使用css设置宽 //使用width方法。只传递数字表示为1200px。 也可以写"1200px" $(".box").width(1200); }) }) </script> </head> <body> <div id="box" class="box"> </div> <div> <button>更换颜色</button> </div> </body></html>css方法使用总结：
- 如果只传入一个字符串，则是获取匹配的第一元素的这个字符串表示的属性的值。css(“backgroundColor”)获取背景色。
- 如果传入的是一个数组，则可以获取匹配的第一个元素的多个属性值。
- 如果传入两个参数：第一个参数是一个字符串，第二个参数是字符串或者数字。则表示设置所有匹配元素的属性的值。
- 如果传入的是一个js对象，则表示同时设置多个css属性和值
3.2 offset方法
获取这个元素在当前文档的相对偏移。其中返回的对象包含两个属性，left和top。(这个值类似pageX和pageY)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; border: 1px dashed red; background: pink; } </style> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("button").click(function () { //获取相对文档偏移量 获取到的对象有两个属性，一个left一个top var $off = $(".box").offset(); console.log($off.left + " " + $off.top); //设置相对文档偏移量 $(".box").offset({top:300, left:300}) }) }) </script> </head> <body> <div id="" style="position:absolute;left: 20px;"> <div id="box" class="box"></div> </div> <div> <button>获取偏移量</button> </div> </body></html>3.3 position方法
获取标签相对于参照定位标签(参照物父容器)的偏移量
position（）方法的返回值和offset()一样，有top和left
注意：这个方法不接受任何参数，所以只能获取不能设置。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px dashed red; background: pink; position: relative; left: 50px; } .box div{ width: 300px; height: 300px; border: 1px solid green; background: #808080; position: absolute; left: 20px; } </style> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("button:first").click(function () { var $position = $(".box div").position(); console.log($position.left + " " + $position.top); }) }) </script> </head> <body> <div class="box"> <div></div> </div> <div> <button>获取偏移量</button> <button>设置偏移量</button> </div> </body></html>3.4 scrollTop()和scrollLeft()方法
获取某个元素的滚动条距离上端和左端的滚动的距离。
也可以设置让滚动条去滚动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { width: 400px; height: 100px; overflow-x: scroll; overflow-y: } </style> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("button:eq(0)").click(function() { var top = $("p:first").scrollTop();//获取垂直滚动条距离顶端的距离 var left = $("p:first").scrollLeft();//获取水平滚动条距离左端的距离 console.log(top + " " + left); }) var per = 1; var $p = $("p:first"); var timerId; //自动滚屏 $("button:eq(1)").click(function() { timerId = setInterval(function() { var top = $p.scrollTop(); $p.scrollTop(top + per);//更改垂直滚动条距离顶端的距离，则滚动条滚起来 }, 50); }) $("button:eq(2)").click(function() { //取消自动滚屏 clearInterval(timerId); }) }) </script> </head> <body> <p>我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 我要滚动了 1 </p> <p>我要滚动了 2 </p> <button>获取滚动距离 </button> <button>自动滚屏 </button> <button>取消自动滚屏 </button> </body></html>四、DOM节点操作
4.1 创建节点
4.1.1 创建元素节点
var $li1 =$("<li></li>"); //创建一个li节点4.1.2 创建文本节点
var $li1 =$("<li>JavaScript</li>"); //创建一个li节点和一个文本节点。元素节点和文本节点一起创建的4.1.3 创建属性节点
var $li1 = $("<li id='js'>javaScrpt</li>"); //创建属性节点同元素节点文本节点一起创建4.2 插入节点
a.append(b) : 向a中追加一个b
a.appendTo(b) : 把a追加的b中
a.prepend(b): 在a中的最前面追加b
a.prependTo(b): 把a追加到b的最前面
a.after(b) : 在a元素的后面插入一个b
a.before(b) : 在a元素的前面插入一个b
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var $li1 = $("<li id='js'>javaScrpt</li>"); var $ul = $("ul");// $ul.append($li1); //向ul中追加一个li标签。 插入之后 li是ul的子标签// $li1.appendTo($ul); // 将$li1追加到$ul中。 其实是颠倒了append的逻辑// $ul.prepend($li1); //向ul的最前面追加一个li标签// $ul.after($li1); //在匹配的元素之后插入。 插入之后li是ul的兄弟标签 $ul.before($li1); ////在匹配的元素之前插入。 插入之后li是ul的兄弟标签 }) </script> </head> <body> <ul> <li>c++</li> </ul> </body></html>4.3 删除节点
remove() 删除这个节点，绑定的事件会丢失。 干掉自己
detach() 删除节点，但是绑定的事件还在 干掉自己
empty() 清空这个节点的所有内容。但是这个节点还在。 干掉所有的后代
三个方法可以完成删除节点的操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //删除找到的标签。删除的标签会返回。 绑定的事件会丢失。 var $removed = $(".languages li:nth-child(2)").remove(); //追加到末尾 $("ul.languages").append($removed); }) $(".btns button:eq(1)").click(function () { //与remove不同的是，他绑定的事件、附加的数据还在 var $removed = $(".languages li:nth-child(2)").detach(); $("ul.languages").append($removed); }) $(".btns button:eq(2)").click(function () { //清空找到的节点的所有内容，包括所有后代节点。节点还在。 这个其实并没有清除节点 $(".languages li:nth-child(2)").empty() }) }) </script> </head> <body> <ul class="languages"> <li>c++</li> <li>javaScript</li> <li>java</li> <li>php</li> </ul> <ul class="btns"> <li><button>使用remove删除第二个li</button></li> <li><button>使用detach删除第二个li</button></li> <li><button>清空元素内容</button></li> </ul> </body></html>4.4 复制节点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //复制节点，并添加到尾部 $(".languages li:first").clone().appendTo($(".languages")); }) }) </script> </head> <body> <ul class="languages"> <li>c++</li> <li>javaScript</li> <li>java</li> <li>php</li> </ul> <ul class="btns"> <li><button>复制第一个节点，然后追加到最后</button></li> </ul> </body></html>4.5 替换节点
a.replaceWith(b): a中的每一个元素都用 b去替换 b干掉a
a.replaceAll(b) : 用a去把满足b的每一个替换掉。 a干掉b
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //找到的所有的li用参数中的节点替换// $(".languages li").replaceWith("<li>我要全部干掉你们</li>"); //或者用replaceAll,效果同上。 $("<li>我要全部干掉你们</li>").replaceAll($(".languages li")); }) }) </script> </head> <body> <ul class="languages"> <li>c++</li> <li>javaScript</li> <li>java</li> <li>php</li> </ul> <ul class="btns"> <li><button>替换所有的节点</button></li> </ul> </body></html>4.6 包裹节点
b.wrap(a) 每一个b分别用一个a包裹
b.wrapAll(a) 所有的b用同一个a包裹，如果有其他元素则扔到包裹的后面
b.wrapInner(a); 用a去包裹b的内容。不包裹b这个标签本身。
b.unwap()去除b的父元素
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".btns button:eq(0)").click(function () { //用div把 .languages 包裹起来。 如果多个元素需要包裹，则会有多个div// $(".languages").wrap("<div></div>"); //所有的用一个div包裹起来。 如果中间有其他元素，其他元素则放置包裹之后// $("ul").wrapAll("<div></div>"); //.languages li 标签中的内容用span包括。 注意：不包裹标签字节，只包括标签的内容 $(".languages li").wrapInner("<sapn></span>"); }) }) </script> </head> <body> <ul class="languages"> <li>c++</li> <li>javaScript</li> <li>java</li> <li>php</li> </ul> <p>擦，我竟然被扔出来了</p> <ul class="btns"> <li><button>给ul包裹一个div</button></li> </ul> </body></html>五、JQuery中的事件
5.1 基础事件
5.1.1 事件绑定
元素对象.bind(事件，[可选的额外参数], 事件处理函数)
可选参数2一般省略
参数2的事件类型：
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //这里绑定的事件是没有on的。 $("button:first").bind("click", function () { alert("我被点击了"); }) }) </script></head><body> <button>我有事件了</button></body></html>5.1.2 解除绑定
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var firstBtn = $("button:first"); firstBtn.bind("click", function () { alert("我被点击了"); }) firstBtn.bind("mouseover", function () { $(this).css("background", "red"); }) firstBtn.bind("mouseout", function () { $(this).css("background", "#FFC0CB"); }) $("button:eq(1)").click(function () { firstBtn.unbind("click"); //解除click事件的绑定 }) $("button:eq(2)").click(function () { firstBtn.unbind(); //不传参数表示解除所有的事件绑定 }) }) </script></head><body> <button>我有事件了</button> <button>解除点击事件</button> <button>解除所有事件</button></body></html>5.1.3 简写事件
经常用到的事件，jquery也提供了一种简写的方式，效率一样，只是代码写法简化了
$("button:eq(1)").click(function () { alert("解除") firstBtn.unbind("click"); //解除click事件的绑定 })5.1.4 复合事件
JQuery提供了两个合成事件：hover和toggle
- hover(f1, f2)用于模拟光标悬停事件，当光标移动到元素上的时候，会触发指定的第一个函数，当光标移除这个元素时，会触发第二个元素
- 功能1：toggle(f1, f2, … fn) 用于模拟鼠标连续单击事件，当第一次单击时只需第一个函数，当第二次单击执行第二个函数，…，执行完毕之后再循环来。功能2：不传任何参数，可以让元素隐藏或显示。 但是从1.9版本开始，只剩下了功能2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; height: 200px; border: 1px solid red; text-align: center; line-height: 200px; } </style> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $("div").hover(function () { //鼠标进入元素区域 $(this).css("background", "red"); }, function () { //鼠标离开元素区域 $(this).css("background", "pink") }); /*$("div").toggle(function () { $("p").html("第一次点我") }, function () { $("p").html("第二次点我") }, function () { $("p").html("第三次点我") })*/ $("button").click(function () { $("div").toggle(); //如果隐藏就显示，如果显示就隐藏。 }) }) </script> </head> <body> <div id="box"> 我是个盒子 </div> <p>哈哈哈</p> <button>点我</button> </body></html>5.2 事件对象
5.2.1 事件对象的获取
获取事件对象非常简单，只需要在绑定事件的时候的事件处理函数添加一个参数即可。例如：
ele.click(function(event){ }); event就是事件对象。函数触发的时候，事件对象创建，函数执行完毕事件对象销毁，只能在函数内部使用。
<script type="text/javascript"> $(function() { //匿名函数的参数就是事件对象。执行的时候浏览器会自动创建事件对象，并传入函数中。 //这里的事件对象，已经经过了JQuery的封装。是JQuery对象 $("span").click(function(event) { console.log(event); }) $("span").bind("click", function(event) { console.log(event); }) })</script>5.2.2 事件对象的常用属性
经过JQuery封装后的事件对象，有如下常用的属性可供使用。
- type属性 获取事件类型
- preventDefault()方法 阻止事件的默认行为。兼容各种浏览器。
- stopPropation()方法 阻止事件的冒泡
- target属性 获取到触发事件的元素
- pageX和pageY属性 光标相对于页面的距离。如果有滚动条，还要加上滚动条的距离
- offsetX和offsetY
- clientX和clientY
- which属性。 如果是鼠标事件则获取鼠标的左(1)中(2)右(3)键，如果是键盘则获取键盘的按键。
- metaKey属性。获取ctrl按键。
<script type="text/javascript"> $(function() { $("span").click(function(event) { console.log("事件类型：" + event.type); console.log("targe属性：" + event.target); console.log("pageX:" + event.pageX); console.log("pageY:" + event.pageY); console.log("which:" + event.which) }) })</script>5.2.3 事件的冒泡以及默认处理
preventDefault()阻止默认行为，stopPropation()阻止冒泡。 事件函数中返回false，可以同时停止默认行为和冒泡。所以，可以直接返回false，而不用调用上述两个方法。
5.3 高级事件
5.3.1 事件模拟操作
- ele.trigger(事件类型)
<script type="text/javascript"> $(function () { $("button").click(function() { alert("我被点击了"); }) //模拟用户的点击行为 $("button").trigger("click"); //简写 //$("button").click(); })</script>- trigger也可以触发自定义事件
<script type="text/javascript"> $(function () { //自定义事件 $("button").bind("myClick", function () { alert("这个是我自定义的事件"); }) $("button").trigger("myClick"); })</script>- 执行默认操作：trigger触发的事件，不仅仅触发了事件函数，也会触发浏览器的默认操作。比如，给input注册一个focus事件，则不但触发focus事件，还会触发浏览器的默认事件，使input获得焦点。使用trigerHanddler可以避免浏览器的默认操作
<script type="text/javascript"> $(function () { $("input:last").focus(function () { console.log("擦，我获得焦点了"); }) $("input:last").triggerHandler("focus");// $("input:last").trigger("focus"); })</script>5.3.2 事件命名空间
JQuery为了方便管理事件，给事件提出了命名空间的概念。 语法：事件.命名空间
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { //此时绑定的事件就使用了命名空间。 $("button:eq(0)").bind("click.space", function() { alert("你点击了按钮1"); }).bind("mouseover", function () { alert("鼠标来了") }) $("button:eq(1)").bind("click.space", function() { alert("你点击了按钮2"); }) $("button:eq(2)").bind("click", function() { alert("你点击了按钮3"); }) $("button:eq(3)").click(function () { //解除这个命名空间下的所有事件: 按钮3的click事件和按钮1mouseover事件没有命名空间，所以不会解绑 $("button").unbind(".space") }) }) </script> </head> <body> <ul> <li> <button>第1个按钮</button> </li> <li> <button>第2个按钮</button> </li> <li><button>第3个按钮</button></li> <li><button>解绑space命名空间内的所有事件</button></li> </ul> </body></html>5.3.3 事件委托
delegate委托undelegate解除委托 1 0
- jQuery系列2---DOM操作和事件
- JQuery DOM操作、 事件和动画
- [jQuery] Dom元素操作和事件获取
- jQuery操作dom事件
- 学习JQuery中的DOM操作和事件操作
- 14jQuery操作DOM、事件
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画
- jQuery学习笔记之DOM操作、事件绑定（2）
- jQuery事件及DOM操作实例
- jquery查找元素,绑定事件,DOM操作
- jQuery选择器、操作DOM、事件、动画
- Jquery-Dom和css操作
- Jquery系列（三） DOM操作
- jQuery - 小鸟系列之DOM操作
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- jquery中DOM加载事件，onload事件和ready事件
- jQuery 的dom操作和javascript的dom操作
- 认识一下java的开发环境
- 文件传输基础----Java IO流
- 修路方案 【最小生成树变形】-- 次小生成树
- 浅谈TCP协议的端口（port）
- Essential C++学习笔记 第一章 C++编程基础
- jQuery系列2---DOM操作和事件
- NULL 值与索引
- 单链表的建立
- 给你一个网站你是如何来渗透测试的?
- Java AIO-异步通信
- 所有控件实现下拉刷新上拉加载功能
- PHP->函数
- Lock和synchronized比较详解
- 【java 构造函数】为什么子类一定要访问父类中的构造函数
