原文連結:http://www.cnblogs.com/ILYljhl/archive/2013/07/10/3182414.html

jQuery封裝了大量DOM操作的API，極大提高了操作DOM節點的效率。

 

1、查詢節點

　　通過我們上一節介紹了JQuery選擇器，可以非常輕鬆地查詢節點元素。不過，這時得到的是jQuery物件，只能使用jQuery的API。

　　1.1  查詢屬性節點：attr()方法，可以接受一個引數，也可以接受兩個。當引數是一個時，則是要查詢的屬性的名字，這裡接受的是標籤固有屬性，非樣式屬性！

 

2、建立節點

　　利用jQuery的 工廠函式$()，我們可以隨意建立任何元素節點、文字節點、屬性節點，然後賦值給一個（以$開頭的）變數，最後通過jQuery元素節點的append()方法插入到文件中。例如：

var $li = $("<li title='香蕉'>香蕉</li>");   //建立一個<li>元素
$("ul").append($li);   //插入到文件中

　　

 

3、插入節點

　　前面使用了一個插入節點的方法append()，它會在元素內部追加新建立的內容。其實，插入節點的方法還有很多：

方法	描述	示例
append	向每個匹配的元素內部追加內容	HTML程式碼：<p>我想說：</p> jQuery程式碼：$("p").append("<b>你好</b>"); 結果：<p>我想說：<b>你好</b></p>
appendTo	將所有匹配的元素追加到指定的元素中。實際上，使用該方法顛倒了常規的$(A).append(B)。	參考上面的，結果相同，用法：$("<b>你好</b>").appendTo("p");
prepend	向每個匹配的元素內部前置內容	HTML程式碼：<p>我想說：</p> jQuery程式碼：$("p").prepend("<b>你好</b>"); 結果：<p><b>你好</b>我想說：<p>
prependTo	將所有匹配的元素前置到指定的元素中。實際上，使用該方法顛倒了常規的$(A).prepend(B)。	參考上面的，結果相同，用法：$("<b>你好</b>").prependTo("p");
after	在每個匹配的元素之後插入內容	HTML程式碼：<p>我想說：</p> jQuery程式碼：$("p").after("<b>你好</b>"); 結果：<p>我想說：<p><b>你好</b>
insertAfter	將所有匹配的元素插入到指定的元素後面。實際上，使用該方法顛倒了常規的$(A).after(B)。	參考上面的，結果相同，用法：$("<b>你好</b>").insertAfter("p");
before	在每個匹配的元素之前插入內容	HTML程式碼：<p>我想說：</p> jQuery程式碼：$("p").before("<b>你好</b>"); 結果：<b>你好</b><p>我想說：</p>
insertBefore	將所有匹配的元素插入到指定的元素前面。實際上，使用該方法顛倒了常規的$(A).before(B)。	參考上面的，結果相同，用法：$("<b>你好</b>").insertBefore("p");

 

 

 

 

 

 

 

 

 

 

 

4、刪除元素

　　如果文件中某一個元素多餘，那麼應該將其刪除。jQuery提供了三種刪除節點的方法，即remove()、detach()和empty()。

 

　　4.1  remove()方法

　　作用是從DOM中刪除所有匹配的元素，傳入的引數用於根據jQuery表示式篩選元素。例如：

var $li = $("ul li:eq(1)").remove();  //獲取第2個<li>元素節點後，將其移除
$li.appendTo("ul");    //把剛才刪除的節點又重新新增到<ul>元素中
/*相當於下面的*/
$("ul li:eq(1)").appendTo("ul");   //appendTo()也可以用來移動元素

/*帶引數的移除*/
$("ul li").remove("li[title != '菠蘿']");  //將<li>中屬性title不等於“菠蘿”的移除

　　

　　

　　4.2  detach()方法

　　detach()和remove()一樣，也是從DOM中去掉所有匹配的元素。但需要注意的是，這個方法不會匹配的元素從jQuery物件中刪除，因而可以在將來使用這些匹配的元素。與remove()不同的是，所有繫結的事件、附加的資料都會保留下來。

 

　　4.3  empty()方法

嚴格來講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有後代節點，包括自身的文字節點。

 

5、複製節點

　　複製節點也是常用的DOM操作之一，利用clone()函式，我們就可以克隆一個同樣的節點。例如：

$("ul li").click(function(){
    $(this).clone().appendTo("ul");  //複製當前單擊的節點，並將它追加到<ul>元素中
})  

　　

　　上面複製節點後，被複制的新節點不具有任何行為。如果需要新元素也具有同樣的行為（這裡指單擊複製功能）。可以這樣改：

$(this).clone(true).appendTo("body");  //注意引數true

　　

 

6、替換節點

　　如果要替換某個節點，jQuery提供了相應的方法：replaceWith()和replaceAll()。

　　replaceWith()方法是將所有匹配的元素都替換成指定的HTML或者DOM元素。例如要將網頁中"<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>"替換成"<strong>你最不喜歡的水果是？</strong>",可以這樣做：

$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>");

　　也可以使用另一種方法replaceAll()來實現，該方法與replaceWith()方法作用相同，只是顛倒了replaceWith的操作。

$("<strong>你最不喜歡的水果是？</strong>" ).replaceAll("p");

注意：如果在替換之前，已經為元素繫結事件，替換後原先繫結的事件將會與被替換的元素一起消失，需要在新元素上重新繫結事件。

 

