[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); }) }) ```