概念:
1.DOM -> 即文檔對象模型(Document Object Model),簡單來說,DOM給予了Web設計師和開發者一套標準的方法,讓他們能夠輕鬆獲取操作網頁中的數據,腳本和表現層對象.
2.在實現DOM操作之前,必須要選擇要操作的元素(使用jQuery強大的選擇器)-> 基本選擇器 層次選擇器 內容選擇器 過濾選擇器......
DOM操作
1、節點操作
1)語法:$(html)
$(html)方法會根據傳入的HTML標記字符串,創建一個DOM對象,並將此DOM對象包裝成jQuery對象後返回
a)創建元素節點 -> ，("<p/>")
注: 要符合標準的XHTML個格式 -> $("<p>")->錯誤
b)創建文本節點
$("<li>你好</li>")
$("<li><em>好好</em><b>學習</b></li>")
c)創建屬性節點 -> $("<li title= "hello" >你好</li>")
注: 創建文本節點和屬性節點一樣,直接在創建元素節點時一起創建
2)插入節點
a)父子關係
append() -> 向每個匹配的元素內部追加內容 -> $("選擇器").append("<b>Hello</b>");
appendTo() -> 把所有匹配的元素追加到另一個指定的元素元素集合中 -> $("選擇器").appendTo("選擇器");
prepend() -> 向每個匹配的元素內部前置內容 -> $("選擇器").prepend("<b>Hello</b>");
prependTo() -> 把所有匹配的元素前置到另一個,指定的元素元素集合中 -> $("選擇器").prependTo("選擇器");
b)兄弟關係
after() -> 在每個匹配的元素之後插入內容
insertAfter() -> 把所有匹配的元素插入到另一個,指定的元素元素集合的後面
before() -> 在每個匹配的元素之前插入內容
insertBefore() -> 把所有匹配的元素插入到另一個,指定的元素元素集合的前面
3)刪除節點
remove() -> 從DOM中刪除某節點的元素,包括此節點的所有後代節點,返回刪除節點的應用(還支持選擇性刪除)
detach() -> 與remove相同,但刪除節點的事件,附加數據等會保留下來
empty() -> 清空節點,包括此節點的所有後代界定啊
4)複製節點
clone()-> 複製節點,可傳boolen值,若爲真,則該節點的事件也被複制
5)替換節點
replaceWith() -> 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll() -> 用匹配的元素替換掉所有 selector匹配到的元素
注: 以上兩方法功能一樣,只是調用的次序不一樣(類似append和appendTo),如果在替換之前,已經爲元素綁定事件,替換後原先綁定的事件將會被替換的元素一起消失,需要在新元素上重新綁定事件
6)包裹節點
wrap() -> 把所有匹配的元素用其他元素的結構化標記包裹起來
wrapAll() -> 將所有匹配的元素用單個元素包裹起來
wrapInner() -> 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
2、屬性操作
attr()/removeAttr() -> 獲取/刪除 匹配的元素集合中的第一個元素的屬性的值或設置/刪除 每一個匹配元素的一個或多個屬性
prop()/removeProp() -> 獲取匹配的元素集中第一個元素的屬性（property）值或設置每一個匹配元素的一個或多個屬性/ 用來刪除由.prop()方法設置的屬性集
3、樣式操作
設置樣式: attr("屬性名","屬性值")/prop("屬性名","屬性值")
追加/移除樣式: addClass()/removeClass()
切換樣式: toggleClass()
判斷是否含有某個樣式:hasClass()->判斷是否含有某個class->等同於is()
設置樣式: css("屬性","屬性值")
同時設置多個樣式:css({"屬1":"值1",....., "屬n":"值n"}),類似的還有:
attr({"屬1":"值1",......, "屬n":"值n"})
prop({"屬1":"值1",......,"屬n":"值n"})
4、設置元素
html() -> 取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔 -> $("選擇器").html();
text() -> 取得所有匹配元素的內容 -> $("選擇器").text();
注: 獲取內容,不需要參數,如果設置內容,則把內容設置到參數中,類似的方法還有:attr() prop() height() width() css() val()等
5、表單處理元素值
val() -> 獲得匹配元素的當前值 -> $("選擇器").val();
6、遍歷節點
1)children():獲取匹配元素的子元素集合
2)next([selector]):獲取匹配元素後面緊鄰的同輩元素
對比:prev + next
3)nextAll([selector]): 獲取匹配元素之後所有的同輩元素
對比: prev ~ siblings
4)prev([selector]):獲取匹配元素前面緊鄰的同輩元素
5)prevAll([selector]): 獲取匹配元素之前所有的同輩元素
6)siblings([selector]):獲取匹配元素前後的同輩元素
7)parent([selector]):獲取匹配元素的上一級父元素
8)parents([selector]):獲取匹配元素的父元素,包括所有的祖先元素
9)closest():從元素本身開始,逐級向上級元素匹配,並返回最先匹配的元素
10)slice(start,[end]):獲取匹配元素,下標索引從start到end的子集
slice(n): 獲取匹配元素下標索引從0到n的子集
slice(start,end): 獲取匹配元素下標索引從start到end的子集
slice(-n): 獲取匹配元素下標索引從末尾開始選擇到n的子集
11)is: 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true
12)map: 將一組元素轉換成其他數組(不論是否是元素數組)
13)has: 保留包含特定後代的元素,去掉那些不含有指定後代的元素
14)end: 回到最近的一個"破壞性"操作之前.即,將匹配的元素列表變爲前一次的狀態