jQuery選擇器源碼解讀(一):Sizzle方法
更新時間:2015年03月31日 10:05:23 作者:mole
這篇文章主要介紹了jQuery選擇器源碼解讀(一):Sizzle方法,本文用詳細(xì)的注釋解讀了Sizzle方法的實現(xiàn)源碼,需要的朋友可以參考下
對jQuery的Sizzle各方法做了深入分析(同時也參考了一些網(wǎng)上資料)后,將結(jié)果分享給大家。我將采用連載的方式,對Sizzle使用的一些方法詳細(xì)解釋一下,每篇文章介紹一個方法。
若需要轉(zhuǎn)載,請寫明出處,多謝。
/*
* Sizzle方法是Sizzle選擇器包的主要入口,jQuery的find方法就是調(diào)用該方法獲取匹配的節(jié)點
* 該方法主要完成下列任務(wù):
* 1、對于單一選擇器,且是ID、Tag、Class三種類型之一,則直接獲取并返回結(jié)果
* 2、對于支持querySelectorAll方法的瀏覽器,通過執(zhí)行querySelectorAll方法獲取并返回匹配的DOM元素
* 3、除上之外則調(diào)用select方法獲取并返回匹配的DOM元素
*
*
* @param selector 選擇器字符串
* @param context 執(zhí)行匹配的最初的上下文(即DOM元素集合)。若context沒有賦值,則取document。
* @param results 已匹配出的部分最終結(jié)果。若results沒有賦值,則賦予空數(shù)組。
* @param seed 初始集合
*/
function Sizzle(selector, context, results, seed) {
var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector;
/*
* preferredDoc = window.document
*
* setDocument方法完成一些初始化工作
*/
if ((context ? context.ownerDocument || context : preferredDoc) !== document) {
setDocument(context);
}
context = context || document;
results = results || [];
/*
* 若selector不是有效地字符串類型數(shù)據(jù),則直接返回results
*/
if (!selector || typeof selector !== "string") {
return results;
}
/*
* 若context既不是document(nodeType=9),也不是element(nodeType=1),那么就返回空集合
*/
if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) {
return [];
}
// 若當(dāng)前過濾的是HTML文檔,且沒有設(shè)定seed,則執(zhí)行if內(nèi)的語句體
if (documentIsHTML && !seed) {
/*
* 若選擇器是單一選擇器,且是ID、Tag、Class三種類型之一,則直接獲取并返回結(jié)果
*
* rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/
* 上述正則表達(dá)式括號內(nèi)三段依次分別用來判斷是否是ID、TAG、CLASS類型的單一選擇器
* 上述正則表達(dá)式在最外層圓括號內(nèi)有三個子表達(dá)式(即三個圓括號括起來的部分),
* 分別代表ID、Tag、Class選擇器的值,在下面代碼中,分別體現(xiàn)在match[1]、match[2]、match[3]
*/
if ((match = rquickExpr.exec(selector))) {
// Speed-up: Sizzle("#ID")
// 處理ID類型選擇器,如:#ID
if ((m = match[1])) {
// 若當(dāng)前上下文是一個document,則執(zhí)行if內(nèi)語句體
if (nodeType === 9) {
elem = context.getElementById(m);
// Check parentNode to catch when Blackberry 4.6
// returns
// nodes that are no longer in the document #6963
if (elem && elem.parentNode) {
// Handle the case where IE, Opera, and Webkit
// return items
// by name instead of ID
/*
* 一些老版本的瀏覽器會把name當(dāng)作ID來處理,
* 返回不正確的結(jié)果,所以需要再一次對比返回節(jié)點的ID屬性
*/
if (elem.id === m) {
results.push(elem);
return results;
}
} else {
return results;
}
} else {
// Context is not a document
/*
* contains(context, elem)用來確認(rèn)獲取的elem是否是當(dāng)前context對象的子對象
*/
if (context.ownerDocument
&& (elem = context.ownerDocument.getElementById(m))
&& contains(context, elem) && elem.id === m) {
results.push(elem);
return results;
}
}
// Speed-up: Sizzle("TAG")
// 處理Tag類型選擇器,如:SPAN
} else if (match[2]) {
push.apply(results, context.getElementsByTagName(selector));
return results;
// Speed-up: Sizzle(".CLASS")
/*
* 處理class類型選擇器,如:.class
* 下面條件判斷分別是:
* m = match[3]:有效的class類型選擇器
* support.getElementsByClassName 該選擇器的div支持getElementsByClassName
* context.getElementsByClassName 當(dāng)前上下文節(jié)點有g(shù)etElementsByClassName方法
*
*/
} else if ((m = match[3]) && support.getElementsByClassName
&& context.getElementsByClassName) {
push.apply(results, context.getElementsByClassName(m));
return results;
}
}
// QSA path
/*
* 若瀏覽器支持querySelectorAll方法且選擇器符合querySelectorAll調(diào)用標(biāo)準(zhǔn),則執(zhí)行if內(nèi)語句體
* 在這里的檢查僅僅是簡單匹配
* 第一次調(diào)用Sizzle時,rbuggyQSA為空
*
* if語句體內(nèi)對當(dāng)前context對象的id的賦值與恢復(fù),是用來修正querySelectorAll的一個BUG
* 該BUG會在某些情況下把當(dāng)前節(jié)點(context)也作為結(jié)果返回回來。
* 具體方法是,在現(xiàn)有的選擇器前加上一個屬性選擇器:[id=XXX],
* XXX 為context的id,若context本身沒有設(shè)置id,則給個默認(rèn)值expando。
*/
if (support.qsa && (!rbuggyQSA || !rbuggyQSA.test(selector))) {
nid = old = expando;
newContext = context;
// 若context是document,則newSelector取自selector,否則為false
newSelector = nodeType === 9 && selector;
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the
// root
// and working up from there (Thanks to Andrew Dupont for
// the technique)
// IE 8 doesn't work on object elements
if (nodeType === 1 && context.nodeName.toLowerCase() !== "object") {
groups = tokenize(selector);
if ((old = context.getAttribute("id"))) {
/*
* rescape = /'|\\/g,
* 這里將old中的單引號、豎杠、反斜杠前加一個反斜杠
* old.replace(rescape, "\\$&")代碼中的$&代表匹配項
*/
nid = old.replace(rescape, "\\$&");
} else {
context.setAttribute("id", nid);
}
nid = "[id='" + nid + "'] ";
// 重新組合新的選擇器
i = groups.length;
while (i--) {
groups[i] = nid + toSelector(groups[i]);
}
/*
* rsibling = new RegExp(whitespace + "*[+~]")
* rsibling用于判定選擇器是否存在兄弟關(guān)系符
* 若包含+~符號,則取context的父節(jié)點作為當(dāng)前節(jié)點
*/
newContext = rsibling.test(selector) && context.parentNode
|| context;
newSelector = groups.join(",");
}
if (newSelector) {
/*
* 這里之所以需要用try...catch,
* 是因為jquery所支持的一些選擇器是querySelectorAll所不支持的,
* 當(dāng)使用這些選擇器時,querySelectorAll會報非法選擇器,
* 故需要jquery自身去實現(xiàn)。
*/
try {
// 將querySelectorAll獲取的結(jié)果并入results,而后返回resulsts
push.apply(results, newContext
.querySelectorAll(newSelector));
return results;
} catch (qsaError) {
} finally {
if (!old) {
context.removeAttribute("id");
}
}
}
}
}
// All others
// 除上述快捷方式和調(diào)用querySelectorAll方式直接獲取結(jié)果外,其余都需調(diào)用select來獲取結(jié)果
/*
* rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)"
* + whitespace + "+$", "g"),
* whitespace = "[\\x20\\t\\r\\n\\f]";
* 上述rtrim正則表達(dá)式的作用是去掉selector兩邊的空白,空白字符由whitespace變量定義
* rtrim的效果與new RegExp("^" + whitespace + "+|" + whitespace + "+$", "g")相似
*/
return select(selector.replace(rtrim, "$1"), context, results, seed);
}
各位朋友,若覺得寫得不錯,幫我頂一下,給點動力,多謝!
相關(guān)文章
jquery實現(xiàn)浮動在網(wǎng)頁右下角的彩票開獎公告窗口代碼
這篇文章主要介紹了jquery實現(xiàn)浮動在網(wǎng)頁右下角的彩票開獎公告窗口代碼,涉及jquery窗體的彈出及隱藏相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法
這篇文章主要介紹了jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法,結(jié)合實例形式分析了通過設(shè)置input的disabled屬性實現(xiàn)隱藏input提交的操作技巧,需要的朋友可以參考下2019-10-10
jQuery去掉字符串起始和結(jié)尾的空格(多種方法實現(xiàn))
去掉字符串起始和結(jié)尾的空格在實際應(yīng)用中時很常見的的功能,本教程以多種方法為大家介紹下去掉空格的方法,感興趣的朋友可以參考下哈2013-04-04
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼,需要的朋友可以參考下2012-02-02

