jQuery選擇器源碼解讀(一):Sizzle方法
對(duì)jQuery的Sizzle各方法做了深入分析(同時(shí)也參考了一些網(wǎng)上資料)后,將結(jié)果分享給大家。我將采用連載的方式,對(duì)Sizzle使用的一些方法詳細(xì)解釋一下,每篇文章介紹一個(gè)方法。
若需要轉(zhuǎn)載,請(qǐng)寫明出處,多謝。
/* * Sizzle方法是Sizzle選擇器包的主要入口,jQuery的find方法就是調(diào)用該方法獲取匹配的節(jié)點(diǎn) * 該方法主要完成下列任務(wù): * 1、對(duì)于單一選擇器,且是ID、Tag、Class三種類型之一,則直接獲取并返回結(jié)果 * 2、對(duì)于支持querySelectorAll方法的瀏覽器,通過(guò)執(zhí)行querySelectorAll方法獲取并返回匹配的DOM元素 * 3、除上之外則調(diào)用select方法獲取并返回匹配的DOM元素 * * * @param selector 選擇器字符串 * @param context 執(zhí)行匹配的最初的上下文(即DOM元素集合)。若context沒(méi)有賦值,則取document。 * @param results 已匹配出的部分最終結(jié)果。若results沒(méi)有賦值,則賦予空數(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)前過(guò)濾的是HTML文檔,且沒(méi)有設(shè)定seed,則執(zhí)行if內(nèi)的語(yǔ)句體 if (documentIsHTML && !seed) { /* * 若選擇器是單一選擇器,且是ID、Tag、Class三種類型之一,則直接獲取并返回結(jié)果 * * rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/ * 上述正則表達(dá)式括號(hào)內(nèi)三段依次分別用來(lái)判斷是否是ID、TAG、CLASS類型的單一選擇器 * 上述正則表達(dá)式在最外層圓括號(hào)內(nèi)有三個(gè)子表達(dá)式(即三個(gè)圓括號(hào)括起來(lái)的部分), * 分別代表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)前上下文是一個(gè)document,則執(zhí)行if內(nèi)語(yǔ)句體 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 /* * 一些老版本的瀏覽器會(huì)把name當(dāng)作ID來(lái)處理, * 返回不正確的結(jié)果,所以需要再一次對(duì)比返回節(jié)點(diǎn)的ID屬性 */ if (elem.id === m) { results.push(elem); return results; } } else { return results; } } else { // Context is not a document /* * contains(context, elem)用來(lái)確認(rèn)獲取的elem是否是當(dāng)前context對(duì)象的子對(duì)象 */ 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é)點(diǎn)有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)語(yǔ)句體 * 在這里的檢查僅僅是簡(jiǎn)單匹配 * 第一次調(diào)用Sizzle時(shí),rbuggyQSA為空 * * if語(yǔ)句體內(nèi)對(duì)當(dāng)前context對(duì)象的id的賦值與恢復(fù),是用來(lái)修正querySelectorAll的一個(gè)BUG * 該BUG會(huì)在某些情況下把當(dāng)前節(jié)點(diǎn)(context)也作為結(jié)果返回回來(lái)。 * 具體方法是,在現(xiàn)有的選擇器前加上一個(gè)屬性選擇器:[id=XXX], * XXX 為context的id,若context本身沒(méi)有設(shè)置id,則給個(gè)默認(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中的單引號(hào)、豎杠、反斜杠前加一個(gè)反斜杠 * old.replace(rescape, "\\$&")代碼中的$&代表匹配項(xiàng) */ 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)系符 * 若包含+~符號(hào),則取context的父節(jié)點(diǎn)作為當(dāng)前節(jié)點(diǎn) */ newContext = rsibling.test(selector) && context.parentNode || context; newSelector = groups.join(","); } if (newSelector) { /* * 這里之所以需要用try...catch, * 是因?yàn)閖query所支持的一些選擇器是querySelectorAll所不支持的, * 當(dāng)使用這些選擇器時(shí),querySelectorAll會(huì)報(bào)非法選擇器, * 故需要jquery自身去實(shí)現(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來(lái)獲取結(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); }
各位朋友,若覺(jué)得寫得不錯(cuò),幫我頂一下,給點(diǎn)動(dòng)力,多謝!
相關(guān)文章
jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說(shuō)明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06jQuery實(shí)現(xiàn)立體式數(shù)字滾動(dòng)條增加效果
這篇文章主要介紹了jQuery立體式數(shù)字滾動(dòng)條增加的相關(guān)資料,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友可以參考下2016-12-12JQuery 兩種方法解決剛創(chuàng)建的元素遍歷不到的問(wèn)題
本文主要介紹兩種方法,處理JQuery遍歷剛創(chuàng)建的元素問(wèn)題,簡(jiǎn)單易用,希望能幫到大家。2016-04-04使用jQuery的attr方法來(lái)修改onclick值
這篇文章主要介紹了通過(guò)jQuery的attr修改onclick值的解決方法 ,需要的朋友可以參考下2014-07-07jQuery 選擇方法及$(this)用法實(shí)例分析
這篇文章主要介紹了jQuery 選擇方法及$(this)用法,結(jié)合實(shí)例形式分析了jQuery 選擇方法及$(this)相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05bootstrapValidator表單校驗(yàn)、更改狀態(tài)、新增、移除校驗(yàn)字段的實(shí)例代碼
這篇文章主要介紹了bootstrapValidator表單校驗(yàn)、更改狀態(tài)、新增、移除校驗(yàn)字段,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開發(fā)
在介紹如何擴(kuò)展jQuery之前,先大致看下jQuery源碼(以1.3.2版本為例)。2010-05-05jQuery 1.4 15個(gè)你應(yīng)該知道的新特性(譯)
jQuery 1.4 最近剛剛發(fā)布. 這個(gè)版本可不是一個(gè)簡(jiǎn)單的改進(jìn),它不僅包含了很多新的特性,還改進(jìn)了很多功能, 更在性能優(yōu)化方面下了很大功夫, 本文將對(duì)這些新的特性和增強(qiáng)的部分進(jìn)行討論,希望能對(duì)你有所幫助.2010-01-01