快捷導(dǎo)航

jQuery 中的 DOM 操作

更新時(shí)間：2016年04月26日 08:56:40 作者：_cpan

在DOM操作中，常常需要?jiǎng)討B(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化，并且達(dá)到各種各樣的人機(jī)交互目的.

DOM(Document Object Model—文檔對(duì)象模型)：一種與瀏覽器,平臺(tái), 語(yǔ)言無(wú)關(guān)的接口,使用該接口可以輕松地訪問頁(yè)面中所有的標(biāo)準(zhǔn)組件

DOM 操作的分類:

DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它. 它的用途并非僅限于處理網(wǎng)頁(yè),也可以用來(lái)處理任何一種是用標(biāo)記語(yǔ)言編寫出來(lái)的文檔, 例如: XML

HTML DOM: 使用 JavaScript和 DOM 為 HTML文件編寫腳本時(shí),　有許多專屬于 HTML-DOM的屬性

CSS-DOM:針對(duì)于 CSS操作, 在 JavaScript中, CSS-DOM 主要用于獲取和設(shè)置 style對(duì)象的各種屬性

查找節(jié)點(diǎn)

查找節(jié)點(diǎn):

查找元素節(jié)點(diǎn):通過 jQuery 選擇器完成.

查找屬性節(jié)點(diǎn):查找到所需要的元素之后, 可以調(diào)用 jQuery對(duì)象的 attr() 方法來(lái)獲取它的各種屬性值

創(chuàng)建節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn): 使用 jQuery 的工廠函數(shù) $(): $(html);會(huì)根據(jù)傳入的 html 標(biāo)記字符串創(chuàng)建一個(gè) DOM對(duì)象, 并把這個(gè) DOM對(duì)象包裝成一個(gè) jQuery 對(duì)象返回.

注意:

動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔中,而是需要使用其他方法將其插入到文檔中;

當(dāng)創(chuàng)建單個(gè)元素時(shí),需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的 XHTML 格式.例如創(chuàng)建一個(gè)元素,可以使用 $(“”) 或 $(“”),但不能使用 $(“”) 或 $(“”)

創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫出來(lái);創(chuàng)建屬性節(jié)點(diǎn)也是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)建

插入節(jié)點(diǎn)(1)

動(dòng)態(tài)創(chuàng)建 HTML元素并沒有實(shí)際用處, 還需要將新創(chuàng)建的節(jié)點(diǎn)插入到文檔中,即成為文檔中某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)

插入節(jié)點(diǎn)(2)

以上方法不但能將新創(chuàng)建的 DOM元素插入到文檔中, 也能對(duì)原有的 DOM元素進(jìn)行移動(dòng).

刪除節(jié)點(diǎn)

remove(): 從 DOM中刪除所有匹配的元素, 傳入的參數(shù)用于根據(jù) jQuery表達(dá)式來(lái)篩選元素. 當(dāng)某個(gè)節(jié)點(diǎn)用 remove()方法刪除后, 該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將被同時(shí)刪除.這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用.

empty(): 清空節(jié)點(diǎn) –清空元素中的所有后代節(jié)點(diǎn)(不包含屬性節(jié)點(diǎn)).

復(fù)制節(jié)點(diǎn)

clone(): 克隆匹配的 DOM元素, 返回值為克隆后的副本.但此時(shí)復(fù)制的新節(jié)點(diǎn)不具有任何行為.

clone(true): 復(fù)制元素的同時(shí)也復(fù)制元素中的的事件

替換節(jié)點(diǎn)

replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或 DOM元素

replaceAll(): 顛倒了的 replaceWith() 方法.

注意: 若在替換之前, 已經(jīng)在元素上綁定了事件,替換后原先綁定的事件會(huì)與原先的元素一起消失

包裹節(jié)點(diǎn)

wrap(): 將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來(lái).該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用, 而且不會(huì)破壞原始文檔的語(yǔ)義.

wrapAll(): 將所有匹配的元素用一個(gè)元素來(lái)包裹.而 wrap() 方法是將所有的元素進(jìn)行單獨(dú)包裹.

wrapInner(): 將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起來(lái).