2008-08-25 1 views
22

私はかなりの場所でJohn Resig's fast new selector engine named Sizzleのポップアップのニュースを見たことがありますが、私はセレクタエンジンが何であるかわからないし、それが何であるかの説明を与えられた記事もありません。私はResigがjQueryの作成者であり、SizzleはJavascriptの何かであることを知っていますが、それを超えて私はそれが何であるか分かりません。セレクタエンジンとは何ですか?セレクタエンジンとは何ですか?

ありがとうございます!

答えて

46

セレクタエンジンは、特定の種類のクエリ(通常はCSS構文など)に基づいてページのDOMにクエリを実行するために使用されます。例えば

、このjQueryの:

$('div') 

を検索し、ページ上のdiv < >のすべての要素を返します。それはjQueryのセレクタエンジンを使って行います。

セレクタエンジンを最適化することは、これらのフレームワークで実行するほとんどすべての操作が何らかのDOMクエリに基づいているため、大したことです。

2

また、Sizzleは、John Resigが現在jQueryの素晴らしいセレクタエンジンを置き換えるために現在取り組んでいるエンジンです。

18

セレクタエンジンは、DOMツリー内の要素を識別するための文字列を使用してDOMツリー内の要素を選択できるJavaScriptライブラリです(DOM要素の正規表現を考える)。クラスfirstParagraphた、ドキュメント内にあるすべてのP要素を選択するために

var paragraphs = selectorengine.select('p.firstParagraph') 

:ほとんどのセレクタエンジンはその構文CSS3セレクタのいくつかのバリエーションを使用して、例えば、次のような何かを書くことができます。

一部のセレクタエンジンでは、XPathの一部の実装やカスタム構文もサポートしています。たとえば、jQueryを使用すると、次のように記述できます。

var checkedBoxes = jQuery('form#login input:checked') 

文書のログインフォームでチェックボックスをすべてオンにするには:

+0

私はあなたのページに "js"ファイルを含める必要があると思います。 JQueryやその他のライブラリが必要ですか? – Tebo

6

セレクタエンジンは、特定の要素を探してDOMをトラバースする方法です。

セレクタエンジンに内蔵の例:

var foo = document.getElementById('foo'); 
+0

いい例の 'built-in selector engine'に感謝します。私はいくつかの解答を読んで、依然として自分自身に' getElementById'を呼びます。これはセレクタエンジンかどうかです(そうですが、 – hqt

1

セレクタエンジンはCSSスタイルシートが行うのと同じように、文書内の要素を見つけるために使用されます。現時点では、Safariだけに組み込みのquerySelectorAll関数が用意されています。他のブラウザでは、代わりにLlamaLab SelectorまたはSizzleとして外部JavaScript実装を使用する必要があります。

関連する問題