網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)第4章-使用jQuery操作DOM

1、jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）劉剛 主編新一代信息技術(shù)“十三五”系列規(guī)劃教材 第4章 使用jQuery操作DOM 本章要點(diǎn)： DOM操作的分類 對(duì)元素的內(nèi)容和值進(jìn)行操作 創(chuàng)建節(jié)點(diǎn) 查找節(jié)點(diǎn) 插入節(jié)點(diǎn) 刪除、復(fù)制與替換節(jié)點(diǎn) 遍歷節(jié)點(diǎn) 對(duì)元素的CSS樣式進(jìn)行操作 DOM 是文檔對(duì)象模型，根據(jù) W3C DOM 規(guī)范為文檔提供了一種結(jié)構(gòu)化表示方法，通過(guò)該方法可以改變文檔的內(nèi)容和展示形式。在實(shí)際操作中，DOM 更像是橋梁，通過(guò)它可以實(shí)現(xiàn)跨平臺(tái)訪問(wèn)。本章我們將詳細(xì)介紹如何使用 jQuery 操作DOM 中的元素或?qū)ο蟆?.1 DOM 操作的分類 通常來(lái)說(shuō)，DOM 操作分為 3 方面：DOM C

2、ore、HTML-DOM 和 CSS-DOM。1DOM Core DOM Core（核心 DOM）：它不專屬于任何語(yǔ)言，它是一組標(biāo)準(zhǔn)的接口，任何一種支持 DOM 的程序語(yǔ)言都可以使用它。JavaScript 中的 getElementById()、getElementsByTag Name()、getAttribute()和 setAttribute()等方法都是 DOM Core 的組成部分。例如：（1）使用 DOM Core 來(lái)獲取表單對(duì)象的方法：document.getElementsByTagName(form); （2）使用 DOM Core 來(lái)獲取元素的 title 屬性：elem

3、ent.getAttribute(title);2HTML-DOM 在 JavaScript 中，有很多專屬于 HTML-DOM 的屬性。如 document.forms、element.src 等。例如：（1）使用 HTML-DOM 來(lái)獲取表單對(duì)象的方法：document.forms; / HTML-DOM當(dāng)中提供了forms對(duì)象 （2）使用 HTML-DOM 來(lái)獲取元素的 title 屬性：element.title; 通過(guò)以上代碼可以看出，HTML-DOM 代碼通常比 DOM Core 簡(jiǎn)短，不過(guò)它只能用來(lái)處理 Web 文檔。3CSS-DOM CSS-DOM 是針對(duì) CSS 的操作。在

4、JavaScript 中，CSS-DOM 主要用于獲取和設(shè)置 style 對(duì)象的屬性。例如：element.style.color = “#ADD8E6”;4.2 對(duì)元素內(nèi)容和值進(jìn)行操作 jQuery 提供了對(duì)元素的內(nèi)容和值進(jìn)行操作的方法，其中，元素的值是元素的一種屬性，大部分元素的值都對(duì)應(yīng) value 屬性。 元素的內(nèi)容是指定義元素的起始標(biāo)記和結(jié)束標(biāo)記中間的內(nèi)容，又可分為文本內(nèi)容和HTML 內(nèi)容。 測(cè)試內(nèi)容 在這段代碼中，div 元素的文本內(nèi)容就是“測(cè)試內(nèi)容”，文本內(nèi)容不包含元素的子元素，只包含元素的文本內(nèi)容。而“測(cè)試內(nèi)容”就是元素的 HTML 內(nèi)容，HTML 內(nèi)容不僅包含元素的文本內(nèi)容，而

5、且還包含元素的子元素。4.2.1 對(duì)元素內(nèi)容進(jìn)行操作1用 text()方法對(duì)文本內(nèi)容的操作 jQuery 提供了 text()和 text(val)兩個(gè)方法用于對(duì)文本內(nèi)容進(jìn)行操作，其中 text()用于獲取全部匹配元素的文本內(nèi)容，text(val)用于設(shè)置全部匹配元素的文本內(nèi)容。【例 4-1】 設(shè)置 div 元素的文本內(nèi)容（實(shí)例位置：源碼第 4 章4-1）。（1）創(chuàng)建一個(gè)名稱為 index.html 的文件，在該文件的標(biāo)記中應(yīng)用下面的語(yǔ)句引入 jQuery 庫(kù)。 （2）在頁(yè)面的標(biāo)記中添加一個(gè)元素，令它的文本內(nèi)容為空。代碼如下： （3）在引入 jQuery 庫(kù)的代碼下方編寫 jQuery 代碼，

