1，查找節點：

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

2，創建和插入節點：

1 2 3 4 5 6 7 8 9 10

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

3，刪除節點：

1 2 3

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

4，復制元素：

1 2 3

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

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

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

6，包裹節點：

1 2 3

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

7，屬性操作：

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

8，樣式操作：

1 2 3 4 5

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

9，設置和獲取html，文本和值：

1 2 3

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

10，遍歷節點：

1 2 3 4 5 6 7 8

$ul.children();??//獲取ul的子元素，而非后代元素。 $ul.next();?//獲取緊鄰ul后的一個同輩元素。 $ul.prev(); $ul.siblings();??// 獲取ul的所有同輩元素。 $ul.parent();//返回父級元素，返回一個節點。 $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");?//設置ul的高度為10em $ul.height();?//獲取ul的高度，是元素在頁面中的實際高度，與樣式的設置無關，且不帶單位。 $ul.css("height");?//獲取ul的高度，與樣式的設置值有關，可能得到"auto" ，"10px" 之類的字符串。 $ul.width("10px"); var?offsetObj= $ul.offset();??var?vLeft= offsetObj.left;?var?vTop = offsetObj.top;??//獲取元素在當前視窗的相對偏移，返回的對象包含兩個屬性：top, left. var?posObj = $ul.position();??var?vLeft = posObj.left;?var?vTop = posObj.top;??//獲取元素相對于最近一個position樣式設置為relative或absolute的祖先節點的相對偏移。 $ul.scrollTop(300);?//ul的滾動條滾動到距頂端300的位置。 $ul.scrollLeft(300);?//ul的滾動條滾動到距左側300的位置。

轉載于:https://www.cnblogs.com/imap/p/3372693.html

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

總結

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

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