[toc] ### 1. jQuery选择器 1. 元素选择器 ``` $(document).ready(function(){ $("button").click(function(){ $("p").text("p被修改了"); }) }) ``` 2. 属性选择器 3. 类选择器 4. id选择器 ### 2. 事件常用方法 1. jQuery事件： 常用事件方法 ``` $("button").click(function(){ $(this).hide(); }) //与此类似的鼠标事件还有dblclick,mouseenter,mouseleave ``` ### 3. 绑定事件与解除绑定事件 1. bind与unibind ``` $(document).ready(function(){ // $("#clickMeBtn").click(function(){ // alert("hello"); // }) $("#clickMeBtn").bind("click", clickHandler1); $("#clickMeBtn").bind("click", clickHandler2); // $("#clickMeBtn").unbind("click"); // $("#clickMeBtn").unbind("click", clickHandler2); }) function clickHandler1(e) { console.log("clickHandler1"); } function clickHandler2(e) { console.log("clickHandler2"); } ``` 2. on与off方法, 直接将bind与unbind改成on与off（官方推荐方法） ### 4. 事件冒泡与目标 1. currenttarget: 最终获取的目标 target：当前获取的目标 2. 阻止事件冒泡 `event.stopPropagation()`：阻止父级元素事件冒泡 `event.stopImmediatePropagation()`：阻止所有事件冒泡 ``` $(document).ready(function(){ $("body").on("click", bodyHandler); $("div").on("click", divHandler); }) function bodyHandler(event){ console.log(event); console.log("body"); } function divHandler(event){ console.log(event); console.log("div"); // event.stopPropagation(); event.stopImmediatePropagation(); } ``` ### 5. 自定义事件 * 自定义一个事件 ``` $(document).ready(function(){ $("#ClickMeBtn").click(function(){ var e = jQuery.Event("MyEvent"); $("#ClickMeBtn").trigger(e); }); $("#ClickMeBtn").bind("MyEvent", function(event){ console.log(event); }) }) ```