WEB入門之十六 操作DOM節(jié)點

視頻課：https://edu.csdn.net/course/play/7621

學習內容

jQuery插入DOM節(jié)點

jQuery刪除DOM節(jié)點

jQuery替換DOM節(jié)點

jQuery篩選DOM節(jié)點

能力目標

能熟練使用jQuery進行節(jié)點操作

能熟練使用jQuery進行節(jié)點篩選

本章簡介

DOM是Document Object Model的縮寫，即文檔對象模型，它是W3C的標準規(guī)范，提供了使用JavaScript操縱頁面元素的接口。節(jié)點是DOM中最基本的組成單位，每個標簽、每個文本都可以看成是一個節(jié)點。本章將學習使用jQuery對DOM節(jié)點進行操作。

核心技能部分

7.1?節(jié)點操作

節(jié)點是DOM中最基本的組成單位，每個標簽、每個文本都可以看成是一個節(jié)點。節(jié)點操作包括獲得節(jié)點、插入節(jié)點、刪除節(jié)點、復制節(jié)點和替換節(jié)點等等。

7.1.1?獲得節(jié)點

節(jié)點一般分為三種：元素節(jié)點、文本節(jié)點和屬性節(jié)點。元素節(jié)點通常使用前面講的各種選擇器即可獲得；文本節(jié)點使用text( )函數即可獲得；屬性節(jié)點使用attr( )函數即可獲得。這些內容在前面都已經講過，此處不再多述。

7.1.2?插入節(jié)點

在實際開發(fā)中，有些節(jié)點需要動態(tài)的插入到頁面中，這時可以通過jQuery提供好的一些函數來實現，詳見表7-1-1所示。

表7-1-1 ?節(jié)點插入函數

函數

說明

append( )

A.append ( B )，把B添加到A元素內的尾部

prepend( )

A.prepend( B )，把B添加到A元素內的頭部

before( )

A.before( B )，把B添加到A的前面

after( )

A.after( B )，把B添加到A的后面

jQuery提供的節(jié)點插入函數比較全面，下面通過一些示例來演示這些函數的用法，注意它們之間的區(qū)別。

示例7.1

網頁原本只有一個包含超鏈接的div，我們通過append方法向該div內的尾部插入了一個新的div

網頁上原本存在的是邊框為實線的div，而邊框是虛線的是新插入的div。如果把代碼中的append函數換成prepend函數，其他不變

通過對比可以得出append和prepend這兩個函數的異同點：這兩個函數都是向元素內部插入新節(jié)點的，append函數是把節(jié)點插入到元素內的尾部，而prepend函數是把節(jié)點插入到元素內的頭部了。

如果把代碼中的prepend換成before函數，其他不變

如果把代碼中的before換成after函數，其他不變

通過對比可以得出before和after這兩個函數的異同點：這兩個函數都是向元素外部插入新節(jié)點的，before函數是把節(jié)點插入到元素的前面，after函數是把節(jié)點插入到元素的后面。

7.1.3?刪除節(jié)點

刪除節(jié)點指的是把現有的元素從網頁中刪除，這時可以通過jQuery提供好的一些函數來實現，詳見表7-1-2所示。

表7-1-2 ?節(jié)點刪除函數

函數

說明

remove( )

A.remove( )，把A從頁面中刪除掉

empty( )

A.empty( )，把A中的所有子元素刪除掉

這兩個函數都比較簡單，下面通過一些示例來演示這些函數的用法，特別是它們之間的區(qū)別。

示例7.2

網頁上原本有個下拉列表框

我們看到下拉列表框中的所有子元素（option）都被刪掉了。如果把代碼中的empty換成remove函數，其他不變，運行后會發(fā)現整個下拉列表框都被刪除掉了。

7.1.4?替換節(jié)點

替換節(jié)點是指把現有的元素用別的元素替換，這主要通過jQuery中的replaceWith函數實現，下面是具體的示例。

示例7.3

在上述代碼中，當鼠標懸浮到某個語言上時，通過replaceWith函數把原節(jié)點（黑色字體）使用紅色字體的節(jié)點進行了替換

7.1.5?包裹節(jié)點

包裹節(jié)點是指使用其他節(jié)點包裹住某節(jié)點，使節(jié)點成為其他節(jié)點的子節(jié)點，這可以通過表7-1-3中的函數實現。

表7-1-3 ?節(jié)點包裹函數

函數

說明

wrap( )

A.wrap( B )，用B包裹每一個A

wrapAll( )

A.wrapAll( B )，把所有的A作為整體用B包裹

wrapInner( )

A.wrapInner( B )，用B把A中的子元素整個包裹

我們先通過一個示例演示wrap和wrapAll函數的區(qū)別，參考代碼如下所示。

示例7.4

上述代碼使用wrap函數給所有的span標簽包裹了一個帶有黑色邊框的div

