1.DOM操作的分類
DOM操作一般分為3個方面，即DOM Core、HTML-DOM和CSS-DOM。
2.查詢節點
2.1查詢元素節點
獲取元素節點並列印它的文字內容
var $li = $("ul li:eq(1)");
var li_next = $li.text();
alert(li_next);2.2查詢屬性節點
獲取屬性節點並列印它的文字內容
var li_next = $("p").attr("title");
alert(li_next);3. 建立節點
3.1 建立元素節點
jQuery的工廠函式$()
var $li_1 = $("<li></li>");
$("ul").append($li_1);3.2建立文字節點
var $li_1 = $("<li>香蕉</li>");
$("ul").append($li_1);3.3 建立屬性節點
var $li_1 = $("<li title = `banana`>香蕉</li>");
$("ul").append($li_1);4. 插入節點
| 方法 | 描述 |
|---|---|
| append() | 向每個匹配元素內部追加內容 |
| appendTo() | 將所有匹配元素追加到指定的元素中。$("A").appendTo(B)將追加到B中，與append()相反 |
| prepend() | 向每個匹配元素內部前置內容 |
| prependTo() | 將所有匹配元素前置匹配元素內部，與prependTo()相反 |
| after() | 在指定元素之後插入內容 |
| insertAfter() | 將所有匹配元素插入到指定元素後,與after()相反 |
| befor() | 在指定元素之前插入內容 |
| insertBefor() | 在所有匹配內容之前插入指定元素 |
5. 刪除節點
5.1 remove()
當某個節點用remove()刪除後，該節點的所有後代節點將同時刪除，返回值是一個指向被刪除的節點的引用，可以在以後再使用這些元素。
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()方法不是刪除節點，而是清空節點，清空元素中所有後代節點。
var $li = $("ul li:eq(1)").empty();//注意是元素裡6 複製節點
$(this).clone(true).appendTo(body);在clone()中傳遞引數true，表示複製元素的同事複製元素中所繫結的事件。
7 替換節點
replaceWith()將所有匹配元素都替換成指定的Html或DOM元素。
replaceALL()與replaceWith()作用相同，只是順序顛倒。
$("p").replaceWith("<strong>內容</strong>");
$("<strong>內容</strong>").replaceAll("p");//二者效果相同注意：如果在替換之前，已經為元素繫結事件，替換後原先繫結的事件將會與被替換元素一起消失。
8 包裹節點
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為St9.2 刪除屬性
$("strong").removeAttr("title");//刪除屬性title10 樣式操作
10.1 獲取樣式和設定樣式
$("p").attr("class");//獲取元素p的class
$("strong").removeAttr("title");//刪除屬性title10.2 追加樣式
$("strong").addClass("title");//刪除屬性title10.3移除樣式
$("p").removeClass(); //移除p中所有樣式
$("p").removeClass("high");//移除單個樣式
$("p").removeClass("high another");//移除多個樣式，中間用空格隔開10.4切換樣式
$("p").toggle(function(){
//顯示元素 程式碼 1
},function(){
//顯示元素 程式碼 2
}); toggle()方法是指交替執行程式碼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 遍歷節點
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");
})