1，查找節(jié)點(diǎn)：

1 2	var?$li = $("ul li:eq(1)");//查找元素 $li.attr("title");?//查找元素的屬性值

2，創(chuàng)建和插入節(jié)點(diǎn)：

1 2 3 4 5 6 7 8 9 10

var?$ul = $("#ulMain"); var?$li_1 = $("<li id='liApple'>蘋果</li>");?//創(chuàng)建一個(gè)li元素。 $ul.append($li_1);??//在ulMain內(nèi)部末尾插入元素 $li_1.appendTo($ul);?//將li追加到ul內(nèi)部的末尾。 $ul.prepend($li_1);?//在ul內(nèi)部將li插入到最前面。 $li_1.prependTo($ul);??//將li插入到ul內(nèi)部的最前面。 $ul.after("<span>hello,span</span>");?// 在ul后面插入一個(gè)span元素 $("<b>重點(diǎn)</b>").insertAfter($ul);?//將b插入到ul后面 $ul.before("<b>重點(diǎn)</b>");?//在ul前面插入b $("<b>重點(diǎn)</b>").insertBefore($ul);

3，刪除節(jié)點(diǎn)：

1 2 3

var?$li = $("ul li").remove("li[title=hello]");?//移除ul內(nèi)title值為hello的li并返回。 var?$li = $("ul li").detach("li[title=hello]");?//和remove相同，不同之處：所有綁定的事件，附加的數(shù)據(jù)都會保留下來，將來可以再使用這些元素。 $li.empty();?//清空元素里的所有內(nèi)容。

4，復(fù)制元素：

1 2 3

$("ul li").click(function(){ ????$(this).clone(true).appendTo("ul");?//點(diǎn)擊li時(shí)將li復(fù)制后追加到ul中，同時(shí)復(fù)制li所綁定的事件。 });

5，替換元素，替換后元素綁定的事件會消失，需要重新綁定。

1 2	$("p").replaceWith("<strong> 你最不喜歡的水果是？</strong>");?//用strong替換p $("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");?// 用strong替換掉p

6，包裹節(jié)點(diǎn)：

1 2 3

$("<strong>").wrap("<b></b>");??//用b標(biāo)簽把strong元素包裹起來。 $("<strong>").wrapAll("<b></b>");??//用b標(biāo)簽把所有匹配的strong元素包裹起來。 $("<strong>").wrapInner("<b></b>");??// 將每一個(gè)匹配的strong內(nèi)的子內(nèi)容用<b>包裹起來。

7，屬性操作：

1 2	$ul.attr({"title":"yourTitle",?"name":"theName"});??//同時(shí)為兩個(gè)屬性賦值。 $ul.removeAttr("title");??//刪除title屬性。

8，樣式操作：

1 2 3 4 5

$ul.addClass("className");?//添加class $ul.removeClass("className className2");?//同時(shí)移除兩個(gè)class。 $ul.removeClass();?//移除所有class $ul.toogleClass("another");??//在ul上切換another這個(gè)class，ul原有的class不受影響。 $ul.hasClass("another");?// ul是否包含another這個(gè)class

9，設(shè)置和獲取html，文本和值：

1 2 3

$("div").html("<b>hello</b>");??//設(shè)置div的html代碼，html()不能作用于xml文檔。 $("div").text("the plain text");?//設(shè)置div的文本內(nèi)容，同時(shí)支持xml文檔。 $("select01").val(["text1",?"text2"]);?//使下拉框的第二項(xiàng)，第三項(xiàng)被選中。

10，遍歷節(jié)點(diǎn)：

1 2 3 4 5 6 7 8

$ul.children();??//獲取ul的子元素，而非后代元素。 $ul.next();?//獲取緊鄰ul后的一個(gè)同輩元素。 $ul.prev(); $ul.siblings();??// 獲取ul的所有同輩元素。 $ul.parent();//返回父級元素，返回一個(gè)節(jié)點(diǎn)。 $ul.parents();??//返回所有祖先元素 $ul.closest();??//如果本身匹配就返回本身，否則返回最先匹配的祖先元素。 其它方法：find(), filter(),? nextAll(), prevAll()。

11，CSS-DOM操作：

1 2 3 4 5 6 7 8 9

$ul.css({fontSize:"30px", backgroundColor:"#aaafff"});? 或? $ul.css({"font-size":"30px",?"background-color":"#aaafff"}); $ul.height("10em");?//設(shè)置ul的高度為10em $ul.height();?//獲取ul的高度，是元素在頁面中的實(shí)際高度，與樣式的設(shè)置無關(guān)，且不帶單位。 $ul.css("height");?//獲取ul的高度，與樣式的設(shè)置值有關(guān)，可能得到"auto" ，"10px" 之類的字符串。 $ul.width("10px"); var?offsetObj= $ul.offset();??var?vLeft= offsetObj.left;?var?vTop = offsetObj.top;??//獲取元素在當(dāng)前視窗的相對偏移，返回的對象包含兩個(gè)屬性：top, left. var?posObj = $ul.position();??var?vLeft = posObj.left;?var?vTop = posObj.top;??//獲取元素相對于最近一個(gè)position樣式設(shè)置為relative或absolute的祖先節(jié)點(diǎn)的相對偏移。 $ul.scrollTop(300);?//ul的滾動條滾動到距頂端300的位置。 $ul.scrollLeft(300);?//ul的滾動條滾動到距左側(cè)300的位置。

轉(zhuǎn)載于:https://www.cnblogs.com/imap/p/3372693.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

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

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