DOM(document object model)是一種與瀏覽器、平臺、語言無關的接口，使用該接口可以訪問頁面中的·所有組件。DOM的操作可以分為DOM Core、HTML-DOM和CSS-DOM。
可以直接使用選擇器進行查找。
1 var $li=$("ul li:eq(1)"); //獲取ul中的第二個li節點2 var li_text=$li.text(); //獲取第二個li元素節點的文本內容3 alert(li_text); //打印文本內容
2.查找屬性節點
找到元素節點后，使用attr()方法獲取設置元素的屬性。attr()方法傳入參數為一個時為獲取該屬性的值，傳入2個參數是為為該屬性設置值。
1 var $para=$("p"); //獲取p節點2 var //獲取p元素節點的class屬性值3 $para.attr("class","para"); //將p元素節點的class屬性值設為para
創建元素節點需要兩步：1）創建一個新的元素節點 2）將該節點插入文檔。$(html)方法可以根據傳入的HTML標記字符串，創建一個DOM對象，并將該DOM對象包裝成一個jQuery對象后返回。
PS：動態創建的新元素節點默認保存在內存中，不會被自動添加到文檔中，需要使用其他方法將其插入文檔。
1 var $li=$("<li>我是新加的li節點</li>"); //創建一個新的元素節點2 $("ul").append($li); //添加到ul使其在網頁中顯示
2.創建文本節點
創建文本節點也是使用$(html)方法，只需要將要添加的文本內容寫入html字符串中即可。（無論html代碼多復雜都可以使用$(html)方法）
3.創建屬性節點
創建屬性節點也是在創建元素節點時一起創建。
var $li=$("<li class='new_li'>我是新加的li節點</li>"); //創建一個新的li元素 包括元素節點、文本節點、屬性節點$("ul").append($li); //添加到ul使其在網頁中顯示
| 方法 | 描述 | 實例 |
| append() | 向元素內部追加內容 | HTML代碼： <p>我想說：</p> jQuery代碼： $("p").apppend("<b>你好</b>"); 結果： <p>我想說：<b>你好</b></p> |
| appendTo() | 將元素加到指定的元素內部，$(A).sppendTo(B)是將A追加到B中 | HTML代碼： <p>我想說：</p> jQuery代碼： $("<b>你好</b>").apppendTo("p"); 結果： <p>我想說：<b>你好</b></p> |
| prepend() | 向元素內部的前面加入內容 | HTML代碼： <p>我想說：</p> jQuery代碼： $("p").prepend("<b>你好</b>"); 結果： <p><b>你好</b>我想說：</p> |
| prependTo() | 將元素加到指定元素內部的前面，$(A).prependTo(B)是·將A插到B中的前面 | HTML代碼： <p>我想說：</p> jQuery代碼： $("<b>你好</b>").prependTo("p"); 結果： <p><b>你好</b>我想說：</p> |
| after() | 向元素后追加內容 | HTML代碼： <p>我想說：</p> jQuery代碼： $("p").after("<b>你好</b>"); 結果： <p>我想說：</p><b>你好</b> |
| insertAfter() | 將元素追加到指定元素后，$(A).insertAfter(B)是將A追加到B后面 | HTML代碼： <p>我想說：</p> jQuery代碼： $("<b>你好</b>").insertAfter("p"); 結果： <p>我想說：</p><b>你好</b> |
| before() | 向元素前追加內容 | HTML代碼： <p>我想說：</p> jQuery代碼： $("p").before("<b>你好</b>"); 結果： <b>你好</b><p>我想說：</p> |
| insertBefore() | 將元素加到指定元素內部的前面，$(A).insertBefore(B)是·將A插到B前 | HTML代碼： <p>我想說：</p> jQuery代碼： $("<b>你好</b>").insertBefore("p"); 結果： <b>你好</b><p>我想說：</p> |
從DOM中刪除所有匹配元素。使用remove()方法刪除后，該節點所包含的所有后代元素將同時被刪除。該方法返回值為一個指向已被刪除節點的引用，可以在以后使用這些元素。
1 var $li=$("ul li:eq(1)").remove(); //獲取第二個li節點后把它從網頁刪除2 $li.appendTo("ul"); //把刪除的元素重新加入ul
這段代碼其實等效于：
$("ul li:eq(1)").appendTo("ul"); //appendTo()方法也可以用來移動元素，移動元素時首先從文檔上刪除此元素，然后將該元素插入文檔的指定節點remove()方法也可以傳遞參數進行選擇刪除。eg: $("ul li").remove("li[title!=菠蘿]")
2.detach()方法
detach()與 remove()一樣，也是從DOM中刪除匹配的元素。但是這個方法不會把匹配的元素從jQuery對象中刪除，所有綁定的事件、附加的數據都會被保留。
1 $("ul li").click(function(){2 alert($(this).html());3 });4 var $li=$("ul li:eq( 1)").detach(); //刪除元素5 $li.appendTo("ul"); //重新追加此元素，發現之前綁定的事件還在，如果使用remove()刪除元素，之前綁定的事件將失效
3.empty()方法
嚴格來講，他并不是刪除節點的方法，而是清空節點，它能元素中的所有后代節點。
$("ul li:eq(1)").empty(); //獲取第二個li節點后，清空此元素里的內容$("ul li").click(function(){ $(this).clone().appendTo("ul"); //復制當前點擊的節點并追加到ul中});clone()方法復制節點后，也是被保存在內存中，需要追加到文檔。被復制的元素不具有任何行為，想要它也具有點擊事件，可以：
$(this).clone(true).appendTo("body"); //傳入參數true
在clone()方法中傳入參數true，可以復制元素的同時復制元素中的綁定事件。
將所有匹配的元素都替換成指定的html或者DOM元素。
$("p").replaceWith("<strong>你不喜歡的水果是？</strong>");2.replaceAll();
與replayWith()方法作用相同，只是操作顛倒。
$("<strong>你喜歡的水果是？</strong>").replayceAll("p");將某個節點用其它標記包裹，不會破壞原始文檔的語義，將所有的元素進行單獨的包裹。
$(“strong”).wrap("<b></b>"); //用b標簽把strong元素包裹得到的HTML結果：
<b><strong>你最喜歡的水貴是/</strong></b><b><strong>你最喜歡的水貴是/</strong></b><b><strong>你最喜歡的水貴是/</strong></b>
2. wrapAll()
將匹配的元素用一個元素包裹。
$("strong").wrapAll("<b></b>");得到的HTML結果：
<b> <strong>你最喜歡的水貴是/</strong> <strong>你最喜歡的水貴是/</strong> <strong>你最喜歡的水貴是/</strong></b>
3. wrapInner()
將每一個匹配的元素的子內容（包括文本節點）用其它結構化標記包裹起來。
$("strong").wrapInner("<b></b>");得到的HTML結果：
<strong><b>你最喜歡的水貴是?</b></strong>
獲取屬性只需要給attr()傳入一個參數，即屬性名稱。如果要設置屬性值傳入兩個參數即屬性名稱和對應值。
var p_txt=$("p").attr("class"); //獲取p的節點屬性class$("p").attr("class","para"); //設置p的節點屬性class為para$("p").attr({"class":"para","title":"test"}); //一次設置多個屬性
使用removeAttr()方法刪除。
可以使用attr()方法獲取和設置樣式。
使用addClass()方法追加樣式。如果一個元素被添加了多個class值，相當于合并樣式。如果有不同的class設定了同一樣式屬性，后者覆蓋前者。
使用removeClass()從匹配元素中刪除全部或指定class。可以以空格的方式刪除多個class名。removeClass()不帶參數時為刪除所有class。
使用toggle()方法實現類似元素如果是隱藏則顯示元素，如果元素是顯示則隱藏元素的重復切換。toggleClass()實現添加、刪除類名的重復切換。
hasClass()判斷是否含有某個class，如果有返回true，沒有返回false。
html() 讀取或設置某個元素的HTML內容。
也可以使用val()方法使select、checkbox、radio相應選項被選中。eg： $(":checkbox").val(["check2","check3"]);
| 方法 | 描述 | 示例 |
| parent() | 獲取每個匹配元素的父級元素 | $(".item-1").parent().css("color","red"); 從指定類型的直接父節點開始查找。返回一個元素節點。 |
| parents() | 獲取每個匹配元素的祖先元素 | $(".item-1").parents().css("color","red"); 從指定類型的直接父節點開始查找，找到第一個父節點繼續查找。返回一個多個父節點。 |
| closest() | 從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素 | $(".item-1").closest().css("color","red"); 從包含自身的節點開始查找。返回匹配的第一個元素節點。 |
CSSDOM操作就是讀取和設置style對象的各種屬性。可以通過css()方法獲取元素的樣式屬性，無論該屬性是外部css還是內聯css都可以獲取到。該方法中如果傳入的值是數字將會被自動轉化成像素值。
當你想獲取元素高度時可以使用$("p").css("height")獲取，同時jQuery也分裝了專門的方法來獲取元素的寬高。$("p").height()也可以去的元素的高度。
PS: css()獲取到的高度值與設置的值有關，可能會得到auto。而height()獲取的是元素的實際高度，而且不帶單位。
新聞熱點
疑難解答