6、實(shí)現(xiàn)為標(biāo)記設(shè)置文本內(nèi)容。具體代碼如下： $(document).ready(function() $(div).text(我是通過(guò)text()方法設(shè)置的文本內(nèi)容); ); 運(yùn)行本實(shí)例，效果如圖 4-1 所示。圖 4-1 設(shè)置 div 元素的文本內(nèi)容2用 html()方法對(duì) HTML 內(nèi)容的操作 jQuery 提供了 html()和 html(val)兩個(gè)方法用于對(duì) HTML 內(nèi)容進(jìn)行操作。其中 html()用于獲取第 1 個(gè)匹配元素的 HTML 內(nèi)容，text(val)用于設(shè)置全部匹配元素的 HTML 內(nèi)容。例如，在一個(gè) HTML 頁(yè)面中，包括下面 3行代碼： 當(dāng)前時(shí)間：2018-09-09

7、星期日 13:20:10 要獲取 div 元素的 HTML 內(nèi)容，可以使用下面的代碼：alert($(div).html(); 得到的結(jié)果如圖 4-2 所示。圖 4-2 獲取到的 div 元素的 HTML 內(nèi)容 要重新設(shè)置 div 元素的 HTML 內(nèi)容，可以使用下面的代碼：$(div).html(我是通過(guò)html()方法設(shè)置的HTML內(nèi)容); 這時(shí)，再應(yīng)用“$(div).html();”獲取 div 元素的 HTML 內(nèi)容時(shí)，將得到圖 4-3 所示的內(nèi)容。圖 4-3 重新設(shè)置 HTML 內(nèi)容后獲取到的結(jié)果【例 4-2】 獲取和設(shè)置元素的文本內(nèi)容與 HTML 內(nèi)容（實(shí)例位置：源碼第 4 章 4

8、-2）。（1）創(chuàng)建一個(gè)名稱為 index.html 的文件，在該文件的標(biāo)記中應(yīng)用下面的語(yǔ)句引入 jQuery 庫(kù)。 （2）在頁(yè)面的標(biāo)記中添加兩個(gè)標(biāo)記，這兩個(gè)標(biāo)記除了 id 屬性不同外，其他均相同。關(guān)鍵代碼如下：應(yīng)用text()方法設(shè)置的內(nèi)容 當(dāng)前時(shí)間：2018-09-09 星期日 13:20:10 應(yīng)用html()方法設(shè)置的內(nèi)容 當(dāng)前時(shí)間：2018-09-09 星期日 13:20:10 （3）在引入 jQuery 庫(kù)的代碼下方編寫 jQuery 代碼，實(shí)現(xiàn)為標(biāo)記設(shè)置文本內(nèi)容和 HTML 內(nèi)容，并獲取設(shè)置后的文本內(nèi)容和 HTML 內(nèi)容。具體代碼如下： $(document).ready(func

9、tion() $(#div1).text(我是通過(guò)text()方法設(shè)置的HTML內(nèi)容); $(#div2).html(我是通過(guò)html()方法設(shè)置的HTML內(nèi)容); alert(通過(guò)text()方法獲取：rn+$(div).text()+rn通過(guò)html()方法獲?。簉n+$(div).html(); ); 運(yùn)行本實(shí)例，將顯示圖 4-4 所示的運(yùn)行結(jié)果。從該運(yùn)行結(jié)果可以看出，應(yīng)用 text()設(shè)置文本內(nèi)容時(shí)，即使內(nèi)容中包含 HTML 代碼，也將被認(rèn)為是普通文本，并不能作為 HTML 代碼被瀏覽器解析，而應(yīng)用 html()設(shè)置的 HTML 內(nèi)容中所包含的 HTML 代碼可以被瀏覽器解析。因此，文

10、本“我是通過(guò) html()方法設(shè)置的 HTML 內(nèi)容”是紅色的，而通過(guò) text()方法設(shè)置的 HTML 文本則是按照原樣顯示的。圖 4-4 獲取和設(shè)置元素的文本內(nèi)容與 HTML 內(nèi)容4.2.2 對(duì)元素值進(jìn)行操作 jQuery 提供了 3 種對(duì)元素值操作的方法，如表 4-1 所示。表 4-1 對(duì)元素值進(jìn)行操作的方法【例 4-3】 為多行列表框設(shè)置并獲取值（實(shí)例位置：源碼第 4 章4-3）。（1）創(chuàng)建一個(gè)名稱為 index.html 的文件，在該文件的標(biāo)記中應(yīng)用下面的語(yǔ)句引入 jQuery 庫(kù)。（2）在頁(yè)面的標(biāo)記中添加一個(gè)包含 3 個(gè)列表項(xiàng)的可多選的多行列表框，默認(rèn)為后兩項(xiàng)被選中。代碼如下： 列

11、表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)3 （3）在引入 jQuery 庫(kù)的代碼下方編寫 jQuery 代碼，應(yīng)用 val()方法獲取該多行列表框的值。具體代碼如下： $(document).ready(function() $(select).val(列表項(xiàng)1,列表項(xiàng)2); alert($(select).val(); ); 運(yùn)行后將顯示圖 4-5 所示的效果。圖 4-5 獲取到的多行列表框的值4.3 對(duì) DOM 文檔節(jié)點(diǎn)進(jìn)行操作4.3.1 創(chuàng)建節(jié)點(diǎn) 在 DOM 操作中，常常需要?jiǎng)討B(tài)創(chuàng)建 HTML 內(nèi)容，使文檔在瀏覽器中的樣式發(fā)生變化，從而達(dá)到各種交互目的。創(chuàng)建節(jié)點(diǎn)分為 3 種：創(chuàng)建元素節(jié)點(diǎn)、創(chuàng)建文本節(jié)點(diǎn)和

12、創(chuàng)建屬性節(jié)點(diǎn)。1創(chuàng)建元素節(jié)點(diǎn) 例如，要?jiǎng)?chuàng)建兩個(gè)元素節(jié)點(diǎn)，并且要把它們作為元素節(jié)點(diǎn)的子節(jié)點(diǎn)添加到 DOM 節(jié)點(diǎn)樹(shù)上，元素節(jié)點(diǎn)如下所示： 完成這個(gè)任務(wù)需要兩個(gè)步驟。（1）創(chuàng)建兩個(gè)新的元素。（2）將這兩個(gè)新元素插入到文檔中。創(chuàng)建文本節(jié)點(diǎn) 兩個(gè)元素節(jié)點(diǎn)已經(jīng)創(chuàng)建完畢并插入到文檔中了，此時(shí)需要為它們添加文本內(nèi)容。代碼結(jié)構(gòu)如下所示。 莫凡魔方科技 人郵圖書 具體的 jQuery 代碼如下：var $p_1 = $(莫凡魔方科技); / 創(chuàng)建第1個(gè)p元素，包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，文本節(jié)點(diǎn)為“明日科技” var $p_2 = $(莫凡圖書); / 創(chuàng)建第2個(gè)p元素，包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，文本節(jié)點(diǎn)為“明日?qǐng)D書”

