jQuery基础教程:掌握链式调用与事件监听

发表时间: 2018-08-05 15:22

jQuery的链式调用

为什么可以链式调用?

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


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

jQuery的事件监听

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


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

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

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

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


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

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


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

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

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


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