jQuery总结

jQuery总结

页面加载

$(function(){});

$(reday)

事件绑定

1. 效率高，部分添加事件不能实现，可定义多个相同或不同的事件

   $("button").click(function(){
       alert("hellow world");
   })

    

2. 效率低，所有事件都可以添加，可定义多个相同或不同的事件

   $("buttton").on("click",function(){
   
   ​ alert("hellow world");
   
   });

    

移除绑定事件

• $("button").off(); //移出所有事件

• $("button").off("click"); //移出所有click事件

• $("button").off("click",func); //移出所有指定类型的指定事件

事件冒泡

阻止事件冒泡子div里return False或者event.setPropagation();

事件自动触发

​ $(".father").trigger("click"); //会触发事件冒泡，即子div触发则父div也会触发，也会触发默认行为（如表单页面跳转）

​ $(".father").triggerHandle("click"); //不会触发事件冒泡，不会触发默认行为

​ 注意：对<a>标签的触发在文字内容加上<span>链接1</span>。

自定义事件触发

$(".son").on("myClick"),function(){
        alert("son");
    });
    $(".son").tragger("myClick");

​ 注：条件1：事件必须通过on绑定

​ 条件2：事件必须通过trigger触发

事件命名空间

$(".son").on("click.zs",funcion(){
    alert("click");
})

​ 注：条件1：事件必须通过on绑定

​ 条件2：事件必须通过trigger触发

1. 利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发、而父元素没有命名空间的事件不会被触发。. 利用trigger触发子元素不带命名空间的事件，那么子元素所有带相同类型的事件和父元素所有相同类型的事件会被触发。

事件委托

定义：事件委托就是找一个在jQuery入口函数执行之前就有的元素来监听动态添加的某些事件

页面所有dom元素加载完毕再执行

$(function(){

​ //代码块

})

原代码：

$(function(){
    $("ul>li").click(function(){
        console.log($(this).html());
    })
})

更改后：

$("已有元素").delegate("帮助元素"，"帮助元素监听的事件"，function(){});

$(function(){
    $("ul").delegate("li","click",function(){
        console.log($(this).html());
    })
})