有關(guān)jquery與DOM節(jié)點操作方法和屬性記錄
網(wǎng)上找了份jquery的操作節(jié)點方法清單。如下：
|
方法 |
源包裝集/字串 |
目標(biāo)包裝集體 |
特性描述 |
|
A.append(B) |
B |
A |
若目標(biāo)包裝集只匹配一個元素，則源(也包括同源包裝集匹配的所有元素)將被移動到目標(biāo)位置；若目標(biāo)包裝集包含多個元素，則源將保留在原來的位置，但同時復(fù)制一份相同的副本到目標(biāo)位置。 由此，若目標(biāo)只匹配一個元素時，使用前述方法后源將被刪除。 |
|
B.appendTo(A) |
|||
|
A.prepend(B) |
|||
|
B.prependTo(A) |
|||
|
A.before(B) |
|||
|
B.insertBefore(A) |
|||
|
A.after(B) |
|||
|
B.insertAfter(A) |
舉例說明：在以上表格中，A.append(B)表示把B添加到與A匹配的所有元素的現(xiàn)有內(nèi)容后面，因此B是源，A是目標(biāo)包裝集。
總結(jié)一句話就是：使用以上方法后，兩個節(jié)點變?yōu)橥壭值芄?jié)點
以下是DOM操作節(jié)點的方法匯總:
(1)appendChild方法，用于向childNodes列表的末尾添加一個節(jié)點
//將newNode添加到someNode的childNodes列表的末尾
var returnedNode = someNode.appendChild(newNode);
//將someNode的第一個子節(jié)點變?yōu)樽詈笠粋€子節(jié)點
var returnedNode = someNode.appendChild(someNode.firstChild);
(2)insertBefore方法，可以把節(jié)點放在childNodes列表中某個特定的位置上
//插入后成為最后一個子節(jié)點
returnedNode = someNode.insertBefore(newNode, null);//和appendChild效果相同
//插入后成為第一個子節(jié)點
returnedNode = someNode.insertBefor(newNode, someNode.firstChild);
(3)replaceChild方法用于替換子節(jié)點，接受兩個參數(shù)：要插入的子節(jié)點和要替換的子節(jié)點。要替換的子節(jié)點將從文檔樹中被移除，同時由要插入的子節(jié)點占據(jù)其位置
//替換第一個子節(jié)點
returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
(4)removeChild方法用于移除子節(jié)點
//移除第一個子節(jié)點
var formerFirstChild = someNode.removeChild(someNode.firstChild);
總結(jié)一句話就是：以上方法都是父節(jié)點操作子節(jié)點的
下圖給出了父子、兄弟節(jié)點的查找關(guān)系
以上這篇有關(guān)jquery與DOM節(jié)點操作方法和屬性記錄就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)設(shè)置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了jQuery內(nèi)部原理和實現(xiàn)方式淺析,本文試圖從整體來闡述一下jQuery的內(nèi)部實現(xiàn),需要的朋友可以參考下2015-02-02
jQuery remove() 方法也可接受一個參數(shù)，允許您對被刪元素進(jìn)行過濾。下面通過實例代碼給大家介紹jQuery remove()過濾被刪除的元素，需要的的朋友參考下吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery排序插件tableSorter的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第四個功能——overlay的學(xué)習(xí)。2009-09-09
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)手風(fēng)琴案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
下面小編就為大家?guī)硪黄狫query實現(xiàn)的簡單輪播效果【附實例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
基于jQuery實現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置，需要的朋友可以參考一下2018-06-06
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個form，用這個form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實現(xiàn)過程中，頁面也沒有進(jìn)行刷新2013-05-05
這篇文章主要介紹了jQuery實現(xiàn)的兼容性浮動層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運算與屬性的動態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08