13、$(div).append($p_1); / 將第1個(gè)p元素添加到div中，使它能在頁(yè)面中顯示 $(div).append($p_2); / 將第2個(gè)p元素添加到div中，使它能在頁(yè)面中顯示 創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫出來(lái)，然后使用 append()等方法將它們添加到文檔中。運(yùn)行代碼后，新創(chuàng)建的元素將被添加到頁(yè)面當(dāng)中，如圖 4-6 所示。圖 4-6 創(chuàng)建文本節(jié)點(diǎn)創(chuàng)建屬性節(jié)點(diǎn) 創(chuàng)建屬性節(jié)點(diǎn)與創(chuàng)建文本節(jié)點(diǎn)類似，也是直接在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)建。代碼結(jié)構(gòu)如下所示： 莫凡魔方科技 莫凡圖書 具體 jQuery 代碼如下：var $p_1 = $(莫凡魔方科技); / 創(chuàng)建第1個(gè)p

14、元素，包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)，其中“title=莫凡魔方科技”就是屬性節(jié)點(diǎn) var $p_2 = $(莫凡魔方科技); / 創(chuàng)建第2個(gè)p元素，包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)，其中“title=莫凡魔方科技就是屬性節(jié)點(diǎn) $(div).append($p_1); / 將第1個(gè)p元素添加到div中，使它能在頁(yè)面中顯示 $(div).append($p_2); / 將第2個(gè)p元素添加到div中，使它能在頁(yè)面中顯示 運(yùn)行以上代碼，將鼠標(biāo)指針移至文字“莫凡魔方科技”上，可以看到 title 信息，效果如圖 4-7 所示。圖 4-7 創(chuàng)建屬性節(jié)點(diǎn)4.3.2 查找節(jié)點(diǎn) 通過(guò) jQuery 提供的選

