鋒利的 jQuery (第二版) jQuery 中的 DOM 操做

DOM 是一種與瀏覽器、平臺、語言無關的接口，使用該接口能夠訪問到網頁容器中的標準組件。
解決 Netspace 的 JavaScript 和 Miscrosoft 的 JScript

3.1 DOM 操做的分類

DOM 操做分爲 DOM Core(核心)、HTML-DOM 和 CSS-DOM
1. DOM Core
任一支持 DOM 的程序設計語言均可以使用 DOM Core。
2. HTML-DOM
3. CSS-DOM

3.2 jQuery 中的 DOM 操做

3.2.1 查找節點

1. 查找元素節點
2. 查找屬性節點
attr(param1 [, param2]): 只有一個參數時得到對應屬性值，有兩個參數時爲設置對應屬性值。

3.2.2 建立節點

1. 建立元素節點

$(html)

2. 建立文本節點
3. 建立屬性節點

3.2.3 插入節點

方法	簡述	實例
append()	s	s
appendTo()	追加到指定元素中
prepend()	s
prependTo()	s
after()	s
insertAfter()	s
before()	s
insertBefore()	s

3.2.4 刪除節點

1. remove()方法
做用：從 DOM 刪除是全部匹配的元素，傳入的參數用於根據 jQuery 表達式來篩選元素。
返回：指向刪除節點的引用。
2. detach()方法
做用：不會將匹配的元素從 jQuery 對象刪除。 全部綁定的事件、附加的數據等都會保存下來。
3. empty()方法
做用：清空元素中的全部後代節點。

3.2.5 複製節點

clone()方法
clone(true) : 複製元素的同時複製元素綁定的事件。
商品拖動功能（將商品加入購物車）用的就是複製節點。

3.2.6 替換節點

1. replaceWith()
2. replaceAll()
替換後須要從新綁定事件

3.2.7 包裹節點

1. wrap()方法
做用：將全部元素進行單獨的包裹。
2. wrapAll()方法
做用：將全部匹配的元素用一個元素來包裹。
3. wrapInner()方法
將每個匹配的元素的子內容(包括文本節點)用其餘結構化的標記包裹起來。

3.2.8 屬性操做

1. 獲取屬性與設置屬性
attr(param) : 獲取屬性值
arrr(param1, param2): 設置單個屬性
attr(jsonData):設置多個屬性
2. 刪除屬性
removeAttr(param)

3.2.9 樣式操做

1. 獲取樣式與設置樣式
attr("class"):獲取樣式
attr("class", param):設置樣式, 替換以前的樣式
2. 追加樣式
addClass(param)
3. 移除樣式
removeClass(param)
4. 切換樣式
toggleClass(param): 若類名存在則刪除它， 不存在則添加它。
附加：toggle(function1, function2): 元素原來顯示的，則隱藏他；隱藏的則顯示它。
5. 判斷是否含有某個樣式
hasClass(param) 等價於 is()方法

$("p"),hasClass("my") 等價於 $("p").is(".my")

3.2.10 設置和獲取 HTML、文本和值

1. html()
2. text()
JavaScript的 innerText 不能在 Firefox 中運行。
3. val()

3.2.11 遍歷節點

1. childdren()
做用：取得匹配元素的子元素集合。
2. next()
做用：取得匹配元素後面緊鄰的同輩元素。
3. prev()
做用：取得匹配元素前面緊鄰的同輩元素。
4. siblings()
做用：取得匹配元素先後全部的同輩元素。
5. closest(param)
做用：取得最近的匹配元素。
6. parent() 和 parents()的區別
parent() : 返回父級元素。
parents() : 返回祖先元素。

3.2.12 CSS-DOM 操做

css(param) : 獲取對應屬性值。
css(param1, param2) : 設置單個屬性。
css(jsonData) : 設置多個屬性。若設置屬性的值時不帶引號，則須要採用駝峯式寫法。如

$("p").css({fontSize : "20px", backgroundColor : "#fff"});

css()獲取的高度值與樣式的設置有關， 而 height()獲取的高度值是樣式在頁面的實際高度， 與樣式設置無關， 而且不帶單位。
1. offset()
做用：獲取元素在當前視窗的相對偏移， 返回對象包括兩個屬性 top 和 left， 它只對可見元素有效。
2. position()
做用：獲取元素相對於最近的一個 position 樣式屬性設置爲 relative 或 absolute 的祖父節點的相對位移， 返回對象包括兩個屬性 top 和 left。
3. scrollTop()方法和scrollLeft()方法做用：獲取元素的滾動條距頂端的距離和距左側的距離。附加：這兩個方法能夠指定一個參數， 控制元素的滾動條滾動到指定的位置。