在這一小節(jié)我將會(huì)帶領(lǐng)你們了解jQuery對(duì)DOM進(jìn)行遍歷背后的工作機(jī)制，這樣可以在編寫(xiě)代碼時(shí)有意識(shí)地避免一些不必要的重復(fù)操作，從而提升代碼的性能。

關(guān)于jQuery對(duì)象的包裝

var $aaron = $("aaron");

通過(guò)對(duì)sizzle的分析，我們可以得知Query選擇器最終都是通過(guò)DOM接口實(shí)現(xiàn)取值的, 但是通過(guò)jQuery處理后返回的不僅僅只有DOM對(duì)象，而是一個(gè)包裝容器，返回jQuery對(duì)象：$aaron。

我們來(lái)看一下代碼：

在jQuery對(duì)象中有個(gè)prevObject對(duì)象，這個(gè)是干嘛用的呢？

如果你想知道prevObject是做什么的，咱們首先得先來(lái)了解一下jQuery對(duì)象棧，jQuery內(nèi)部維護(hù)著一個(gè)jQuery對(duì)象棧。每個(gè)遍歷方法都會(huì)找到一組新元素（一個(gè)jQuery對(duì)象），然后jQuery會(huì)把這組元素推入到棧中。

而每個(gè)jQuery對(duì)象都有三個(gè)屬性：context、selector和prevObject，其中的prevObject屬性就指向這個(gè)對(duì)象棧中的前一個(gè)對(duì)象，而通過(guò)這個(gè)屬性可以回溯到最初的DOM元素集中。

為了方便理解，我們做幾個(gè)簡(jiǎn)單的測(cè)試：

下面有一個(gè)父元素ul,嵌套了一個(gè)li節(jié)點(diǎn)：

<ul id="aaron">
    parent
    <li>child</li>
</ul>

我們現(xiàn)給li綁定一個(gè)事件，這個(gè)很簡(jiǎn)單，找到ul下面的li，綁定即可：

var aaron = $("#aaron");
    aaron.find('li').click(function(){
        alert(1);     //1
    })

此時(shí)我又想給父元素綁定一個(gè)事件，我們是不是又要在aaron上綁定一次事件呢？是的，上面代碼通過(guò)find處理后，此時(shí)的上下文是指向每一個(gè)li了,所以必須要重新引用aaron元素（li的父元素），然后再綁定click事件：

aaron.click(function(){
      alert(2);     //1
 })

這樣會(huì)不會(huì)很麻煩，所以jQuery引入一個(gè)簡(jiǎn)單的內(nèi)部尋址的機(jī)制，可以回溯到之前的Dom元素集合，通過(guò)end()方法可以實(shí)現(xiàn)：

aaron.find('li').click(function() {
        alert(1);
}).end().click(function() {
        alert(2);
})

jQuery為我們操作這個(gè)內(nèi)部對(duì)象棧提供個(gè)非常有用的2個(gè)方法

.end()

.addBack()

這里需要指出來(lái)可能有些API上是andSelf，因?yàn)榫蚎uery的api是這樣寫(xiě)的，andSelf現(xiàn)在是.addBack()的一個(gè)別名。在jQuery1.8和更高版本中應(yīng)使用.addBack()

源碼其實(shí)也是這樣的

jQuery.fn.andSelf = jQuery.fn.addBack;

調(diào)用第一個(gè)方法只是簡(jiǎn)單地彈出一個(gè)對(duì)象（結(jié)果就是回到前一個(gè)jQuery對(duì)象）。第二個(gè)方法更有意思，調(diào)用它會(huì)在棧中回溯一個(gè)位置，然后把兩個(gè)位置上的元素集組合起來(lái)，并把這個(gè)新的、組合之后的元素集推入棧的上方。

利用這個(gè)DOM元素?？梢詼p少重復(fù)的查詢(xún)和遍歷的操作，而減少重復(fù)操作也正是優(yōu)化jQuery代碼性能的關(guān)鍵所在。