jquery 中高級 · 地表最強JS文檔

[toc] ## `get`() 原生 js 和 jquery 真的不能混用嗎? 比如要彈出元素內容... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> </body> <script> $(function() { alert($("div").html()); }); </script> </html> ``` get: 把 jquery 轉成原生 js ```javascript $(function() { alert($("div").get(0).innerHTML); }); ``` 再來試試 li 循環, 注意 get 不加參數, 表示一個集合 ```javascript console.log($("li")); console.log($("li").get()); ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is a li tag 1</li> <li>this is a li tag 2</li> <li>this is a li tag 3</li> <li>this is a li tag 4</li> <li>this is a li tag 5</li> <li>this is a li tag 6</li> <li>this is a li tag 7</li> <li>this is a li tag 8</li> <li>this is a li tag 9</li> <li>this is a li tag 10</li> </ul> </body> <script> $(function() { for (var i = 0; i < $("li").get().length; i++) { console.log($("li").get(i).innerHTML); } }); </script> </html> ``` 如果我把`get`去掉呢? ```javascript $(function() { for (var i = 0; i < $("li").length; i++) { console.log($("li").get(i).innerHTML); } }); ``` 注意, `console.log($('li'))`, 會發現`length`屬性如果是下標呢? ```javascript $(function() { for (var i = 0; i < $("li").length; i++) { console.log($("li")[i].innerHTML); } }); ``` 注意`$('li')[0]`和`$('li').eq(0)`的區別 `$('li')[0]` 原生 js 對象 `$('li').eq(0)` jquery 的對象如果想給第一個 li 設置背景... ```javascript $("li")[0].style.background = "red"; ``` ```javascript $("li") .eq(0) .css("background", "red"); ``` ## `outerWidth`() width+padding+border, 如果是 true, 再加上 margin 原生的 offsetWidth width+padding+border 他倆最根本的區別... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div").outerWidth()); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div")[0].offsetWidth); }); </script> </html> ``` 當 display:none 的時候... offsetWidth ==> 0 jquery 的 outerWidth() 依然有值 `visibility: hidden;` 呢? offsetWidth ==> 200 jquery 的 outerWidth() 200 ## `text`() 先看看 text()和 html()的區別 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { console.log($("div").html()); console.log($("div").text()); }); </script> </html> ``` 如果 div 比較多呢... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world_0</p></div> <div><p>hello world_1</p></div> <div><p>hello world_2</p></div> <div><p>hello world_3</p></div> <div><p>hello world_4</p></div> <div><p>hello world_5</p></div> <div><p>hello world_6</p></div> <div><p>hello world_7</p></div> <div><p>hello world_8</p></div> <div><p>hello world_9</p></div> <div><p>hello world_10</p></div> <div><p>hello world_11</p></div> <div><p>hello world_12</p></div> <div><p>hello world_13</p></div> </body> <script> $(function() { console.log($("div").html()); console.log($("div").text()); }); </script> </html> ``` html() 只獲取第一行 text() 獲取所有文本那再試試賦值? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div><p>hello world_0</p></div> <div><p>hello world_1</p></div> <div><p>hello world_2</p></div> <div><p>hello world_3</p></div> <div><p>hello world_4</p></div> <div><p>hello world_5</p></div> <div><p>hello world_6</p></div> <div><p>hello world_7</p></div> <div><p>hello world_8</p></div> <div><p>hello world_9</p></div> <div><p>hello world_10</p></div> <div><p>hello world_11</p></div> <div><p>hello world_12</p></div> <div><p>hello world_13</p></div> </body> <script> $(function() { var str = "<p>hello China</p>"; // console.log($("div").html(str)); console.log($("div").text(str)); }); </script> </html> ``` html()和 text() 在賦值時, 都是全部 ## `remove`() : `detach`() 這兩個都是刪除節點先試試自殺... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div></div> <script> $(function() { $("div").remove(); }); </script> </body> </html> ``` 刪除操作, 會返回操作的值, 如果自殺之前, 已經有點擊事件了, 那么恢復后, 事件還在嗎? 不在 ```javascript $(function() { $("div").click(function() { alert("hello world"); }); var oDiv = $("div").remove(); $("body").append(oDiv); }); ``` 那 `detach`呢?(還會保留原來的事件) ```javascript $(function() { $("div").click(function() { alert("hello world"); }); var oDiv = $("div").detach(); $("body").append(oDiv); }); ``` ## `$()` === `$(document).ready()` `$()` !== `window.onload` `window.onload` 會等待外部資源加載完畢在執行 js `$(document).ready()` ==> html 標簽跑完, 就可以執行 js, 不用等待外部資源加載完畢 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <img src="https://www.xujunhao.com/hello.jpg" /> </body> <script> // window.onload = function() { // alert("hello world"); // }; $(function() { alert("hello world"); }); </script> </html> ``` `$()`相當于... ```javascript $(document).ready(function() { alert("hello world"); }); ``` window.onload, 只執行一次, 多個執行最后一個 ```javascript window.onload = function() { alert("來啦? 老弟"); }; window.onload = function() { alert("又來啦? 老弟"); }; window.onload = function() { alert("還來啊? 老弟"); }; window.onload = function() { alert("再來啊? 老弟"); }; window.onload = function() { alert("滾蛋"); }; ``` document.ready, 可以執行很多次 ```javascript $(document).ready(function() { alert("來啦? 老弟"); }); $(document).ready(function() { alert("又來啦? 老弟"); }); $(document).ready(function() { alert("還來啊? 老弟"); }); $(document).ready(function() { alert("再來啊? 老弟"); }); $(document).ready(function() { alert("滾蛋"); }); ``` $() ===$(document).ready() ```javascript $(function() { alert("來啦? 老弟"); }); $(function() { alert("又來啦? 老弟"); }); $(function() { alert("雙來啊? 老弟"); }); $(function() { alert("叒來啊? 老弟"); }); $(function() { alert("叕來啊? 老弟"); }); $(function() { alert("滾蛋"); }); ``` ## `parents()` `closest()` 父親們??? 先看看 `parent`... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 { width: 200px; height: 200px; background: red; } #div2 { width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div id="div1"><div id="div2"></div></div> </body> <script> $(function() { $("#div2") .parent() .css("background", "yellowgreen"); }); </script> </html> ``` parents? 父親們? 不應該只有一個父親嗎? 再試試`parents()`... 祖先的意思 ```javascript $(function() { $("#div2") .parents() .css("background", "yellowgreen"); }); ``` 注意`parents`和`parent`的區別 - `parent()` 是獲取父級節點 - `parents()` 是獲取所有祖先節點如果`parents()`后接`html()`會是什么? ```javascript $(function() { console.log( $("#div2") .parents() .html() ); }); ``` 獲取了 div1 的內容 `parents()`到底是什么? ```javascript $(function() { console.log($("#div2").parents()); }); ``` `parents()`可以有參數嗎? 表示篩選... ```javascript $(function() { console.log( $("#div2") .parents("body") .html() ); }); ``` 如果沒有就 undefined `closest()`和`parents()`有什么區別? closest? 最近? 當`closest()`有參數時... 篩選最近的一個祖宗 ```javascript $(function() { console.log( $("#div2") .closest("body") .html() ); }); ``` 既然是最近, 那么多個標簽同一個 class 呢? 還是最近如果`closest()`沒有參數呢...會 undefined, 所以一定要有參數 ```javascript $(function() { console.log( $("#div2") .closest() .html() ); }); ``` 打印一下, `closeets()`到底是什么? ```javascript $(function() { console.log($("#div2").closest()); }); ``` 祖先可以包括元素自己嗎? 往上找, 找最近的, 當然可以找到自己, parents 不行 ```javascript $(function() { console.log( $("#div2") .closest("#div2") .html() ); }); ``` 總結一下 - `closest()` 必須有參數 - `parents()` 可以沒有參數, 表示所有祖先 - `closest()` 表示祖先, 可以包括元素本身, 因為是一級一級往上找, 找最近 - `parents()` 也表示祖先, ,但是不包括元素本身 - `closest()` 只選一個, 最近的 - `parents()` 使用篩選條件, 可以篩出來很多個 ```javascript $(function() { console.log($("#div2").parents(".div0")); }); ``` ## `sibling()` 和 `siblings()` `sibling()` 壓根兒, 沒有這個方法 `siblings()` 表示所有兄弟節點, 參數表篩選 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>div</div> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </body> <script> $("span") .siblings() .css("background", "red"); </script> </html> ``` ```javascript $("span") .siblings("h3") .css("background", "red"); ``` 參數表示篩選, 可以篩選出很多個例子中的`siblings`有多少個? ```javascript console.log($("span").siblings()); ``` 注意 script... 嘗試取出腳本內容 ```javascript console.log( $("span") .siblings("script") .html() ); ``` ## `nextAll()` `prevAll()` 回憶一下 `next()`和`prev()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>div</div> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </body> <script> console.log( $("span") .next() .css("background", "red") ); </script> </html> ``` ```javascript console.log( $("span") .next() .next() .next() .css("background", "red") ); ``` ```javascript console.log( $("span") .prev() .css("background", "red") ); ``` `nextAll()`返回所有的弟弟 ```javascript $("span") .nextAll() .css("background", "red"); ``` 可以接收參數嗎? ```javascript $("span") .nextAll("p") .css("background", "red"); ``` `prevAll()`返回所有的哥哥 ```javascript $("span") .prevAll() .css("background", "red"); ``` 可以接收參數嗎? ```javascript $("span") .prevAll("p") .css("background", "red"); ``` ## `parentsUntil()` `nextUntil()` `prevUntil()` `until`表示截止, 直到... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>div</div> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </body> <script> $("p") .prevUntil("span") .css("background", "red"); </script> </html> ``` 請思考一下, 如果`preUntil('span')`, 請問包括`span`嗎? 不包括如果不加參數呢? 和 prevAll 一樣 ```javascript $("p") .prevUntil("span") .css("background", "red"); ``` `nextUntil()` 和 `prevUntil()` 同理嗎? ```javascript $("div") .nextUntil("p") .css("background", "red"); ``` ```javascript $("div") .nextUntil() .css("background", "red"); ``` `parentsUntil()`同理嗎? 是的 1. 不傳參數, 是不是全選 2. 傳了參數, 是否包含該參數 3. 能否傳自己? 如果傳自己, 一定找不到, 跟不傳參一樣 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 { width: 500px; height: 500px; border: 1px solid red; } #div2 { width: 400px; height: 400px; border: 1px solid yellow; } #div3 { width: 300px; height: 300px; border: 1px solid blue; } #div4 { width: 200px; height: 200px; border: 1px solid green; } #div5 { width: 100px; height: 100px; border: 1px solid yellowgreen; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> <div id="div4"><div id="div5"></div></div> </div> </div> </div> </body> <script> $("#div5") .parentsUntil("#div3") .css("background", "red"); </script> </html> ``` ## `clone()` 回憶一下原生中的克隆... 看看 jquery 的`clone()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>div</div> <span>span</span> </body> <script> $(function() { // $("div").appendTo($("span")); $("span") .get(0) .appendChild($("div").get(0)); }); </script> </html> ``` ```javascript $(function() { $("div") .clone() .appendTo($("span")); }); ``` `clone()`可以接收一個參數, 作用可以復制之前的操作行為 ```javascript $(function() { $("div").on("click", function() { alert("hello world"); }); $("div") .clone() .appendTo($("span")); }); ``` 加 `true` 的話, 可以復制事件 ```javascript $(function() { $("div").on("click", function() { alert("hello world"); }); $("div") .clone(true) .appendTo($("span")); }); ``` 支持多個事件 ```javascript $(function() { $("div").on("click mouseover", function() { alert("hello world"); }); $("div") .clone(true) .appendTo($("span")); }); ``` 1. jquery 模擬的是 js 的深復制, 還是淺復制? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div id="divFirst"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> <div id="div6"></div> <div id="div7"></div> <div id="div8"></div> <div id="div9"></div> <div id="div10"></div> </div> <div id="divSecond"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> <div id="div6"></div> <div id="div7"></div> <div id="div8"></div> <div id="div9"></div> <div id="div10"></div> </div> </body> <script> $(function() { $("#divFirst") .clone() .appendTo($("#divSecond")); }); </script> </html> ``` 2. 原生 js 的 onclick 事件, jquery 的`clone(true)`能否復制? 只能復制jquery的事件 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>div</div> <span>span</span> </body> <script> $(function() { $("div").get(0).onclick = function() { alert("hello world"); }; $("div") .clone(true) .appendTo($("span")); }); </script> </html> ``` 1. 原生 js 的 cloneNode(), 能否復制 onclick 事件? no!!!!!!!!!!! ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div id="div1">this is div 1</div> <div id="div2">this is div 2</div> </body> <script> $(function() { $("#div1").get(0).onclick = function() { alert("hello world"); }; $("#div2") .get(0) .appendChild( $("#div1") .get(0) .cloneNode(true) ); }); </script> </html> ``` ## `wrap()` `wrapAll()` `wrapInner()` `unwrap ==> 解除包裝(刪除父級)` wrap ==> 包裝 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span1</span> <span>this is span2</span> <span>this is span3</span> <span>this is span4</span> </body> <script> $(function() { $("span").wrap("<div>"); }); </script> </html> ``` 可以把標簽寫全嗎? ```javascript $(function() { $("span").wrap("<div></div>"); }); ``` 如果寫多個標簽呢? ```javascript $(function() { $("span").wrap("<div><div></div></div>"); }); ``` 如果標簽寫不全呢? ```javascript $(function() { $("span").wrap("<p></div>"); }); ``` wrapAll ==> 整體包裝 ```javascript $(function() { $("span").wrapAll("<p>"); }); ``` 如果 span 被隔開了呢? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span1</span> <span>this is span2</span> <span>this is span3</span> <p>pppp</p> <span>this is span4</span> </body> <script> $(function() { $("span").wrapAll("<p>"); }); </script> </html> ``` wrapInner ==> 內部包裝 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span1</span> <span>this is span2</span> <span>this is span3</span> <span>this is span4</span> </body> <script> $(function() { $("span").wrapInner("<p>"); }); </script> </html> ``` unwrap ==> 解除包裝(刪除父級) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <p><span>this is span1</span></p> <p><span>this is span2</span></p> <p><span>this is span3</span></p> <p><span>this is span4</span></p> </body> <script> $(function() { $("span").unwrap(); }); </script> </html> ``` 如果傳參數呢? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <p><span>this is span1</span></p> </div> <div> <p><span>this is span2</span></p> </div> <div> <p><span>this is span3</span></p> </div> <div> <p><span>this is span4</span></p> </div> </body> <script> $(function() { $("span").unwrap("p"); }); </script> </html> ``` 如果父級是 body 呢? body刪不了 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <p><span>this is span1</span></p> </div> <div> <p><span>this is span2</span></p> </div> <div> <p><span>this is span3</span></p> </div> <div> <p><span>this is span4</span></p> </div> </body> <script> $(function() { $("div").unwrap(); }); </script> </html> ``` ## `add()` `slice()` 如果我想把一個元素的背景變紅... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("div").css("background", "red"); }); </script> </html> ``` 如果我想讓兩個元素變紅呢? ```javascript $(function() { $("div").css("background", "red"); $("span").css("background", "red"); }); ``` 如果我想一行代碼搞定呢? ```javascript $(function() { $("div") .add("span") .css("background", "red"); }); ``` add, 組合兩個元素, 然后一起操作... 那么`slice`呢? 莫非是傳說中的`對象切片`? 傳入`起始位置`和`結束位置`即可不包括結束位置 `[0,4)` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> <li>this is li 8</li> <li>this is li 9</li> <li>this is li 10</li> </ul> </body> <script> $(function() { $("li") .slice(0, 4) .css("background", "red"); }); </script> </html> ``` 只有開始位置呢? ```javascript $(function() { $("li") .slice(0) .css("background", "red"); }); ``` 開始結束都沒有呢? ```javascript $(function() { $("li") .slice() .css("background", "red"); }); ``` 只有結束, 沒有開始呢? 報錯了, 你個損戳兒... ```javascript $(function() { $("li") .slice(,4) .css("background", "red"); }); ``` 結束位置越界了呢? 就是到底 ```javascript $(function() { $("li") .slice(1, 444) .css("background", "red"); }); ``` ## `serialize()` `serializeArray()` 表單數據串聯, 一個串聯成字符串, 一個串聯成數組 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <form action="index.php"> <input type="text" name="a" value="1" /> <input type="text" name="b" value="2" /> <input type="text" name="c" value="3" /> </form> </body> <script> $(function() { console.log($("form").serialize()); // a=1&b=2&c=3 }); </script> </html> ``` 省了很多事情, 如果沒有, 會這樣寫... ```javascript $(function() { console.log($("[name=a]").val()); console.log($("[name=b]").val()); console.log($("[name=c]").val()); console.log($("[name=d]").val()); }); ``` 循環能省事兒嗎? ```javascript $(function() { var arr = []; $("input").each(function(key, value) { arr.push( $("input") .eq(key) .attr("name") ); }); $("input").each(function(key, value) { var str = arr[key] + " = " + $("input") .eq(key) .attr("value"); eval(str); }); console.log(a); console.log(b); console.log(c); }); ``` 更費勁....... 還可以轉數組(json 格式) ```javascript $(function() { console.log($("form").serializeArray()); // [ // { // a: "1" // }, // { // b: "2" // }, // { // c: "3" // } // ]; }); ```  ## `animate()` 動畫, 第一個參數是個對象, 設置運動的終點, 第二個參數時時間, 因為起點(css 已經寫好)和終點(第一個參數)已經確定, 所以時間可以決定運動速度點擊變大... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").click(function() { $(this).animate( { width: "400px", height: "400px" }, 1000 ); }); }); </script> </html> ``` 如果寬高寫成數字呢? ```javascript $(function() { $("div").click(function() { $(this).animate( { width: 400, height: 400 }, 1000 ); }); }); ``` 還有沒有第三個參數? 運動類型默認 swing 慢快慢, linear 勻速對比一下 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="div1"></div> <br /> <div class="div2"></div> </body> <script> $(function() { $(".div1").click(function() { $(".div1").animate( { width: 400, height: 400 }, 10000, "swing" ); $(".div2").animate( { width: 400, height: 400 }, 10000, "linear" ); }); }); </script> </html> ``` 還有沒有第四個參數? 回調函數 ```javascript $(function() { $("div").click(function() { $(this).animate( { width: 400, height: 400 }, 1000, function() { alert("完事..."); } ); }); }); ``` 剛才是變大,寬和高同時增加, 可不可以先變寬再變高呢? ```javascript $(function() { $("div").click(function() { $(this).animate( { width: 400 }, 1000, function() { $(this).animate( { height: 400 }, 1000 ); } ); }); }); ``` 聽說 jquery 的鏈式操作, 強大很啊! ```javascript $(function() { $("div").click(function() { $(this) .animate({ width: 400 }, 1000) .animate({ height: 400 }, 1000); }); }); ``` ## `stop()` 終止運動讓我們給一個`終止按鈕` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <input type="button" value="stop" /> <div></div> </body> <script> $(function() { $("div").click(function() { $(this) .animate({ width: 400 }, 7000) .animate({ height: 400 }, 7000); }); $("[type=button]").click(function() { $("div").stop(); }); }); </script> </html> ``` 注意, `stop()`只能終止當前運動那要是向全部停止怎么辦? 除了點兩次... 還記得 jquery 的`clone(true)` 那我們可不可以往`stop()`里傳一個`true`? ```javascript $(function() { $("div").click(function() { $(this) .animate({ width: 400 }, 7000) .animate({ height: 400 }, 7000); }); $("[type=button]").click(function() { $("div").stop(true); }); }); ``` 還有沒有第二個參數呢? 還真有... ```javascript $("[type=button]").click(function() { $("div").stop(true, true); }); ``` 作用, 快速到結尾... 但是好像只能`快進`一個如果想同時快進呢? ```javascript $("[type=button]").click(function() { $("div").finish(); }); ``` ## `delay()` 延遲??? 如果我想 div 先變寬, 歇一會兒, 然后再變高呢? ```javascript $("div").click(function() { $(this) .animate({ width: 400 }) .delay(1000) .animate({ height: 400 }); }); ``` ## `delegate()` `undelegate()` 代理??? 事件委托是干嘛用的? 我們之前給 li 添加點擊事件... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> <li>this is li 8</li> <li>this is li 9</li> <li>this is li 10</li> </ul> </body> <script> $(function() { $("li").on("click", function() { $(this).css("background", "red"); }); }); </script> </html> ``` 那我可不可以在 ul 上添加事件呢? 沒有問題!!! ```javascript $(function() { $("ul").delegate("li", "click", function() { $(this).css("background", "red"); }); }); ``` 委托 ul 代理其下的 li 的 onclick 事件那么其他地方的 li, 可以用嗎? ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> <li>this is li 8</li> <li>this is li 9</li> <li>this is li 10</li> </ul> <li>this is li 10</li> </body> <script> $(function() { $("ul").delegate("li", "click", function() { $(this).css("background", "red"); }); }); </script> </html> ``` 區別何在? 1. 把事件加在了 ul 身上, 點擊事件, 利用冒泡, 觸發 ul 的事件, 所以這也是外面的 li, 不行的原因 2. 省略了循環操作, 只需在 ul 上添加事件即可 3. 新增加的節點, 自動擁有相關事件 `undelegate` 取消事件委托 ```javascript $(function() { $("ul").delegate("li", "click", function() { $(this).css("background", "red"); $("ul").undelegate(); }); }); ``` ## `trigger()` 扳機??? 主動觸發觸發已經添加在 jquery 對象上的事件還是經典的`DCH`(div,click,hello world) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div></div> <script> $("div").on("click", function() { alert("hello world"); }); </script> </body> </html> ``` 現在我想, 加載完頁面, 立即彈出 hello world, 怎么辦? ```javascript $("div").on("click", function() { alert("hello world"); }); $("div").trigger("click"); ``` 如果是自定義事件呢? 其實 trigger 就是觸發自定義事件 ```javascript $("div").on("myFn", function() { alert("hello world"); }); $("div").trigger("myFn"); ``` 如何通過點擊來觸發自定義事件? ```javascript $("div").on("myFn", function() { alert("hello world"); }); $("div").on("click", function() { $("div").trigger("myFn"); }); ``` 自定義事件如果重名呢? ```javascript $("div").on("myFn", function() { alert("hello world"); }); $("div").on("myFn", function() { alert("hello world!!!"); }); $("div").on("click", function() { $("div").trigger("myFn"); }); ```