有關(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鼠標(biāo)放上去顯示全名的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件,本文通過示例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法
本篇文章主要是對jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02ajax+jQuery實現(xiàn)級聯(lián)顯示地址的方法
這篇文章主要介紹了ajax+jQuery實現(xiàn)級聯(lián)顯示地址的方法,涉及jQuery操作Ajax實現(xiàn)級聯(lián)顯示的技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05jQuery 動態(tài)酷效果實現(xiàn)總結(jié)
jQuery是一個優(yōu)秀的JavaScript框架,可以很好的解決不同瀏覽器兼容的問題,尤其是在ASP.NET MVC下,它的作用更加的凸顯。2009-12-12