jQuery選擇的工作原理和優化

至於有那些選擇器，在幫助手冊中都有，自己去看，這篇主要是分析他的工作原理，而優化我們寫的選擇器，尤其在頁面內容很多的情況下，更應該需要優化。下邊就言歸正傳。

當我們使用選擇器的時候$(selector,content)，就會執行init(selectot,content)，我們看看inti中是怎樣執行的：

if ( typeof selector == "string" )

// 是: $("#id")

else

selector = ; }

//非id的形式.在context中或者是全文查詢

} else }

這裡就說明只有選擇器寫成$(『#id』)的時候最快，相當於執行了一次getelementbyid，後邊的程式就不用再執行了。當然往往我們需要的選擇器並不是這麼簡單，比如我們需要id下的css為classname，有這樣的寫法$(『#id.classname』)和$(『#id』).find(『.classname』);這兩種寫法的執行結果都是一樣的，比如

，返回的肯定都是，但是執行的效率是完全不一樣的。

在分析一下上邊的**，如果不是$(『#id』)這樣的簡單選擇器的話，都會執行find函式，那我們再看看find到底是做用的：

find: function( selector ) );

//下邊的**可以忽略，只是做一些處理

//這裡應用了js的正則物件的靜態方法test

//indexof("..")需要了解一下xpath的語法,就是判斷selector中包含父節點的寫法

//本意就是過濾陣列的重複元素

return this.pushstack( /[^+>] [^+>]/.test( selector ) || selector.indexof("..") > -1 ?

jquery.unique( elems ) :

elems ); }

如果這樣寫$(『#id .classname』)，就會執行到擴充套件的find(『#id .classname』,document)，因為當前的this是document的jquery陣列，那我們在看看擴充套件的find他的實現，**比較多，就不列出來，總之就是從第二個引數傳遞進行的dom第乙個子節點開始找，遇見#比對id，遇見.比對classname，還有：<+-等處理。那我們要優化，是不是就要想辦法讓第二個引數context的範圍最小，那樣遍歷是不是就很少了？

如果我們這樣寫$(『#id』).find(『.classname』)，那程式只這樣執行的，第一次init的時候執行一步getelementbyid，就return了，接著執行find(『.classname』,divdocument)，divdocument就是我們第一次選擇的是div標籤，如果document下有很多dom物件的時候，這次只遍歷divdocument是不是少了很多次，而且在第一次選擇id的速度也要比遍歷快的多。

現在大家應該是明白了吧。就是說第一層選擇最好是id，而是簡單選擇器，目的就是定義範圍，提高速度，這次就說這些，選擇寫法的優化，其他的優化，下次再說。

jQuery選擇的工作原理和優化

jQuery選擇的工作原理和優化

jQuery選擇的工作原理和優化

JQuery 工作原理

相關推薦