jQuery DOM總結
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：黃富滔
撰寫時間：2020年5月02日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知識點羅列：
JavaScript節點與jQuery節點的創建
JavaScript中創建DOM節點
創建流程：
1.創建元素 document.createElement()
2.為節點添加一下屬性 element.setAttribute();
3.可以使用innerText或則innerHTML屬性添加文本或則HTML內容
4.使用parentElement.appendChild()方法將新創建的節點添加到父節點中
jQuery中創建DOM節點
1.創建元素 var divs = $("<div></div>");
2.為節點添加一下屬性 divs.attr("class", "box1");
3.添加文本 divs.html("這是一個通過jQuery創建的div");
4.將新創建的節點添加到父節點中 $("body").append(div);
jQuery的方法
1.append()與appendTo()方法
<div class="box"></div>
向box中添加一個p標簽
（1）. $(".box").append("<p>通過append方法動態添加的P標簽</p>");
（2）$("<p>通過appendTo方法動態添加的P標簽</p>").appendTo(".box");
2.prepend()與prependTo()方法
<div class="box"></div>
向box中添加一個p標簽
（1）. $(".box").prepend("<p>通過prepend方法動態添加的P標簽</p>");
（2） $("<p>通過prepend方法動態添加的P標簽</p>").prependTo(".box");
注意：向每個匹配的元素內部前置內容，添加的內容總會在append或則appendTo前面
3.after()與insertAfter()方法
<div class="box"></div>
向box的后面添加一個p標簽
（1）$("#box").after("<p>通過jQuery中的after方法動態的添加P標簽</p>");
（2）$("<p>通過jQuery中的insertAfter方法動態的添加P標簽</p>").insertAfter("#box");
4.before()與insertBefore()方法
<div class="box"></div>
向box的前面添加一個p標簽
（1）. $("#box").before("<p>通過jQuery中的before方法動態的添加P標簽</p>");
（2）$("<p>通過jQuery中的insertBefore方法動態的添加P標簽</p>").insertBefore("#box");
前面四個方法總結：這兩個方法功能相同，主要的不同是語法—>內容和目標的位置不同
5 jQuery洗掉節點的方法 remove()與 empty()方法
1. empty() 洗掉匹配的元素集合中所有的子節點
2. remove([expr]) 從DOM中洗掉所有匹配的元素。expr:用于篩選元素的jQuery運算式
3. detach() 從DOM中洗掉所有匹配的元素。
- 這個方法不會把匹配的元素從jQuery物件中洗掉，因而可以在將來再使用這些匹配的元素。
與remove()不同的是，所有系結的事件、附加的資料等都會保留下來
- $("div").detach()這一句會移除物件，僅僅是顯示效果沒有了。
但是記憶體中還是存在的。當你append之后，又重新回到了檔案流中。就又顯示出來了。
jQuery 元素的篩選
eq(index|-index):獲取當前鏈式操作中第N個jQuery物件，回傳jQuery物件，當引數大于等于0時為正向選取，比如0代表第一個，1代表第二個。當引數為負數時為反向選取，比如-1為倒數第一個，具體可以看以下示例。
類似的有get(index),不過get(index)回傳的是DOM物件。
引數說明：index 一個整數，指示元素基于0的位置,這個元素的位置是從0算起。
-index 一個整數，指示元素的位置，從集合中的最后一個元素開始倒數。(-1算起)
first() 獲取第一個元素
last()獲取最后個元素
hasClass(class) 檢查當前的元素是否含有某個特定的類，如果有，則回傳true
這其實就是 is("." + class)。
filter(expr|obj|ele|fn) 篩選出與指定運算式匹配的元素集合。
這個方法用于縮小匹配的范圍。用逗號分隔多個運算式
find(expr|obj|ele)
搜索所有與指定運算式匹配的元素。這個函式是找出正在處理的元素的后代元素的好方法
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
請問一下是不是哪里有問題？初來報道，請多多關照
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54535.html
標籤：非技術區