1.DOM操作的分類

DOM操作一般分為3個(gè)方面，即DOM Core、HTML-DOM和CSS-DOM。

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

2.1查找元素節(jié)點(diǎn)

獲取元素節(jié)點(diǎn)并打印它的文本內(nèi)容

var $li = $("ul li:eq(1)");var li_next = $li.text();alert(li_next);

2.2查找屬性節(jié)點(diǎn)

獲取屬性節(jié)點(diǎn)并打印它的文本內(nèi)容

var li_next = $("p").attr("title");alert(li_next);

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

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

jQuery的工廠函數(shù)$()

var $li_1 = $("<li></li>");$("ul").append($li_1);

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

var $li_1 = $("<li>香蕉</li>");$("ul").append($li_1);

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

var $li_1 = $("<li title = 'banana'>香蕉</li>");$("ul").append($li_1);

4. 插入節(jié)點(diǎn)

方法描述

append()	向每個(gè)匹配元素內(nèi)部追加內(nèi)容
appendTo()	將所有匹配元素追加到指定的元素中。$("A").appendTo(B)將追加到B中，與append()相反
prepend()	向每個(gè)匹配元素內(nèi)部前置內(nèi)容
prependTo()	將所有匹配元素前置匹配元素內(nèi)部，與prependTo()相反
after()	在指定元素之后插入內(nèi)容
insertAfter()	將所有匹配元素插入到指定元素后,與after()相反
befor()	在指定元素之前插入內(nèi)容
insertBefor()	在所有匹配內(nèi)容之前插入指定元素

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

5.1 remove()

當(dāng)某個(gè)節(jié)點(diǎn)用remove()刪除后，該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)將同時(shí)刪除，返回值是一個(gè)指向被刪除的節(jié)點(diǎn)的引用，可以在以后再使用這些元素。

var $li = $("ul li:eq(1)").remove();$("ul").append($li);

5.2 detach()

從DOM中刪除所有匹配的元素，但是不會(huì)把匹配元素從jQuery對(duì)象中刪除，可以在將來(lái)使用，但是與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)。

$("ul li").click(function(){alert($(this).html());})var $li = $("ul li:eq(1)").remove();//刪除元素$("ul").append($li); //重新追加此元素，它之前綁定的事件還在，若使用remove()，它之前綁定的事件將會(huì)失效

5.3 empty()

empty()方法不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)，清空元素中所有后代節(jié)點(diǎn)。

var $li = $("ul li:eq(1)").empty();//注意是元素里

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

$(this).clone(true).appendTo(body);

在clone()中傳遞參數(shù)true，表示復(fù)制元素的同事復(fù)制元素中所綁定的事件。

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

replaceWith()將所有匹配元素都替換成指定的Html或DOM元素。
replaceALL()與replaceWith()作用相同，只是順序顛倒。

$("p").replaceWith("<strong>內(nèi)容</strong>");$("<strong>內(nèi)容</strong>").replaceAll("p");//二者效果相同

注意：如果在替換之前，已經(jīng)為元素綁定事件，替換后原先綁定的事件將會(huì)與被替換元素一起消失。

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

wrap()將所有的元素進(jìn)行單獨(dú)的包裹
wrapAll()將所有匹配的元素用一個(gè)元素包裹
wrapInner()將每一個(gè)匹配的元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來(lái)。

$("strong").wrap("b");$("strong").wrapAll("b");$("strong").wrapInner("b");

效果如下：

<!--wrap()--><b><strong>水果</strong></b> <b><strong>香蕉</strong></b> <!--wrapAll()--><b><strong>水果</strong> <strong>香蕉</strong></b> <!--wrapInner()--><strong><b>水果</b></strong>

9 屬性操作

9.1 獲取設(shè)置屬性

獲取屬性和設(shè)置屬性都是用的同一函數(shù)，類似于getter和setter,包括html()、text()、val()、css()、height()等。

$("strong").attr("title");//獲取屬性title$("strong").attr("title","St");//設(shè)置屬性title為St

9.2 刪除屬性

$("strong").removeAttr("title");//刪除屬性title

10 樣式操作

10.1 獲取樣式和設(shè)置樣式

$("p").attr("class");//獲取元素p的class$("strong").removeAttr("title");//刪除屬性title

10.2 追加樣式

$("strong").addClass("title");//刪除屬性title

10.3移除樣式

$("p").removeClass(); //移除p中所有樣式$("p").removeClass("high");//移除單個(gè)樣式$("p").removeClass("high another");//移除多個(gè)樣式，中間用空格隔開(kāi)

10.4切換樣式

$("p").toggle(function(){//顯示元素 代碼 1},function(){//顯示元素 代碼 2});

toggle()方法是指交替執(zhí)行代碼1和代碼2，另外jQuery還提供了一個(gè)toggleClass()方法控制樣式上的重復(fù)切換，如果類名存在則刪除，類名不存在則添加。

$("p").toggleClass("another"); // 重復(fù)切換類名 "another"

10.5判斷是否含有某個(gè)樣式

$("p").hasClass("another"); // 若含有類another則返回true，否則返回false$("p").is("another"); // 在jQuery內(nèi)部實(shí)際調(diào)用的是，is()方法

11.設(shè)置和獲取HTML、文本和值

11.1 html()方法

類似于JavaScript中的innerHTML屬性，用了獲取或設(shè)置某個(gè)元素的HTML內(nèi)容。可以用于xhtml文檔，但是不能用于xml文檔。

$("p").html(); //獲取p中的html代碼$("p").html("<strong>水果</strong>"); //設(shè)置p中的html代碼

11.2 text()方法

類似于JavaScript中的innerText屬性，用了獲取或設(shè)置某個(gè)元素中的文本內(nèi)容。

$("p").text(); //獲取p中的文本元素$("p").text("水果"); //設(shè)置p中的文本元素

11.3 val()方法

類似于JavaScript中的value屬性，用了獲取或設(shè)置某個(gè)元素的值。如果元素為多選，則返回一個(gè)包含所有選擇的值的數(shù)組。

$("#login").val(); //獲取p中的文本元素$("#login").val("admin"); //設(shè)置p中的文本元素

12 遍歷節(jié)點(diǎn)

12.1 children()方法

該方法用于取得匹配元素的子元素集合。

var $body = $("body").children();alert($body.length); //輸出body元素下的元素個(gè)數(shù)

children()方法只考慮子元素而不考慮其他后代元素。

12.2 next()方法

用于取得匹配元素后面緊鄰的同輩元素

var $body = $("p").next(); //取得緊鄰p后的同輩元素

12.3 prev()方法

用于取得匹配元素前面緊鄰的同輩元素

var $body = $("p").prev();

12.4 siblings()方法

用于取得匹配元素前后所有同輩元素

var $body = $("p").siblings();

12.5 closest()方法

用于取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配，如果匹配直接返回元素本身，若不匹配則向上查找父元素，逐級(jí)向上知道找到匹配選擇器的元素，如果什么都沒(méi)找到，則返回空的jQuery對(duì)象。

$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})

總結(jié)

以上是生活随笔為你收集整理的jQuery中DOM操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。