jQuery的链式调用

为什么可以链式调用?

jq对象调用修改元素的方法之后,返回值还是对象本身

1. 
   
2. $("#box")
3. .text("文本内容")
4. .css("color","red");
6. $("<div></div>")
7. .css("width","100px")
8. .css("height","100px")
9. .css("background-color","red")
10. .css("border-radius","50%")
11. .appendTo(document.body);

jQuery的事件监听

jq对象的.on方法,用于为元素添加事件监听,第一个参数是要监听的事件类型,第二个参数是事件绑定的方法

1. 
   
2. $("#btn").on("click",function(e){
3. // 事件绑定的函数在调用时,会传递对象参数,但是和原生的事件对象不同,是jquery的事件对象,e.originalEvent是原生的事件对象
4. console.log(e);
5. });

移除事件监听(参数是要移除的事件类型和函数名)(上面写的是匿名函数,移除不了,所以只是记录写法)

$("#btn").off();

.one用于一次性的事件绑定(只会触发一次),dblclick是双击才会执行

1. 
   
2. $("#btn").one("dblclick",function(){
3. console.log("双击");
4. });

使用父元素代理为一个子元素添加事件监听,第一个参数是子元素选择器,第二个参数是代理的事件类型,第三个参数是事件绑定函数

1. 
   
2. $("body").delegate("#btn2","click",function(){
3. console.log("body代理的btn2事件")
4. });

这个事件监听方法,能够为页面中还不存在(将来可能会存在)的元素绑定事件监听.

jq对象可以方便地为多个元素添加事件监听(item是多个标签包含的类)

1. 
   
2. $(".item").on("click",function(e){
4. $(e.target).css("background-color","red");
6. });