7、包裹節點

　　如果要將某個節點用其他標記包裹起來，jQuery提供了相應的方法，即wrap()。

$("strong").wrap("<b></b>");  // 用<b>標籤把<strong>元素包裹起來
/* 結果如下 */
<b><strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong></b>

　　包裹節點操作還有其他倆個方法，即wrapAll()和wrapInner()。

　　

　　7.1  wrapAll()方法

　　該方法將所有匹配的元素用一個元素來包裹。它不同於wrap()方法，wrap()方法是將所有的元素進行單獨的包裹。

 <strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong>
 <strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong>
 
 $("strong").wrap("<b></b>");  
 
 /*  結果如下  */
 <b>
 <strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong>
 <strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong>
 </b>

　　注意：如果被包裹的多個元素中間有其他元素，其他元素會被放到包裹元素之後。

 

　　7.2  wrapInner()方法

　　該方法將每一個匹配到的元素的子內容（包括文字節點）用其他結構化的標記包裹起來。

<strong title="選擇你最喜歡的水果.">你最喜歡的水果是？</strong>
$("strong").wrapInner("<b></b>"); 
/* 結果如下  */
<strong title="選擇你最喜歡的水果."><b>你最喜歡的水果是？</b></strong>

8、屬性操作

　　在jQuery中，用attr()方法來獲取和設定元素屬性，removeAttr()方法來刪除元素屬性。

/*  獲取<p>元素節點屬性title  */
var p_txt = $("p").attr("title");

/*  設定屬性值  */
$("p").attr("title,"your titlt");
$("p").attr({"name":"test","id":"id1"});  //名/值形式的物件設定屬性

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

 

9、樣式操作

　　9.1  獲取樣式和設定樣式

<p class="myClass">你最喜歡的水果是？</p>

var p_class = $("p").attr("class");   //獲取p元素的class
$("p").attr("class","hign");   //設定<p>元素的class為"high"

　　9.2  追加樣式

　　jQuery提供一個專門的addClass()方法來追加樣式，在原有的基礎上新增class名。

　　

　　9.3  移除樣式

/*  移除一個class */
$("p").removeClass("high");

/*  移除多個class，用空格隔開 */
$("p").removeClass("class1 class2 classN");

/*  移除所有class */
$("p").removeClass();

 

　　9.4  切換樣式

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

　　9.5  判斷是否含有某個樣式

　　hasClass()可以用來判斷元素中是否含有某個class，如果有，則返回true，否則返回false.

/* 也可以用來判斷多個class，用空格隔開  */
$("p").hasClass("class1 class2 classN");

注意：is()是一種更強大的方法，可以做hasClass()不能做的事。

 

10、設定和獲取HTML、文字和值

　　10.1  html()方法：此方法類似於JavaScript的innerHTML屬性，可以用來讀取或設定元素中的HTML內容。

　　

　　10.2  text()方法：類似於JavaScript中的innerText屬性，可以用來讀取或者設定某個元素中的文字內容。

　　

　　10.3  val()方法：此方法類似於JavaScript中的value屬性，可以用來設定和獲取元素的值。無論是文字框、下拉框還是單選框，它都可以返回元素的值。如果元素是多選，則返回一個包含所有選擇的值的陣列。

 

11、遍歷節點

　　11.1  chidren()方法

　　該方法用於取得匹配元素的子元素集合。只考慮子元素，不考慮後代元素！

 

　　11.2  next()方法

　　該方法用於去匹配元素後面緊鄰的同輩元素。類似於層次選擇器中的$("p + div").

 

　　11.3  prev()方法

　　該方法用於去匹配元素前面緊鄰的同輩元素，與next()方法相反。

　　

　　11.4  sibling()方法

　　該方法用於取得匹配元素前後所有的同輩元素。

　　

　　11.5  closest()方法

　　該方法用於取得最近的匹配元素。首先檢查當前元素是否匹配，如果不匹配則向上查詢父級。什麼都匹配不到返回空jQuery物件。

 

　　11.6  parent()、parents()與closest()的區別

　　這裡不過多的贅述，大家可以點選連結到w3c親自操作，印象更深。

 

12、CSS-DOM操作

　　css()方法用來獲取或設定元素的樣式屬性，用法同attr()。

　　css()方法獲取的高度值與樣式的設定有關，可能會得到“auto”，也可能得到“10px”之類的字串；而height()方法獲取的高度值則是元素在頁面的實際高度，與樣式的設定無關，並且不帶單位。

 

　　12.1  offset()方法

　　它的作用是獲取元素在當前瀏覽器視窗文件的相對偏移，其中返回的物件包含倆個屬性，即top和left，它只對可見元素有效。

var offset = $("p").offset();  //獲取<p>元素的offset()
var left = offset.left;   //獲取左偏移
var top = offset.top;   //獲取上偏移

　　12.2  position()方法

　　它的作用獲取元素相對於最近一個position樣式屬性設定為relative或者absolute的祖父節點的相對偏移，與offset一樣,即top和left.

var position= $("p").position();  //獲取<p>元素的position()
var left = position.left;   //獲取左偏移
var top = position.top;   //獲取上偏移

　　12.3  scrollTop()方法和scrollLeft()方法

　　這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離，即頁面被捲走的部分高度或寬度。