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。下面是流程
. 代碼如下:
/**
.sizzle 通過
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
這個正則進行匹配，
.把我們傳來的參數'.test'，匹配成'.test' 放到數組
.檢測浏覽器是否支持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 出現了'eq(1)' 這樣的字符的時候，就變正常了，從左向右！這是因為要對結果集進行過濾。
思考 $('div img:eq(0)') 與 $('div img').first() 哪個效率高？ 個人認為 後一個高一些，因為 第一從左向右效率低下！沒有測試過！理論推導！
今天大致看了下流程，具體的代碼沒怎麼細研究！這裡面好的思想值得學習和吸收
歡迎拍磚