在jQuery中,主要的DOM操作分為以下幾類:

一、查找節(jié)點
1、查找元素節(jié)點
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
alert(li_txt);
2、查找屬性節(jié)點
利用jQuery選擇器找到需要的元素之后,就可以使用attr()方法來獲取它的各種屬性的值。attr()方法的參數(shù)可以是一個,也可以是兩個。當參數(shù)是一個時,則是要查詢的屬性的名字,例如:
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);
二、創(chuàng)建節(jié)點
1、創(chuàng)建元素節(jié)點
var $li_1 = $("<li></li>");
$("ul").append($li_1);
2、創(chuàng)建文本節(jié)點
var $li_1 = $("<li>蘋果</li>");
$("ul").append($li_1);
3、創(chuàng)建屬性節(jié)點
var $li_1 = $("<li title="蘋果">蘋果</li>");
$("ul").append($li_1);
三、插入節(jié)點

四、刪除節(jié)點
1、remove()方法
$("ul li:eq(1)").remove();
當某個節(jié)點用remove()方法刪除后,該節(jié)點所包含的所有后代節(jié)點將同時被刪除。這個方法的返回值是一個指向已被刪除的節(jié)點的引用,因此可以在以后再使用這些元素。
另外remove()方法也可以傳遞參數(shù)來選擇性地刪除元素,如下:
$("ul li").remove("li[title!=蘋果]");
2、detach()方法
detach()和remove()一樣,也是從DOM中去掉所有匹配的元素。但需要注意的是,這個方法不會把匹配的元素從jquery對象中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。
3、empty()方法
嚴格來說,empty()方法并不是刪除節(jié)點,而是清空節(jié)點,它能清空元素中的所有后代節(jié)點。
五、復制節(jié)點
復制節(jié)點用到的方法是clone(),如下:
$("ul li").click(function(){
$(this).clone().appendTo("ul");
});
該方法還可以接受一個參數(shù),true,它的含義是復制元素的同時復制元素中所綁定的事件。
六、替換節(jié)點
1、replaceWith()方法是將所有匹配的元素都替換成指定的HTML或者DOM元素。
2、replaceAll()方法的作用于replaceWith()方法一樣,只是順序顛倒了
3、需要注意的是,如果在替換之前,已經(jīng)為元素綁定事件,替換后原先綁定的事件將會與被替換的元素一一消失,需要在新元素上重新綁定事件。
七、包裹節(jié)點
1、wrapAll()方法會將所有匹配的元素用一個元素來包裹,它不同于wrap(),wrap()方法是將所有的元素進行單獨的包裹。
<strong></strong>
<strong></strong>
使用wrap()方法包裹strong元素,代碼如下
$("strong").wrap("<b></b>");
得到的結(jié)果如下
<b><strong></strong></b>
<b><strong></strong></b>
而是用wrapAll()方法包裹strong元素,代碼如下
$("strong").wrapAll("<b></b>");
得到的結(jié)果如下
<b>
<strong></strong>
<strong></strong>
</b>
2、wrapInner()方法將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點)用其他結(jié)構(gòu)化的標記包裹起來。
$("strong").wrapInner("<b></b>");
得到的結(jié)果如下
<strong title="蘋果"><b>蘋果</b></stong>
八、屬性操作
1、獲取屬性和設(shè)置屬性
想要獲取元素的屬性,只需要給attr()方法傳遞一個參數(shù),即屬性名稱即可。
如果要設(shè)置元素的屬性,也可以使用同一個方法,不同的是,要傳遞兩個參數(shù),即屬性名稱和對應的值。
$("p").attr("title","you title");
jQuery中的很多方法都是同一個函數(shù)實現(xiàn)獲取和設(shè)置的,類似的還有html()、text()、height()、width()、val()和css()等方法
2、刪除屬性
在某些情況下,需要刪除文檔中某個元素的特定屬性,可以使用removeAttr()方法來完成該任務。
九、樣式操作
1、獲取樣式和設(shè)置樣式
使用attr("class","class name"方法來獲取和設(shè)置樣式。
2、追加樣式
使用addClass("class name")方法來追加樣式。
在CSS中有一下兩條規(guī)則:
(1)如果給一個元素添加了多個class值,那么就相當于合并了它們的樣 式。
(2)如果有不同的class設(shè)定了同一樣式屬性,則厚澤會覆蓋前者。
3、移除樣式
可以使用removeClass("class name")方法來移除樣式
4、切換樣式
5、判斷是否含有某個樣式的方法是hasClass()
十、設(shè)置和獲取HTML、文本和值
1、html()方法
此方法類似于javascript中的InnerHTML屬性,可以用來獲取或者設(shè)置某個元素中的HTML內(nèi)容。
2、text()方法
此方法類似于javascript中的innerText屬性,用來讀取或者設(shè)置某個元素中的文本內(nèi)容
3、val()方法
此方法類似于javascript中的value屬性,用來獲取或者設(shè)置元素的值
十一、遍歷節(jié)點
1、children()方法
用于取得匹配元素的子元素集合
2、next()方法
用于取得匹配元素后面緊鄰的同輩元素
3、prev()方法
用于取得匹配元素前面緊鄰的同輩元素
4、siblings()方法
用于取得匹配元素前后所有的同輩元素
5、closest()
該方法用于取得最近的匹配元素。首先檢查當前元素是否匹配,如果匹配就直接返回。如果不匹配則向上查找父元素,逐級向上直到找到匹配選擇器的元素。
$(document).bind("click",function(e){
$(e.target).closest(".li").css("color","red");
});
6、parent()、parents()和closest()的區(qū)別
parent()獲得集合中每個匹配元素的父級元素。
parents()獲得集合中每個匹配元素的祖先元素。
closest()從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素
十二、CSS-DOM操作
可以直接利用css()獲取和設(shè)置元素的樣式屬性
1、offset()方法是獲取元素在當前視窗的相對偏移,其中返回的對象包含兩個屬性,即top和left,它只對可見元素有效。
2、position()方法獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移,與offset()一樣,它返回的對象也有兩個屬性,即top和left。
3、scrollTop()方法和scrollLeft()方法
這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離。