jquery sizzle 選擇器淺析

　　 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 = "<p class='TEST'></p>";

        // 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, seed ) {
            //使用querySelectorAll 來查詢
        }
}

如果你的瀏覽器是ie8+ 或者 谷歌，直接通過內置的querySelectorAll(".test")返回dom結構。 如果你使用是ie6，那么下面事情發生了

　　2. 不支持querySelectorAll 就會啟動內部 sizzle。下面是流程

/**
1.sizzle 通過
 chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
這個正則進行匹配，

2.把我們傳來的參數'.test'，匹配成'.test' 放到數組

3.檢測瀏覽器是否支持getElementsByClassName 如果支持，則通過此函數返回dom，如果不支持此函數則 context.getElementsByTagName( "*" ) ,通過上下文把所有的元素選出來，在通過循環，選擇className = 'test' 的元素，放入數組返回dom。
*/

ok，以上是$('.test')的流程，如果你很迷惑，你可以看看源碼，調試一下。

　　關於sizzle的選擇器

　　個人認為，sizzle選擇器是增強版的querySelectorAll 函數， 因為querySelectorAll 不支持 'div.test :eq(1)' 這樣的selector 和css3選擇！

當你的selector里面不出現nth|eq|gt|lt|first|last|even|odd 這樣的字符時候， 從右向左，所謂的從右向左，比如 $('div img')  首先會把所有的img 選出來，通過parent 是div 進行過濾 。 這樣很高效的原因是只進行一次dom的查詢！

當你selector 出現了nth|eq|gt|lt|first|last|even|odd  這樣的字符的時候，從左向右！ 所謂從左向右，比如 $('div img:eq(1)')  先把所有的div 選出來保存，在把img選出來通過eq（1）過濾保存， 在對結果集操作，進行多次選擇了

　　思考

　　$('div img:eq(0)') 與 $('div img').first() 哪個效率高？ 個人認為 后一個高一些，因為 第一從左向右效率低下！沒有測試過！理論推導！

      今天大致看了下流程，具體的代碼沒怎么細研究！這里面好的思想值得學習和吸收

　　歡迎拍磚