如果把上述代碼中的wrap換成wrapAll函數，其他不變

wrapInner函數用來包裹元素內的子元素，下面是該函數的一個示例。

示例7.5

上述代碼使用wrapInner函數包裹ul中的所有l(wèi)i子元素

7.1.6?復制節(jié)點

clone函數用來復制節(jié)點，下面是該函數的一個示例。

示例7.6

上述代碼包含兩個下拉列表框，當單擊按鈕時通過clone函數把第一個下拉列表框的選中項，復制到了另一個下拉列表框中。

7.2?節(jié)點篩選

前面我們學習了過濾選擇器，它是在獲取到元素后通過索引進一步進行了過濾或篩選。除此之外，jQuery還提供了很多函數來對獲取到的元素進一步進行過濾或篩選，這些函數整體可分為兩大類：節(jié)點過濾函數和節(jié)點查找函數。

7.2.1?過濾節(jié)點

節(jié)點過濾函數主要是通過索引來獲取節(jié)點，詳見表7-1-4所示。

表7-1-4 ?節(jié)點過濾函數

節(jié)點過濾函數

說明

eq( )

按索引獲取匹配元素中的第n個元素，索引從0開始

first( )

獲取匹配元素中的第1個元素

last( )

獲取匹配元素中的最后1個元素

slice( )

按起始索引獲取匹配元素中的子集

下面通過一個示例來演示eq、first、last和slice函數的用法，這幾個函數有個共同點：都是通過索引進行過濾的。

示例7.7

上述代碼分別使用eq、first、last和slice函數結合選擇器獲取了相關表單數據

7.2.2?查找節(jié)點

節(jié)點查找函數用來通過父子、平級、后代等關系查找節(jié)點，詳見表7-1-5所示。

表7-1-5 節(jié)點查找函數

節(jié)點查找函數

說明

children( )

根據條件獲取元素的子元素

parent( )

獲取元素的父元素

prev( )

獲取緊挨著的前一個平級元素

next( )

獲取緊挨著的后一個平級元素

find( )

根據條件找出元素的后代元素

siblings( )

找出與元素平級的所有其他元素

下面我們通過一個示例來演示這幾個函數的具體用法，參考代碼如下所示。

示例7.8

上述代碼包含了一個樹形菜單

本章總結

節(jié)點操作是DOM最基礎的操作，也比較繁瑣，包括插入節(jié)點、刪除節(jié)點、復制節(jié)點等。jQuery針對節(jié)點操作提供了很多函數供開發(fā)人員使用，這些函數很多比較相似，大家在使用的時候要注意區(qū)分。

任務實訓部分

1：動態(tài)管理樹形菜單

訓練技能點

??jQuery節(jié)點操作

需求說明

使用jQuery節(jié)點操作函數對樹形菜單進行動態(tài)添加和刪除，如圖7.2.1所示。添加節(jié)點時，需要先單擊選中某個一級或二級節(jié)點，然后在文本框中填寫新添加的節(jié)點名，單擊【添加】按鈕把節(jié)點名作為新節(jié)點添加到選中的節(jié)點下面。刪除節(jié)點只實現刪除三級節(jié)點即可。

圖7.2.1 ?樹形菜單

實現步驟

（1）實現圖7.2.1所示的界面，參考代碼如下所示。

節(jié)點文本：

國產

北京奔馳

北京現代

悅翔

索納塔

途勝

伊蘭特

比亞迪

（2）實現節(jié)點的添加，參考代碼如下所示。

2：動態(tài)管理表格

訓練技能點

??jQuery節(jié)點操作

需求說明

使用jQuery節(jié)點操作函數對行進行動態(tài)添加和刪除。

實現步驟

（1）實現圖7.2.2所示的界面，參考代碼如下所示。

添加商品

（2）實現商品的添加和刪除，參考代碼如下所示。

3：省市級聯(lián)

訓練技能點

??jQuery節(jié)點操作

需求說明

按照圖7.2.3所示的界面使用jQuery節(jié)點操作函數實現省市級聯(lián)。

4：價格小計

訓練技能點

??jQuery節(jié)點操作

需求說明

按照圖7.2.4所示的界面使用jQuery節(jié)點操作函數實現價格小計。單擊“加”“減”圖片可以修改文本框中的數值大小，同時后面的小計要計算出來。

鞏固練習

一、問答題

1. 請舉例描述append和prepend這兩個函數的異同點。

2. 請舉例描述before和after這兩個函數的異同點。

3. 請舉例描述remove和empty這兩個函數的異同點。

二、上機練習

使用jQuery節(jié)點操作函數實現表格內容的修改。當單擊【修改】按鈕時，單元格中的文本信息替換為文本框；單擊【確定】按鈕時，文本框中的數據顯示到單元格中。

JavaScript jQuery web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。