jQurey Dom節點操作
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：彭琦旺
撰寫時間：2020年5月1日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1.0JavaScript中創建DOM節點
創建流程：
1.創建元素 document.createElement()
例如：var div = document.createElement("div");
2.為節點添加一下屬性 element.setAttribute();
例如：div.setAttribute("class", "box");
3.可以使用innerText或則innerHTML屬性添加文本或則HTML內容
例如：div.innerHTML = "這是一個通過JS動態添加的div";
4.使用parentElement.appendChild()方法將新創建的節點添加到父節點中
例如：document.body.appendChild(div);
J 5.Query節點的創建:$()函式處理，$("html結構")
例如：var div = $("<div class='box'>這是一個通過jQuery動態添加的div</div>");
6.jQuery創建的節點是一個jQuery物件
1.1 jQuery節點的插入 向元素的內部插入DOM節點
①append() 向每個匹配的元素內部追加內容
②appendTo() 把所有匹配的元素追加到另一個指定的元素元素集合中。
③prepend() 向每個匹配的元素內部前置內容
④prependTo() 把所有匹配的元素前置到另一個、指定的元素元素集合中
1. append()與appendTo()方法
append(content|fn):向每個匹配的元素內部追加內容
- $(A).append(B);將B添加到A中
appendTo(content):把所有匹配的元素追加到另一個指定的元素元素集合中。
- $(A).appendTo(B);把A追加到B中
總結：這兩個方法功能相同，主要的不同是語法—>內容和目標的位置不同
2. prepend()與prependTo()方法
prepend(content):向每個匹配的元素內部前置內容
- $(A).prepend(B);將B添加到A中(和append添加的元素有位置上的區別)
prependTo(content):把所有匹配的元素前置到另一個、指定的元素元素集合中。
- $(A).prependTo(B);把A追加到B中
1.2 jQuery節點的插入 向元素的外部插入DOM節點
①after() 在每個匹配的元素之后插入內容
②before() 在每個匹配的元素之前插入內容
③insertAfter() 這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
④insertBefore() 顛倒了常規的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
1. after()與before() 方法
after(content|fn):在每個匹配的元素之后插入內容。
- $(A).after(B); 在A后面插入B元素
before(content|fn):在每個匹配的元素之前插入內容。
- $(A).before(B);在A前面插入B元素
2. insertAfter()與insertBefore()
insertAfter(content):把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
- $(A).insertAfter(B) 在B后面插入A元素 與$(A).after(B)是相反的操作，但是功能一樣
insertBefore(content):把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
- $(A).insertBefore(B) 在B前面面插入A元素 與$(A).before(B)是相反的操作，但是功能一樣
1.3 jQuery元素節點
①empty() 洗掉匹配的元素集合中所有的子節點
②remove([expr]) 從DOM中洗掉所有匹配的元素(元素本身與子元素都被洗掉)
③detach() 從DOM中洗掉所有匹配的元素(注意與remove的區別)
1.jQuery洗掉節點的方法 remove()與 empty()方法
1. empty() 洗掉匹配的元素集合中所有的子節點
2. remove([expr]) 從DOM中洗掉所有匹配的元素。expr:用于篩選元素的jQuery運算式
2. jQuery洗掉節點的方法 detach()方法
3. detach() 從DOM中洗掉所有匹配的元素。
- 這個方法不會把匹配的元素從jQuery物件中洗掉，因而可以在將來再使用這些匹配的元素。
與remove()不同的是，所有系結的事件、附加的資料等都會保留下來
- $("div").detach()這一句會移除物件，僅僅是顯示效果沒有了。
但是記憶體中還是存在的。當你append之后，又重新回到了檔案流中。就又顯示出來了。
2.0 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)
搜索所有與指定運算式匹配的元素。這個函式是找出正在處理的元素的后代元素的好方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54512.html
標籤：JavaScript