使用 jquery · 地表最強JS文檔

[toc] # 每日單詞 1. previous 上一個 1. prev 上一個 1. equal 相等 1. attribute 屬性 # jquery 簡介 ## 什么是 jquery? - **一個 js 庫, 大型開發必備** - **相當于 js 升級版** ## jquery 的好處 > 如果把編程比喻成做菜... - **簡化原生 js 操作** - **不用擔心兼容性** - **提供大量的實用方法** ## 如何學習 jquery - **jquery 只是輔助工具, 要正確面對(佐料齊了...)** - **原生 js 和 jquery 都要會(學了英語就不會漢語了?)(原生 js 是基礎)** - **先易后難...** # jquery 的設計思想-選擇元素 ## 選擇網頁元素 - **模擬 css 選擇元素** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div id="div1" class="box">div</div> </body> <script> // 三種方式, 都能找到對象 $(function() { $("#div1").css("background", "red"); // $("div").css("background", "yellow"); // $(".box").css("background", "blue"); }); </script> </html> ``` _jquery 省略了循環..._ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> // jquery省略了循環 $(function() { $(".box").css("background", "blue"); }); </script> </html> ``` - **獨有的表達式選擇** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:first").css("background", "blue"); // 第一個div會變藍... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:last").css("background", "blue"); // 最后一個div會變藍... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:eq(2)").css("background", "blue"); // 第三個div會變藍... $(".box") .eq(1) .css("background", "yellow"); // 第二個div會變黃... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li 0</li> <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> </ul> </body> <script> $("li:odd").css("background", "blue"); // 隔行換色, 奇數行 // $("li:even").css("background", "blue"); // 隔行換色, 偶數行 </script> </html> ``` - **多種篩選方法** _根據 div 找對象的兩種方法_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter(".li1") .css("background", "yellow"); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li.li1").css("background", "yellow"); }); </script> </html> ``` _過濾器支持屬性值_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li title="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li title="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter("[title=hello]") .css("background", "yellow"); }); </script> </html> ``` _過濾器, 支持自定義屬性_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li tittle="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li tittle="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter("[tittle=hello]") .css("background", "yellow"); }); </script> </html> ``` _也可以不要過濾器_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li tittle="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li tittle="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li[tittle=hello]").css("background", "yellow"); }); </script> </html> ``` ## jquery 寫法 - **方法函數化** 點擊獲取 div 內的 html 內容... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).html()); }); }); </script> </html> ``` _jquery 中基本不用等號_ _幾乎所有的操作, 都需要加上括號_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).html()); }); }); </script> </html> ``` - **強大的鏈式操作** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1"></div> </body> <script> $(function() { var oDiv = $("#div1"); oDiv.html("hello"); oDiv.css("background", "red"); $("div").click(function() { alert("hello world"); }); }); </script> </html> ``` _鏈式操作_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1"></div> </body> <script> $(function() { // var oDiv = $("#div1");l // oDiv.html("hello"); // oDiv.css("background", "red"); // $("div").click(function() { // alert("hello world"); // }); $("#div1") .html("hello") .css("background", "red") .click(function() { alert("hello world"); }); }); </script> </html> ``` - **取值賦值合體**(方法重載) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { alert($("div").html()); // 沒有參數就取值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { $("div").html("hello China"); // 有參數就賦值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { console.log($("div").css("width")); // 一兩個參數就賦值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { $("div").css("width", "300px"); // 兩個參數就賦值 }); </script> </html> ``` _如果是一堆元素呢?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li tag 0</li> <li>this is li tag 1</li> <li>this is li tag 2</li> <li>this is li tag 3</li> <li>this is li tag 4</li> <li>this is li tag 5</li> <li>this is li tag 6</li> </ul> </body> <script> $(function() { $("li").css("background", "yellow"); }); </script> </html> ``` 如果取值, 取第一個 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li tag 0</li> <li>this is li tag 1</li> <li>this is li tag 2</li> <li>this is li tag 3</li> <li>this is li tag 4</li> <li>this is li tag 5</li> <li>this is li tag 6</li> </ul> </body> <script> $(function() { console.log($("li").html()); }); </script> </html> ``` ## jquery 和原生 js 的關系(公共廁所...) - **可以共存, 不能混用** 可以一行 jquery, 一行原生不能一行里面,既有 jquery, 又有原生... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).innerHTML); // 不能混用 alert(this.html()); // 不能混用 }); }); </script> </html> ``` ## `$()`下的常用方法 ### `has()`(包含)看元素里面的東西... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box"> div1 <span>span1</span> </div> <div>div2</div> </body> <script> $(function() { $("div") .has("span") .css("background", "red"); }); </script> </html> ``` _只能是兒子嗎?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box"> div1 <span> span1 <span class="span1"></span> </span> </div> <div>div2</div> </body> <script> $(function() { $("div") .has("span.span1") .css("background", "red"); }); </script> </html> ``` ### `not()`(對象是當前元素) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div1</div> <div>div2</div> </body> <script> $(function() { $("div") .not(".box") .css("background", "red"); }); </script> </html> ``` ### `filter()`(反義詞是`not()`, 對象同樣是當前元素) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div1</div> <div>div2</div> </body> <script> $(function() { $("div") .filter(".box") .css("background", "red"); }); </script> </html> ``` ## 注意 has 和 filter 的區別(對象不同) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">this is div</div> <div><span class="box">this is span</span></div> </body> <script> $(function() { $("div") .has(".box") .css("background", "red"); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">this is div</div> <div><span class="box">this is span</span></div> </body> <script> $(function() { $("div") .filter(".box") .css("background", "red"); }); </script> </html> ``` ### `next()` (下一個兄弟節點) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("div") .next() .css("background", "red"); }); </script> </html> ``` _可以連寫嗎?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("div") .next() .next() .css("background", "red"); }); </script> </html> ``` ### `prev()` (上一個兄弟節點) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("p") .prev() .prev() .css("background", "red"); }); </script> </html> ``` ### `find()`(查找) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2") .css("background", "red"); }); </script> </html> ``` ### `eq()`(下標) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2") .eq(2) .css("background", "red"); }); </script> </html> ``` _另一種寫法(`:`表示修飾)_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2:eq(1)") .css("background", "red"); }); </script> </html> ``` ### `index()`(兄弟中的排行) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3 id="h3">this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> </body> <script> $(function() { console.log($("#h3").index()); }); </script> </html> ``` ### `attr()` 一個參數取值 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert($("div").attr("title")); }); </script> </html> ``` 兩個參數賦值 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert($("div").attr("title", "45678")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert( $("div") .attr("title", "45678") .attr("class", "box") ); }); </script> </html> ``` ## 編寫一個選項卡 > 原生能寫, jquery 就能寫, 而且更快, _先來原生的_ 先來布局 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 div { width: 200px; height: 200px; border: 1px solid red; display: none; } #div1 div:first-of-type { display: block; } .active { background: red; } </style> </head> <body> <div id="div1"> <input class="active" type="button" value="button1" /> <input type="button" value="button2" /> <input type="button" value="button3" /> <div>00001</div> <div>00002</div> <div>00003</div> </div> </body> </html> ``` 再寫 js ```javascript window.onload = function() { var oDiv = document.getElementById("div1"); var aInput = oDiv.getElementsByTagName("input"); var aCon = oDiv.getElementsByTagName("div"); for (var i = 0; i < aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function() { for (var i = 0; i < aInput.length; i++) { aInput[i].className = ""; aCon[i].style.display = "none"; } this.className = "active"; aCon[this.index].style.display = "block"; }; } }; ``` 同樣的 html, 再寫 jquery ```javascript $(function() { $("#div1") .find("input") .click(function() { $("#div1") .find("input") .attr("class", ""); $("#div1") .find("div") .css("display", "none"); $(this).attr("class", "active"); $("#div1") .find("div") .eq($(this).index()) .css("display", "block"); }); }); ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 div { width: 200px; height: 200px; border: 1px solid red; display: none; } #div1 div:first-of-type { display: block; } .active { background: red; } </style> </head> <body> <div id="div1"> <input index="0" class="active" type="button" value="button1" /> <input index="1" type="button" value="button2" /> <input index="2" type="button" value="button3" /> <div>00001</div> <div>00002</div> <div>00003</div> </div> </body> <script> $(function() { $("#div1") .find("input") .click(function() { $("#div1") .find("input") .attr("class", ""); $(this).attr("class", "active"); $("#div1") .find("div") .css("display", "none"); $("#div1") .find("div") .eq($(this).attr("index")) .css("display", "block"); }); }); </script> </html> ``` ## `$()下的常用方法` - `addClass()` `removeClass()` > 添加刪除樣式 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2"></div> </body> <script> $(function() { $("div").addClass("box3 box4"); }); </script> </html> ``` _如果添加的 class 名稱, 已經存在了, 會重復嗎?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").addClass("box3 box4"); }); </script> </html> ``` 刪除類名 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").removeClass("box3"); }); </script> </html> ``` _如果類名沒有呢?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").removeClass("box3 box4"); }); </script> </html> ``` - `width()` `innerWidth()` `outerWidth()` ```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").width()); }); </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").css("width")); }); </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() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("div").outerWidth()); }); </script> </html> ``` 加一個 padding... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; padding: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("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; padding: 20px; border: 20px solid black; margin: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("div").outerWidth()); console.log($("div").outerWidth(true)); }); </script> </html> ``` `console.log($("div").width()); // width` `console.log($("div").innerWidth()); // width+padding` `console.log($("div").outerWidth()); // width+padding+border` `console.log($("div").outerWidth(true)); // width+padding+border+margin` - `height()` `innerHeight()` `outerHeight()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 100px; background: red; padding: 20px; border: 20px solid black; margin: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").height()); console.log($("div").innerHeight()); console.log($("div").outerHeight()); console.log($("div").outerHeight(true)); }); </script> </html> ``` - `insertBefore()` `before()` a insertBefore b, 把 a 插入達到 b 的前面 (a,b) a before b, a 的前面是 b (b,a) ```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() { $("span").insertBefore($("div")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").before($("div")); }); </script> </html> ``` - `insertAfter()` `after()` a insertAfter b 把 a 插到 b 的后面, (b,a) a after b a 的后面有個 b, (a,b) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").insertAfter($("div")); }); </script> </html> ``` ```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() { $("span").after($("div")); }); </script> </html> ``` - `appendTo()` `append()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").appendTo($("div")); // div.appendChild(span) }); </script> </html> ``` ```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() { $("span").append($("div")); // span.appendChild(div) }); </script> </html> ``` - `prependTo()` `prepend()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").prependTo($("div")); // span作為div的第一個孩子 }); </script> </html> ``` ```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").prepend($("span")); // span作為div的第一個孩子 }); </script> </html> ``` **這些方法區別何在?**(后續操作不同) ```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") .before($("span")) .css("background", "red"); }); </script> </html> ``` ```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() { $("span") .insertBefore($("div")) .css("background", "red"); }); </script> </html> ``` - `remove()` 刪除節點 ```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() { $("span").remove(); }); </script> </html> ``` - `on()` `off()` 事件 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { document.getElementsByTagName("div")[0].onclick = function() { alert("hello world"); }; }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").click(function() { alert("hello jquery"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("click", function() { alert("has clicked"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover", function() { alert("has overed"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on({ click: function() { alert("clicked"); }, mouseover: function() { alert("overed"); } }); }); </script> </html> ``` off 關閉事件 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); $("div").off(); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); $("div").off("click"); }); }); </script> </html> ```