I'm sorry!我用jquery的大概有一年了，只知道$(selector)，其內部選擇器的流程走向完全不清晰！於是看了jquery的源碼，jquery用的選擇器的引擎是sizzle，是jquery的作者另一個開源項目，在github上面有，號稱最快的dom選擇器！不到2000行程式碼。
上面說了不是很精彩的開場白，我麼來個 for example: $('.test') 在jquery的流程是怎麼走的呢？
1.首先會做以下的判斷
程式碼如下:
/🎜>/🎜> **
*關於querySelectorAll函數
*傳回目前文件中符合特定選擇器的所有的元素
*var nodelist = element.querySelectorAll("div.test");
*支援瀏覽器ie8 ,Chrome,Firefox(3.5)
* 如果你不清楚可以google 一下
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "
";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context, extra, context, extra, seed ) {
//使用querySelectorAll 來查詢
}
}
如果你的瀏覽器是ie8 或谷歌，直接透過內建的querySelectorAll(".test")返回dom結構。 🎜> 程式碼如下: /**
.sizzle 通過
chunker = /((?:((?:([^()] )|[^()] ) )|[(?:[[^[]]*]|[ '"][^'"]*['"]|[^[]'"] ) ]|\.|[^ > ~,([\] ) |[> ~])(s*,s*) ?((?:.|r|n)*)/g
這個正規進行匹配，
.把我們傳來的參數'.test'，匹配成'.test' 放到數組
.檢測瀏覽器是否支持getElementsByClassName 如果支持，則通過此函數返回dom，如果不支持此函數則context.getElementsByTagName( "*" ) ,通過上下文把所有的元素選出來，在通過循環，選擇className = 'test ' 的元素，放入數組回傳dom。*/
ok，以上是$('.test')的流程，如果你很迷惑，你可以看看源碼，調試一下。 1)' 這樣的selector 和css3選擇！左，例如$('div img') 首先會把所有的img 選出來，透過parent 是div 過濾。 這樣很有效率的原因是只進行一次dom的查詢！
當你selector 出現了'eq(1)' 這樣的字符的時候，就變正常了，從左向右！這是因為要對結果集進行篩選。
思考
$('div img:eq(0)') 與 $('div img').first() 哪個效率高？ 個人認為 後一個高一些，因為 第一從左向右效率低！沒有測試過！理論推導！
今天大致看了下流程，具體的程式碼沒怎麼細研究！這裡面好的想法值得學習與吸收
歡迎拍磚
