对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。
若需要转载,请写明出处,多谢。
/* * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点 * 该方法主要完成下列任务: * 1、对于单一选择器,且是ID、Tag、Class三种类型之一,则直接获取并返回结果 * 2、对于支持querySelectorAll方法的浏览器,通过执行querySelectorAll方法获取并返回匹配的DOM元素 * 3、除上之外则调用select方法获取并返回匹配的DOM元素 * * * @param selector 选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素集合)。若context没有赋值,则取document。 * @param results 已匹配出的部分最终结果。若results没有赋值,则赋予空数组。 * @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不是有效地字符串类型数据,则直接返回results */ if (!selector || typeof selector !== "string") { return results; } /* * 若context既不是document(nodeType=9),也不是element(nodeType=1),那么就返回空集合 */ if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) { return []; } // 若当前过滤的是HTML文档,且没有设定seed,则执行if内的语句体 if (documentIsHTML && !seed) { /* * 若选择器是单一选择器,且是ID、Tag、Class三种类型之一,则直接获取并返回结果 * * rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/ * 上述正则表达式括号内三段依次分别用来判断是否是ID、TAG、CLASS类型的单一选择器 * 上述正则表达式在最外层圆括号内有三个子表达式(即三个圆括号括起来的部分), * 分别代表ID、Tag、Class选择器的值,在下面代码中,分别体现在match[1]、match[2]、match[3] */ if ((match = rquickExpr.exec(selector))) { // Speed-up: Sizzle("#ID") // 处理ID类型选择器,如:#ID if ((m = match[1])) { // 若当前上下文是一个document,则执行if内语句体 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当作ID来处理, * 返回不正确的结果,所以需要再一次对比返回节点的ID属性 */ if (elem.id === m) { results.push(elem); return results; } } else { return results; } } else { // Context is not a document /* * contains(context, elem)用来确认获取的elem是否是当前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 当前上下文节点有getElementsByClassName方法 * */ } else if ((m = match[3]) && support.getElementsByClassName && context.getElementsByClassName) { push.apply(results, context.getElementsByClassName(m)); return results; } } // QSA path /* * 若浏览器支持querySelectorAll方法且选择器符合querySelectorAll调用标准,则执行if内语句体 * 在这里的检查仅仅是简单匹配 * 第一次调用Sizzle时,rbuggyQSA为空 * * if语句体内对当前context对象的id的赋值与恢复,是用来修正querySelectorAll的一个BUG * 该BUG会在某些情况下把当前节点(context)也作为结果返回回来。 * 具体方法是,在现有的选择器前加上一个属性选择器:[id=XXX], * XXX 为context的id,若context本身没有设置id,则给个默认值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用于判定选择器是否存在兄弟关系符 * 若包含+~符号,则取context的父节点作为当前节点 */ newContext = rsibling.test(selector) && context.parentNode || context; newSelector = groups.join(","); } if (newSelector) { /* * 这里之所以需要用try...catch, * 是因为jquery所支持的一些选择器是querySelectorAll所不支持的, * 当使用这些选择器时,querySelectorAll会报非法选择器, * 故需要jquery自身去实现。 */ try { // 将querySelectorAll获取的结果并入results,而后返回resulsts push.apply(results, newContext .querySelectorAll(newSelector)); return results; } catch (qsaError) { } finally { if (!old) { context.removeAttribute("id"); } } } } } // All others // 除上述快捷方式和调用querySelectorAll方式直接获取结果外,其余都需调用select来获取结果 /* * rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" * + whitespace + "+$", "g"), * whitespace = "[\\x20\\t\\r\\n\\f]"; * 上述rtrim正则表达式的作用是去掉selector两边的空白,空白字符由whitespace变量定义 * rtrim的效果与new RegExp("^" + whitespace + "+|" + whitespace + "+$", "g")相似 */ return select(selector.replace(rtrim, "$1"), context, results, seed); }
各位朋友,若觉得写得不错,帮我顶一下,给点动力,多谢!

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

SublimeText3 中国語版
中国語版、とても使いやすい

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

ホットトピック









