JQuery選擇器Sizzle詞法分析器的理解

sizzle 的簡介：

sizzle是jquery 中，內部實現選擇器詞法分析的物件，而tokenize 則是將類似 div .classname > a:[attrname=name] 這樣的選擇器，經過序列化成乙個陣列，裡面的每個單元是乙個標籤 可以是 tag,classname,連線符[> + 等]，最終返回這個陣列，供之後使用。

在jquery的選擇器當中，

document.getelementbyid,

document.getelemetbytagname,
document.getelementbyclassname,
document.queryselector,
document.queryselectorall,

若是不相容這介面，則會去呼叫自己的實現的選擇器sizzle。

而這些css選擇器，在詞法解析過程中，會將每個選擇器分解成字元，每個字元為乙個單元

每個成員單元的結構是：

過濾器結構:tag class attr child pseudo

tokenize = sizzle.tokenize = function

( selector, parseonly ) 
sofar =selector;
groups =;
prefilters = expr.prefilter; //
預處理方法
while
( sofar ) 
groups.push( (tokens =) );
}matched = false
;        
//combinators// 匹配連線符號 ">" ," " ,"+" ,"~" if ( (match = rcombinators.exec( sofar )) ) );
sofar =sofar.slice( matched.length );
}//filters
// 匹配過濾器:tag class attr child pseudo for ( typeinexpr.filter ) );
sofar =sofar.slice( matched.length );}}
//到這裡，第乙個字元還沒有捕獲到對應的解析結果，那麼退出if ( !matched ) 
}//return the length of the invalid excess// if we're just parsing// otherwise, throw an error or return tokens
// 如果是轉換 返回選擇器未 成功匹配的長度，否則把token返回，同時丟擲錯誤。return parseonly ?
sofar.length :
sofar ?sizzle.error( selector ) :
//cache the tokens
tokencache( selector, groups ).slice( 0);
};

e.g.

選擇器selector  : div > p + .alen input[type='radio'],div > p + .alen input[type='checkbox']

1.首先，第乙個標籤 div ，不是連線符號，在filter過濾時查詢到

2,然後匹配第二字元，為">" ,在combinators 匹配時查詢到

3.之後依次匹配第乙個字元是否為逗號[是則分組]，是否為conbinator[">" ," " ,"+" ,"~"] ,或者filter中的元素 tag class attr child pseudo[偽元素] ...

sizzle匹配的結果：

總結：在看aaron的jquery的原始碼解析，和jquery 的原始碼 ，個中有許多不解的地方，寫寫blog捋下思路。

參考：

Sizzle選擇器揭秘 Sizzle過濾器

上面一篇文章說的sizzle的利器之一find函式sizzle選擇器揭秘 sizzle選擇器 這篇介紹sizzle的另一利器filter函式 1 sizzle.filter function expr,set,inplace,not 20 用於縮小結果集 21 if curloop result 2...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前，有必要了解一下css 層疊樣式表 技術。css是一項出色的技術，它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構，只需通過新增不同的css規則，就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一，實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分，它必須被兩個反斜槓轉義 引數 id,用於搜尋的，通過元素的 id 屬性中給定的值。示例 查...