Dom操作分為：
1.DOM Core 例如：getElementById
2.HTML-DOM 例如： document.forms
3.CSS-DOM 例如：element.style.color
jq的DOM操作
1.查找節點
1)查找元素節點
var $li = $("ul li:eq(1)"); //獲取li第二個節點
var li_txt = $li.text(); //獲取文本內容
alert(li_txt);
2)查找屬性節點
var $para = $("p");
var p_txt = $para.attr("title"); //獲取屬性
alert(p_txt);
2.創建節點(ps:其實都是類似的)
1)創建元素節點
var $li_1 = $("<li></li>");
$("ul").append($li_1);
2)創建文本節點
var $li_1 = $("<li>banana</li>");
$("ul").append($li_1)
3)創建屬性節點
var $li_1 = $("<li title="fruit">banana</li>");
$("ul").append($li_1)
3.插入節點
A,B代表不同的jq對象
| 方法 | 描述 | 例子 |
|---|---|---|
A.append(B) |
每個元素內部追加內容 | B加到A元素內部(A文本內容的后部) |
A.appendTo(B) |
每個元素內部追加內容 | A加到B元素內部(B元素文本內容的后部) |
A.prepend(B) |
prepend() | B加到A元素內部(A文本內容的前部) |
A.prependTo(B) |
prependTo() | A加到B元素內部(B元素文本內容的前部) |
A.after(B) |
after() | B元素后面加入A |
A.insertAfter(B) |
insertAfter() | A加入到B元素后面 |
A.before(B) |
before() | B元素加入A元素前面 |
A.insertBefore(B) |
insertBefore() | A元素加入B元素前面 |
4.刪除節點
1)remove()
該元素被刪除后，節點的所有后代節點都會被刪除。返回值是對節點的引用，故可以再次添加
remove也可以添加參數來有選擇的刪除元素
2)detach()
與remove不同的是刪除后，再次添加上后，這個元素所綁定的方法和事件還是會還原的。
3)empty()
清空此節點的內容和所有后代節點，但是此節點還是存在的。
5.復制節點
方法：clone(),如果clone方法添加參數true，則連原元素節點的事件也一起復制了。默認的是指復制元素節點，但是不復制數據的。
6.替換節點
1)replaceWith()
說明：A.replaceWith(B) 是B元素替換A
2)replaceAll()
說明：A.replaceAll(B) 是A元素替換B
7.包裹節點
1)wrap()
說明：A.replaceWith(B) 是B元素包裹A，分各個元素包裹$("strong").warp("<b></b>")
結果：<b><strong></strong></b><b><strong></strong></b>
2)wrapAll()
說明：A.replaceWith(B) 是B元素包裹A，整個一個包裹$("strong").warp("<b></b>")
結果：<b><strong></strong><strong></storng></b>
3)wrapInner()
說明：A.wrapInner(B) 是A包裹B，整個一個包裹$("strong").warpInner("<b></b>")
結果：<strong><b></b></strong>
8.屬性操作
1)獲取屬性和設置屬性
如果attr()不加參數可以獲取元素的屬性，但是如果加上參數可以設置單個或者多個屬性值。
$("p").attr("title","your title"); //單個參數值
$("p").attr({"title":"your title","name":"test"}); //多個參數值（字典格式）
2)刪除屬性removeAttr()
ps: prop()獲取匹配元素集的第一個元素屬性值；removePop()為第一個元素刪除設置的屬性
9.樣式操作
1)設置樣式：$("p").attr("class","myclass");
2)追加樣式：$("p").addClass("myclass");
3)移除樣式：$("p").removeClass("myclass");
4)切換樣式：$("p").toggleClass("myclass");
5)判斷是否存在某個樣式：$("p").hasClass("another");等同于$("p").is(".another");
10.設置html，文本和值
1)html()可以獲取或者設置html元素（可以用于xhtml但是不能用于xml）
2)text()設置和獲取元素的文本內容
3)val()設置和獲取value的值（focus()是獲得焦點的事件，blur()是失去焦點的事件）
ps：defaultValue指當前文本框的默認值
讓復選框或者下拉框等選中不但可以用value()，也可以用attr("selected",true)
11.遍歷節點
1)children()
獲取匹配元素的子元素而不是后代元素
2)next()
獲取匹配元素后面的一個同輩元素
3)prev()
獲取匹配元素前面的一個同輩元素
4)siblings()
獲取匹配元素的所有同輩元素
5)closest()
匹配離觸發事件最近的一個滿足條件的元素
6)parent(),parents()和closest()比較
| 方法 | 描述 | 注意 |
|---|---|---|
parent() |
獲取每個匹配元素的父級元素 | 指定的節點的父節點查找，只返回一個 |
parent()s |
獲取每個匹配元素的祖先元素 | 返回多個父節點 |
closest() |
從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素 | field3 |
12.CSS-DOM
css()方法獲取或者設置元素的樣式屬性
常用方法：
1)height() 獲取或者設置高度
2)width() 獲取或者設置寬度
3)offset() 獲取元素相對當前視窗的偏移量 top或left
4)position() 獲取相對最近的一個屬性為relative或者absolute父節點的偏移
5)scrollTop() 獲取元素的滾動條距離頂端的距離
6)scrollLeft() 獲取元素的滾動條距離左側的距離