15、擇器可以輕松實(shí)現(xiàn)查找頁(yè)面中的任何節(jié)點(diǎn)。4.3.3 插入節(jié)點(diǎn) 在創(chuàng)建節(jié)點(diǎn)時(shí)，應(yīng)用了 append()方法將定義的節(jié)點(diǎn)內(nèi)容插入到指定的元素。實(shí)際上，該方法是用于插入節(jié)點(diǎn)的方法。除了append()方法外，jQuery 還提供了幾種插入節(jié)點(diǎn)的方法。這一節(jié)我們將詳細(xì)介紹。在jQuery中，插入節(jié)點(diǎn)可以分為在元素內(nèi)部插入和在元素外部插入兩種。1在元素內(nèi)部插入 在元素內(nèi)部插入就是向一個(gè)元素中添加子元素和內(nèi)容。jQuery 提供了表 4-2 所示的在元素內(nèi)部插入的方法。表 4-2 在元素內(nèi)部插入的方法續(xù)表【例 4-4】 向元素插入節(jié)點(diǎn)（實(shí)例位置：源碼第 4 章4-4）。（1）創(chuàng)建一個(gè)名稱為 index.ht

16、ml 的文件，在該文件的標(biāo)記中應(yīng)用下面的語(yǔ)句引入 jQuery 庫(kù)。（2）在頁(yè)面的標(biāo)記中添加一個(gè)空的元素，代碼如下：（3）在引入 jQuery 庫(kù)的代碼下方編寫 jQuery 代碼，創(chuàng)建兩個(gè)節(jié)點(diǎn)，分別使用 append()和 appendTo()方法將這兩個(gè)節(jié)點(diǎn)插入到元素中。具體代碼如下：$(document).ready(function()var $p_1 = $(莫凡圖書); / 創(chuàng)建第1個(gè)p元素 var $p_2 = $(jQuery基礎(chǔ)開(kāi)發(fā)教程); / 創(chuàng)建第2個(gè)p元素，文本為空$div = $(div); / 獲取div元素對(duì)象 $div.append($p_1); / 將第1個(gè)p

17、元素添加到div中 $p_2.appendTo($div); / 將第2個(gè)p元素添加到div中 ); 運(yùn)行后將顯示圖 4-8 所示的效果。圖 4-8 向元素內(nèi)插入節(jié)點(diǎn)2在元素外部插入 在元素外部插入就是將要添加的內(nèi)容添加到元素之前或元素之后。jQuery 提供了表 4-3 所示的在元素外部插入的方法。表 4-3 在元素外部插入的方法4.3.4 刪除、復(fù)制與替換節(jié)點(diǎn) 在頁(yè)面上只執(zhí)行插入和移動(dòng)元素的操作是遠(yuǎn)遠(yuǎn)不夠的，在實(shí)際開(kāi)發(fā)的過(guò)程中還經(jīng)常需要?jiǎng)h除、復(fù)制和替換相應(yīng)的元素。1刪除節(jié)點(diǎn) jQuery 提供了種刪除節(jié)點(diǎn)的方法，分別是 remove()、detach()和 empty()方法。remove

18、()方法 remove()方法用于從 DOM 中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來(lái)篩選元素。 當(dāng)使用 remove()方法刪除某個(gè)節(jié)點(diǎn)之后，該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除。remove()方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用，以后也可以繼續(xù)使用這些元素。detach()方法 detach()方法和 remove()方法一樣，也是刪除 DOM 中匹配的元素。需要注意的是，這個(gè)方法不會(huì)把匹配的元素從 jQuery 對(duì)象中刪除，因此，在將來(lái)仍然可以使用這些匹配元素。與 remove 不同的是，所有綁定的事件或附加的數(shù)據(jù)都會(huì)保留下來(lái)。empty()方法 嚴(yán)格地

