標籤：hang key 部分 input 替換 搜尋 事件綁定 表格 cti
一、文檔操作
（一）插入兒子項目
1、添加到指定元素內部的後面
$(A).append(B)：B作為A的最後一個兒子項目；$(A).appendTo(B)：A作為B最後一個兒子項目。以上兩種A必須為jQuery對象，而B既可以是DOM對象，又可以是jQuery對象，應用執行個體如下：
<body><ul> <li>111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").append("<p>ppp</p>"); //加到.c1裡面最後 $(".c1").append($("<p>ppp</p>")); $("<p>ddd</p>").appendTo("ul"); //加到ul裡面最後 $("<p>ddd</p>").appendTo($("ul"))</script></body>
2、添加指定元素內部的前面
$(A).prepend(B)：B作為A的第一個兒子項目；$(A).prependTo(B)：A作為B第一個兒子項目。以上兩種A必須為jQuery對象，而B既可以是DOM對象，又可以是jQuery對象，應用執行個體如下：
<body><ul> <li>111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").prepend("<p>ppp</p>"); //加到.c1裡面最前面 $(".c1").prepend($("<p>ppp</p>")); $("<p>ddd</p>").prependTo("ul"); //加到ul裡面最前面 $("<p>ddd</p>").prependTo($("ul"))</script></body>
（二）插入兄弟元素
1、添加到指定元素外部的後面
$(A).after(B)：B作為兄弟元素緊挨A元素後面；$(A).insertAfter(B)：A作為兄弟元素緊挨B元素後面。以上兩種A必須為jQuery對象，而B既可以是DOM對象，又可以是jQuery對象，應用執行個體如下：
<body><ul> <li>111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").after("<p>ppp</p>"); //<p>作為兄弟元素緊挨.c1後面 $(".c1").after($("<p>ppp</p>")); $("<p>ddd</p>").insertAfter("ul"); //<p>作為兄弟元素緊挨ul後面 $("<p>ddd</p>").insertAfter($("ul"))</script></body>
2、添加到指定元素外部的前面
$(A).before(B)：B作為兄弟元素緊挨A元素前面；$(A).insertBefore(B)：A作為兄弟元素緊挨B元素前面。以上兩種A必須為jQuery對象，而B既可以是DOM對象，又可以是jQuery對象，應用執行個體如下：
<body><ul> <li>111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").before("<p>ppp1</p>"); //p作為兄弟元素緊挨.c1元素前面 $(".c1").before($("<p>ppp2</p>")); $("<p>ddd1</p>").insertBefore("ul"); //p作為兄弟元素緊挨ul元素前面 $("<p>ddd2</p>").insertBefore($("ul"))</script></body>
（三）移除和清空元素
remove（）：從DOM中刪除所有匹配的元素；empty()：刪除匹配的元素集合中所有的子節點。
<body><ul> <li class="c1">111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").remove(); //將所有的.c1元素刪除 $("ul").empty() //將ul下的所有子節點清空</script></body>
（四）替換
$(A).replaceWith(B)：A被B替換；$(A).replaceAll(B)：A替換所有的B，應用執行個體：
<body><ul> <li class="c1">111</li> <li class="c1">222</li> <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script> $(".c1").replaceWith("<p>hhh</p>"); //.c1被<p>hhh</p>替換 $("<p>hhh</p>").replaceAll("li") //<p>hhh</p>替換所有的li標籤</script></body>
（五）複製
clone()，具體應用執行個體如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>穩重，我們能贏</p><script src="jquery-3.2.1.min.js"></script><script> $("p").on("click",function () { $(this).clone(true).insertAfter(this) //加上true表示連事件也會複製，即點擊複製後的標籤內容也可以實現複製事件 })</script></body></html>
二、綁定事件
（一）事件綁定
常見的事件類型有：click(點擊觸發)、hover（懸浮觸發）、focus（聚焦觸發）、blur（非聚焦觸發）、change（主要用於select標籤，更改選中就會觸發）、keyup（輸入按鍵一彈起就會觸發事件，如電商網站搜尋方塊，使用者每輸入一個字元，都會幫你使用者提示相關內容），綁定事件的文法如下：
jQuery對象.on(事件類型，function（）{})
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" placeholder="對子哈特" id="d1"><select name="" id="d2"> <option value="1">男</option> <option value="2">女</option></select><p id="recommend"></p><script src="jquery-3.2.1.min.js"></script><script> var $d=$("#d1"); //focus $d.on("focus",function () { $(this).attr("placeholder","") }); //blur $d.on("blur",function () { $(this).attr("placeholder","對子哈特") }); //keyup $d.on("keyup", function () { // 取值，發後端做聯想檢索 var userInput= $(this).val(); alert(userInput); }); //change $("#d2").on("change",function () { if($(this).val()==1){ $("#recommend").text("為你推薦美女服務") } else{ $("#recommend").text("為你推薦帥哥服務") } })</script></body></html>
（二）事件委託
同樣以js部分講到事件委託用到表格刪除為例，刪除事件委託執行個體如下：
$("table").on("click", ".delete", function () { $(this).parent().parent().remove(); // 刪除當前行 });
Python Day60 jQuery3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
