細說 jQuery 元素篇（一） - 理解 DOM

DOM - Document Object Model，即文檔對象模型，它經過對象樹來展現 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操做。

DOM 樹

w3shcool 的 DOM 樹模型圖就能很好地表現 DOM 樹的結構。

從圖中，咱們能夠看出 DOM 元素中父元素、子元素之間的關係。
在開發時，咱們能夠經過調試工具更清晰地看到 DOM 樹的結構。

$()函數

經過 $() 函數，咱們能夠建立 jQuery 對象，這個函數能夠接受標籤名，ID 和類名做爲參數，能夠單獨使用，也能夠同時使用多個。
被封裝到 jQuery 對象中的 DOM 元素會被自動地，隱式地循環遍歷。

• 標籤名 $('a') //取得文檔中全部 a 標籤
• ID $('#myId') //取得文檔中 id 爲 myId 的 DOM 元素
• 類名 $('.myClass') //取得文檔中 class 爲 myClass 的 DOM 元素

遍歷 DOM

咱們已經知道經過 $() 函數能夠取得一組元素，在此基礎上，jQuery 還提供了不少方法來操做取得的元素，例如取得父元素、子元素等等。有了這些操做，咱們就能夠靈活地穿梭在 DOM 樹中。

1.filter

首先咱們必需要提到過濾函數 - filter。
咱們知道 $() 函數能夠接受多個內容做爲參數，例如咱們但願取得類名爲 before 的 a 標籤，能夠這樣寫：

$('a.before')

使用 filter 函數後，咱們也能夠這樣寫：

$('a').filter('.before')

這樣看上去，好像 filter 只是作了件重複的事情，可是 filter 的功能確定不只限於此。讓咱們來看看它更強大的地方。
假設如今咱們有兩個 class 都爲 before 的 a 標籤，而咱們但願能取到父元素是 span 的那個 a 標籤，那麼直接用第一種方式寫確定難以實現，不過有了 filter 函數就方便多了：

$('a').filter(function(){
  return this.className == 'before' && this.parentElement.nodeName == 'SPAN';
});

2.連綴

jQuery 中可使用一行代碼取得多個指定的 DOM 元素集合，並能夠對這個集合的元素進行操做，這一能力咱們稱之爲連綴能力。jQuery的這種連綴能力不只有助於保持代碼簡潔，並且在替代組合從新指定選擇符時，還有助於提高腳本性能。
爲了可讀性，咱們習慣於把一行代碼拆開來寫：

連綴至關因而一句話作了不少事情，雖然效率方面表現不錯，但無疑比較難理解，因此咱們儘可能將其分行寫，同時添加上合適的註釋。

訪問 DOM

從上可知，jQuery 返回的是 jQuery 對象，可是咱們有時也但願直接對 DOM 元素進行操做。這時，咱們須要用到 jQuery 提供的 get 方法。例如，.get(0) 能夠訪問到 jQuery 對象封裝的第一個 DOM 元素。

$('a').get(0)

對此，jQuery 還提供了一種更簡的寫法：

$('a')[0]

這種語法結構有點相似於 Javascript 中的數組操做，但實際上二者是不一樣，這就至關於剝開 jQuery 的封裝，直接露出 DOM 節點列表，而後進行選擇。

參考

http://book.douban.com/subject/24669823/