19、說(shuō)，empty()方法并不是刪除元素節(jié)點(diǎn)，而是將節(jié)點(diǎn)清空，該方法可以清空元素中所有的后代節(jié)點(diǎn)。2復(fù)制節(jié)點(diǎn) jQuery 提供了 clone()方法用于復(fù)制節(jié)點(diǎn)，該方法有兩種形式，一種是不帶參數(shù)，用于克隆匹配的 DOM 元素并且選中這些克隆的副本；另一種是帶有一個(gè)布爾型的參數(shù)，當(dāng)參數(shù)為 true 時(shí)，表示克隆匹配的元素以及其所有的事件處理并且選中這些克隆的副本，當(dāng)參數(shù)為 false 時(shí)，表示不復(fù)制元素的事件處理。3替換節(jié)點(diǎn) jQuery 提供了兩個(gè)替換節(jié)點(diǎn)的方法，分別是 replaceAll(selector)和 replaceWith(content)。其中，replaceAll(select

20、or)方法用于使用匹配的元素替換掉所有 selector 匹配到的元素；replaceWith (content)方法用于將所有匹配的元素替換成指定的 HTML 或 DOM 元素。這兩種方法的功能相同，只是兩者的表現(xiàn)形式不同。4.3.5 包裹節(jié)點(diǎn) DOM 文檔為包裹節(jié)點(diǎn)提供了 4 個(gè)方法：wrap 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)、unwrap這個(gè)方法將移出元素的父元素、wrapAll 將所有匹配的元素用單個(gè)元素包裹起來(lái)、wrapInner 將每一個(gè)匹配的元素的子內(nèi)容（包括文本節(jié)點(diǎn)）用一個(gè) HTML 結(jié)構(gòu)包裹起來(lái)，如表 4-4 所示。表 4-4 包裹元素節(jié)點(diǎn)的方法4.3.6 遍歷

21、節(jié)點(diǎn) 在操作 DOM 元素時(shí)，有時(shí)需要對(duì)同一標(biāo)記的全部元素進(jìn)行統(tǒng)一的操作。在傳統(tǒng) JavaScript 中，是首先獲取元素的總長(zhǎng)度，之后通過(guò) for 循環(huán)語(yǔ)句來(lái)訪問(wèn)其中的某個(gè)元素，書寫的代碼較多，相對(duì)比較復(fù)雜。在jQuery中，可以直接使用 each()方法來(lái)遍歷元素，它的語(yǔ)法格式為：each(callback) callback 是一個(gè)函數(shù)，該函數(shù)可以接受一個(gè)形參 index，這個(gè)形參是遍歷元素的序號(hào)，序號(hào)從 0 開(kāi)始。如果要訪問(wèn)元素中的屬性，可以借助形參 index 配合 this 關(guān)鍵字來(lái)實(shí)現(xiàn)元素屬性的設(shè)置或獲取。4.4 對(duì)元素屬性進(jìn)行操作 jQuery 提供了表 4-5 所示的對(duì)元素屬

22、性進(jìn)行操作的方法。在表 4-5 中所列的這些方法中，key 和 name 都代表元素的屬性名稱，properties 代表一個(gè)集合。表 4-5 對(duì)元素屬性進(jìn)行操作的方法4.5 對(duì)元素的 CSS 樣式進(jìn)行操作 在 jQuery 中，對(duì)元素 CSS 樣式的操作可以通過(guò)修改 CSS 類或者 CSS 的屬性來(lái)實(shí)現(xiàn)。4.5.1 通過(guò)修改 CSS 類實(shí)現(xiàn) 在網(wǎng)頁(yè)中，如果想改變一個(gè)元素的整體效果，例如，在實(shí)現(xiàn)網(wǎng)站換膚時(shí)，就可以通過(guò)修改該元素所使用的CSS 類來(lái)實(shí)現(xiàn)。在 jQuery 中，提供了表 4-6 所示的幾種用于修改 CSS 類的方法。表 4-6 修改 CSS 類的方法4.5.2 通過(guò)修改 CSS 屬性實(shí)現(xiàn) 如果需要獲取或修改某個(gè)元素的具體樣式（即修改元素的 style 屬性），jQuery 也提供了相應(yīng)的方法，如表4-7 所示。表 4-7 獲取或修改 CSS 屬性的方法續(xù)表4.6 綜合實(shí)例：實(shí)現(xiàn)我的開(kāi)心小農(nóng)場(chǎng) 通過(guò)jQuery可以很方便地對(duì)DOM節(jié)點(diǎn)進(jìn)行