- jQuery從入門到精通 （軟件開發(fā)視頻大講堂）
- 明日科技
- 4203字
- 2020-11-28 23:47:26
5.3 對DOM節(jié)點進行操作
了解JavaScript的讀者應(yīng)該知道，通過JavaScript可以實現(xiàn)對DOM節(jié)點的操作，例如查找節(jié)點、創(chuàng)建節(jié)點、插入節(jié)點、復(fù)制節(jié)點或是刪除節(jié)點，不過操作起來比較復(fù)雜。jQuery為了簡化開發(fā)人員的工作，也提供了對DOM節(jié)點進行操作的方法，下面進行詳細介紹。
5.3.1 創(chuàng)建節(jié)點
在DOM操作中，常常需要動態(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器中的樣式發(fā)生變化，從而達到各種交互目的。創(chuàng)建節(jié)點分為3種：創(chuàng)建元素節(jié)點、創(chuàng)建文本節(jié)點和創(chuàng)建屬性節(jié)點。
1．創(chuàng)建元素節(jié)點
例如要創(chuàng)建兩個<p>元素節(jié)點，并且要把它們作為<div>元素節(jié)點的子節(jié)點添加到DOM節(jié)點樹上，完成這個任務(wù)需要兩個步驟。
（1）創(chuàng)建兩個新的<p>元素。
（2）將這兩個新元素插入到文檔中。
第（1）步可以使用jQuery的工廠函數(shù)$()來完成，格式如下：
$(html)
$(html)方法可以根據(jù)傳入的HTML標記字符串，創(chuàng)建一個DOM對象，并且將這個DOM對象包裝成一個jQuery對象后返回。
首先，創(chuàng)建兩個<p>元素，jQuery代碼如下：
var$p_1=$("<p></p>"); //創(chuàng)建第1個p元素
var$p_2=$("<p></p>"); //創(chuàng)建第2個p元素，文本為空
然后將這兩個新的元素插入到文檔中，可以使用jQuery中的append()等方法（將在5.3.3節(jié)中介紹）
具體的jQuery代碼如下：
$("div").append($p_1); //將第1個p元素添加到div中，使它能在頁面中顯示
$("div").append($p_2); //也可以采用鏈式寫法：$("div").append($p_1).append($p_2);
運行代碼后，新創(chuàng)建的<p>元素將被添加到頁面當中。
2．創(chuàng)建文本節(jié)點
兩個<p>元素節(jié)點已經(jīng)創(chuàng)建完畢并插入到文檔中了，此時需要為它們添加文本內(nèi)容。具體的jQuery代碼如下：
var$p_1=$("<p>明日科技</p>"); //創(chuàng)建第1個p元素，包含元素節(jié)點和文本節(jié)點，文本節(jié)點為“明日科技”
var$p_2=$("<p>明日圖書</p>"); //創(chuàng)建第2個p元素，包含元素節(jié)點和文本節(jié)點，文本節(jié)點為“明日圖書”
$("div").append($p_1); //將第1個p元素添加到div中，使它能在頁面中顯示
$("div").append($p_2); //將第2個p元素添加到div中，使它能在頁面中顯示
創(chuàng)建文本節(jié)點就是在創(chuàng)建元素節(jié)點時直接把文本內(nèi)容寫出來，然后使用append()等方法將它們添加到文檔中。運行代碼后，新創(chuàng)建的<p>元素將被添加到頁面當中，如圖5.6所示。
圖5.6 創(chuàng)建文本節(jié)點
3．創(chuàng)建屬性節(jié)點
創(chuàng)建屬性節(jié)點與創(chuàng)建文本節(jié)點類似，也是直接在創(chuàng)建元素節(jié)點時一起創(chuàng)建。具體jQuery代碼如下：
var$p_1=$("<p title=’明日科技’>明日科技</p>"); //創(chuàng)建第1個p元素，包含元素節(jié)點和文本節(jié)點和屬性
節(jié)點，其中“title=’明日科技’”就是屬性節(jié)點
var$p_2=$("<p title=’明日圖書’>明日圖書</p>"); //創(chuàng)建第2個p元素，包含元素節(jié)點和文本節(jié)點和屬性
節(jié)點，其中“title=’明日圖書’就是屬性節(jié)點
$("div").append($p_1); //將第1個p元素添加到div中，使它能在頁面中顯示
$("div").append($p_2); //將第2個p元素添加到div中，使它能在頁面中顯示
運行以上代碼，將鼠標移至文字“明日科技”上，可以看到title信息，效果如圖5.7所示。
圖5.7 創(chuàng)建屬性節(jié)點
5.3.2 查找節(jié)點
通過jQuery提供的選擇器可以輕松實現(xiàn)查找頁面中的任何節(jié)點。關(guān)于jQuery的選擇器我們已經(jīng)在第4章中進行了詳細介紹，讀者可以參考第4章“使用jQuery選擇器”了解如何查找節(jié)點。
5.3.3 插入節(jié)點
在創(chuàng)建節(jié)點時，我們應(yīng)用了append()方法將定義的節(jié)點內(nèi)容插入到指定的元素。實際上，該方法是用于插入節(jié)點的方法。除了append()方法外，jQuery還提供了幾種插入節(jié)點的方法。這一節(jié)我們將詳細介紹。在jQuery中，插入節(jié)點可以分為在元素內(nèi)部插入和在元素外部插入兩種，下面分別進行介紹。
1．在元素內(nèi)部插入
在元素內(nèi)部插入就是向一個元素中添加子元素和內(nèi)容。jQuery提供了如表5.2所示的在元素內(nèi)部插入的方法。
表5.2 在元素內(nèi)部插入的方法
從表中可以看出append()方法與prepend()方法類似，所不同的是prepend()方法將添加的內(nèi)容插入到原有內(nèi)容的前面。
appendTo()實際上是顛倒了append()方法，例如下面這句代碼：
$("<p>A</p>").appendTo("#B"); //將指定內(nèi)容添加到id為B的元素中
等同于：
$("#B").append("<p>A</p>"); //將指定內(nèi)容添加到id為B的元素中
不過，append()方法并不能移動頁面上的元素，而appendTo()方法是可以的，例如下面的代碼：
$("#B").appendTo("#A"); //移動B元素到A元素的后面
append()方法是無法實現(xiàn)該功能的，注意兩者的區(qū)別。
說明
prepend()方法是向所有匹配元素內(nèi)部的開始處插入內(nèi)容的最佳方法。prepend()方法與prependTo()的區(qū)別同append()方法與appendTo()方法的區(qū)別。
【例5.4】向<div>元素插入節(jié)點。（實例位置：光盤\TM\sl\5\4）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，添加一個空的<div>元素，代碼如下：
<div></div>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，創(chuàng)建兩個<p>節(jié)點，分別使用append()和appendTo()方法將這兩個<p>節(jié)點插入到<div>元素中，具體代碼如下：
$(document).ready(function(){
var$p_1=$("<p>明日圖書</p>"); //創(chuàng)建第1個p元素
var$p_2=$("<p>編程詞典</p>"); //創(chuàng)建第2個p元素
$div=$("div"); //獲取div元素對象
$div.append($p_1); //將第1個p元素添加到div中
$p_2.appendTo($div); //將第2個p元素添加到div中
});
運行后將顯示如圖5.8所示的效果。
圖5.8 向元素內(nèi)插入節(jié)點
2．在元素外部插入
在元素外部插入就是將要添加的內(nèi)容添加到元素之前或元素之后。jQuery提供了如表5.3所示的在元素外部插入的方法。
表5.3 在元素外部插入的方法
5.3.4 刪除、復(fù)制與替換節(jié)點
在頁面上只執(zhí)行插入和移動元素的操作是遠遠不夠的，在實際開發(fā)的過程中還經(jīng)常需要刪除、復(fù)制和替換相應(yīng)的元素。下面將介紹如何應(yīng)用jQuery實現(xiàn)刪除、復(fù)制和替換節(jié)點。
1．刪除節(jié)點
jQuery提供了3種刪除節(jié)點的方法，分別是remove()、detach()和empty()方法。
1）remove()方法
remove()方法用于從DOM中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù)jQuery表達式來篩選元素。
當使用remove()方法刪除某個節(jié)點之后，該節(jié)點所包含的所有后代節(jié)點將同時被刪除。remove()方法的返回值是一個指向已被刪除的節(jié)點的引用，以后也可以繼續(xù)使用這些元素。例如以下代碼：
var$p_2=$("div p:eq(1)").remove(); //獲取第2個<p>節(jié)點后，將它從頁面中刪除
$("div").append($p_2); //把刪除的節(jié)點重新添加到div中
【例5.5】使用remove()方法刪除節(jié)點。（實例位置：光盤\TM\sl\5\5）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，添加一個<div>元素，在<div>元素下創(chuàng)建2個<p>節(jié)點，并且為<p>節(jié)點賦予屬性title，具體代碼如下：
<div>
<p title="明日科技">明日科技</p>
<p title="明日圖書">明日圖書</p>
</div>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，刪除<div>元素下的第2個<p>節(jié)點，具體代碼如下：
$(document).ready(function(){
$("div p").remove("p[title!=明日科技]"); //刪除<p>元素中屬性不等于“明日科技”的元素
});
運行后將顯示如圖5.9所示的效果。
圖5.9 刪除節(jié)點
2）detach()方法
detach ()方法和remove()方法一樣，也是刪除DOM中匹配的元素。需要注意的是，這個方法不會把匹配的元素從jQuery對象中刪除，因此，在將來仍然可以使用這些匹配元素。與remove不同的是，所有綁定的事件或附加的數(shù)據(jù)都會保留下來。
請看如下實例：
$("div p").click(function(){
alert($(this).text());
});
var$p_2=$("div p:eq(1)").detach(); //刪除元素
$p_2.appendTo("div");
由此可以看出，使用detach()方法刪除元素之后，再執(zhí)行“$p_2.appendTo("div"); ”重新追加此元素，之前綁定的事件還在，而如果是使用remove()方法刪除元素，再重新追加元素，之前綁定的事件將失效。
【例5.6】使用detach()方法刪除節(jié)點。（實例位置：光盤\TM\sl\5\6）
使用detach()方法將例5.5中頁面<div>元素的第2個<p>元素刪除，具體代碼如下：
var$p_2=$("div p:eq(1)").detach(); //刪除元素
之后再使用appendTo()方法將已刪除的<p>節(jié)點添加到<div>元素中，具體代碼如下：
$p_2.appendTo("div");
可以看到，該元素又顯示在頁面中，頁面運行效果如圖5.10所示。
圖5.10 使用detach()方法刪除節(jié)點
3）empty()方法
嚴格地說，empty()方法并不是刪除元素節(jié)點，而是將節(jié)點清空，該方法可以清空元素中所有的后代節(jié)點。具體jQuery代碼如下：
$("div p:eq(1)").empty(); //獲取第2個p元素后，清空該元素中的內(nèi)容
運行此段代碼后，第2個<p>元素的內(nèi)容被清空了，但第2個<p>元素還在，即<p title="明日圖書"></p>。
2．復(fù)制節(jié)點
jQuery提供了clone()方法用于復(fù)制節(jié)點，該方法有兩種形式，一種是不帶參數(shù)，用于復(fù)制匹配的DOM元素并且選中這些復(fù)制的副本；另一種是帶有一個布爾型的參數(shù)，當參數(shù)為true時，表示復(fù)制匹配的元素以及其所有的事件處理并且選中這些復(fù)制的副本，當參數(shù)為false時，表示不復(fù)制元素的事件處理。
【例5.7】復(fù)制節(jié)點。（實例位置：光盤\TM\sl\5\7）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，添加一個<div>元素，在<div>元素下創(chuàng)建兩個<p>節(jié)點，并且為<p>節(jié)點賦予屬性title，具體代碼如下：
<div>
<p title="明日科技">明日科技</p>
<p title="明日圖書">明日圖書</p>
</div>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，刪除<div>元素下的第2個<p>節(jié)點，具體代碼如下：
<script type="text/javascript">
$(function() {
$("div p:eq(1)").bind("click", function(){ //為按鈕綁定單擊事件
$(this).clone().insertAfter(this); //復(fù)制自己但不復(fù)制事件處理
});
});
</script>
運行本實例，多次單擊“明日圖書”可以顯示如圖5.11所示的效果。
圖5.11 復(fù)制節(jié)點
上面的效果，是一直單擊第一個“明日圖書”產(chǎn)生的，如果單擊其他的“明日圖書”所在的<p>元素，是不能繼續(xù)復(fù)制節(jié)點的，因為沒有復(fù)制元素的事件。如果需要同時復(fù)制元素的事件處理，可以給clone()方法傳遞true參數(shù)，即clone(true)。
3．替換節(jié)點
jQuery提供了兩個替換節(jié)點的方法，分別是replaceAll(selector)和replaceWith(content)。其中，replaceAll(selector)方法用于使用匹配的元素替換掉所有selector匹配到的元素；replaceWith(content)方法用于將所有匹配的元素替換成指定的HTML或DOM元素。這兩種方法的功能相同，只是兩者的表現(xiàn)形式不同。
【例5.8】替換節(jié)點。（實例位置：光盤\TM\sl\5\8）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，添加兩個指定id的<div>元素，具體代碼如下：
div1:
<div id="div1"></div>
div2:
<div id="div2"></div>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，分別使用replaceWith()方法和replaceAll()方法替換指定<div>元素的內(nèi)容，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
//替換id為div1的<div>元素
$("#div1").replaceWith("<div>replaceWith()方法的替換結(jié)果</div>");
//替換id為div2的<div>元素
$("<div>replaceAll()方法的替換結(jié)果</div>").replaceAll("#div2");
});
</script>
運行本實例，可以看到如圖5.12所示的效果。
圖5.12 替換節(jié)點
5.3.5 遍歷節(jié)點
在操作DOM元素時，有時需要對同一標記的全部元素進行統(tǒng)一的操作。傳統(tǒng)JavaScript中，是首先獲取元素的總長度，之后通過for循環(huán)語句來訪問其中的某個元素，書寫的代碼較多，相對比較復(fù)雜。在jQuery中，可以直接使用each()方法來遍歷元素，它的語法格式為：
each(callback)
callback是一個函數(shù)，該函數(shù)可以接受一個形參index，這個形參是遍歷元素的序號，序號為從0開始。如果要訪問元素中的屬性，可以借助形參index配合this關(guān)鍵字來實現(xiàn)元素屬性的設(shè)置或獲取。
【例5.9】使用each()方法img遍歷元素。（實例位置：光盤\TM\sl\5\9）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，使用<img>標簽添加5張圖片，代碼如下：
<img height=60 src="images/01.jpg" width=80 />
<img height=60 src="images/02.jpg" width=80 />
<img height=60 src="images/03.jpg" width=80 />
<img height=60 src="images/04.jpg" width=80 />
<img height=60 src="images/05.jpg" width=80 />
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，使用each()方法遍歷img全部圖片，給每一張圖片添加一個title屬性，即鼠標文字移動到圖片上面時的提示信息，具體代碼如下：
$("img").each(function(index){
$(this).attr("title", "第"+(index+1)+"張圖片");
})
運行后將顯示如圖5.13所示的效果。
圖5.13 獲取到的多行列表框的值
5.3.6 包裹節(jié)點
在jQuery中不僅替換元素節(jié)點，還可以使用wrap()方法根據(jù)需求將某個節(jié)點用其他標記包裹起來。對節(jié)點的包裹也是DOM操作中很重要的一項，wrap()方法的語法格式為：
$("p").wrap("<b></b>"); //用<b>標簽把<p>元素包裹起來
得到如下結(jié)果：
<b><p>明日科技</p></b>
包裹節(jié)點也可以使用wrapAll()方法和wrapInner()方法。
1. wrapAll()方法
wrapAll()方法會將所有匹配元素用一個元素來包裹。它與wrap()方法不同，wrap()方法是將所有元素進行單獨的包裹。
【例5.10】使用wrapAll()方法包裹所有p元素。（實例位置：光盤\TM\sl\5\10）
（1）創(chuàng)建一個名稱為index.html的文件，在該文件的<head>標記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標記中，創(chuàng)建兩個<p>元素以及一個<ul>元素，令<ul>元素下包含3個<li>元素，代碼如下：
<p>明日圖書</p>
<p>明日編程詞典</p>
<ul>
<li title="Java Web編程詞典">Java Web編程詞典</li>
<li title="PHP編程詞典">PHP編程詞典</li>
<li title="VC編程詞典">VC編程詞典</li>
</ul>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，使用wrapAll()方法包裹全部<p>元素，具體代碼如下：
$(document).ready(function(){
$("p").wrapAll("<b></b>");
});
運行后可以看到，全部<p>元素都被<b></b>包裹，運行結(jié)果如圖5.14所示。
圖5.14 包裹元素節(jié)點
- FreeSWITCH 1.8
- Visual Basic程序開發(fā)（學習筆記）
- Maven Build Customization
- 軟件架構(gòu)設(shè)計：大型網(wǎng)站技術(shù)架構(gòu)與業(yè)務(wù)架構(gòu)融合之道
- Learning ArcGIS Pro 2
- PyTorch Artificial Intelligence Fundamentals
- The DevOps 2.4 Toolkit
- 名師講壇：Java微服務(wù)架構(gòu)實戰(zhàn)（SpringBoot+SpringCloud+Docker+RabbitMQ）
- JavaCAPS基礎(chǔ)、應(yīng)用與案例
- Mudbox 2013 Cookbook
- Clojure Polymorphism
- JavaScript Concurrency
- Offer來了：Java面試核心知識點精講（框架篇）
- React Native -Building Mobile Apps with JavaScript
- IBM Cognos 10 Report Studio Cookbook（Second Edition）