1.DOM操作的分類

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

2.查找節(jié)點

2.1查找元素節(jié)點

獲取元素節(jié)點并打印它的文本內容

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

2.2查找屬性節(jié)點

獲取屬性節(jié)點并打印它的文本內容

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

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

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

jQuery的工廠函數$()

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

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

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

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

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

4. 插入節(jié)點

方法描述

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

5. 刪除節(jié)點

5.1 remove()

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

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

5.2 detach()

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

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

5.3 empty()

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

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

6 復制節(jié)點

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

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

7 替換節(jié)點

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

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

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

8 包裹節(jié)點

wrap()將所有的元素進行單獨的包裹
wrapAll()將所有匹配的元素用一個元素包裹
wrapInner()將每一個匹配的元素的子內容用其他結構化的標記包裹起來。

$("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 獲取設置屬性

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

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

9.2 刪除屬性

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

10 樣式操作

10.1 獲取樣式和設置樣式

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

10.2 追加樣式

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

10.3移除樣式

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

10.4切換樣式

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

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

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

10.5判斷是否含有某個樣式

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

11.設置和獲取HTML、文本和值

11.1 html()方法

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

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

11.2 text()方法

類似于JavaScript中的innerText屬性，用了獲取或設置某個元素中的文本內容。

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

11.3 val()方法

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

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

12 遍歷節(jié)點

12.1 children()方法

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

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

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()方法

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

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

總結

以上是生活随笔為你收集整理的jQuery中DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。