jqueryセレクター事典 jquery selector_jqueryの包括的かつ詳細な説明

セレクターには固定された定義がありません。jQuery のセレクターは、スタイル シートのセレクターとある程度似ています。セレクターには次の特徴があります:
1.コード記述を簡素化する
2.暗黙的な反復
3.オブジェクトが存在するかどうかを判断する必要はありません
ここで、「$」はセレクタの必須部分です。jQuery ライブラリでは、$("#foo") や jQuery(" など) が jQuery の略称です。 #foo") 同様に、$.ajax と jQuery.ajax も同等です。特別な指示がなければ、プログラム中の$記号はjQueryの略称と理解していただければと思います。
これで、正式に jQuery セレクターの研究に入ります。セレクターは、機能の習慣に従って分類され、読者がそれらを習得できるように、さまざまなタイプの分類子が以下に分類され、それぞれ説明されます。
1. 基本セレクター
基本セレクターには、#id、element、.class、* および selectorl、selector2.selectorN の 5 種類のセレクターが含まれます。セレクターの役割とその使用方法。
1． #id selector
#id セレクターは、指定された ID に基づいて要素と一致します。セレクターに特殊文字が含まれている場合は、2 つのスラッシュでエスケープでき、戻り値は Array になります。
2．要素セレクター
要素セレクターは、検索に使用される要素です。 DOM ノードを指すタグ名。戻り値は Array です。
3．クラス セレクター
。クラス セレクターは、指定されたクラスに基づいて要素と一致し、検索するクラスです。要素は複数のクラスを持つことができます。一致するものが 1 つある限り、その要素は Array と一致します。

例:

コードをコピー コードは次のとおりです:

< ;input type="text" id="ID" value="ID に基づいて選択" />
要素名に基づいて選択

jQuery("#ID").val();
jQuery("a").text( );
jQuery(".classname").val();

はそれぞれ要素の値を取得できます。上記の 3 つは最も一般的なセレクターであり、その中で ID セレクターが最も効率的であるため、可能な限り使用する必要があります。

4. *セレクター
* セレクターは主にコンテキスト内で検索し、すべての要素に一致するために使用されます。戻り値は Array です。
5． selector1, selector2, selectorN selector
このタイプのセレクターは、各セレクターで一致した要素を結合し、まとめて返します。任意の数のセレクターを指定し、一致した要素を 1 つの結果にマージできます。戻り値は Array です。次の例では、選択した項目に対して CSS 操作を実行することで、読者は selector1、selector2、および selectorN の機能を明確に理解できます。
2. レベル セレクター
レベル セレクターには、祖先、子孫、親 > 子、前へ、次へ、前へ ~ 兄弟の 5 つの形式が含まれます。以下では、例を使用して、各セレクターの役割と使用法を詳しく紹介します。
1．先祖子孫セレクター
は、指定された祖先要素の下にあるすべての子孫要素のマッチングを指します。パラメーターとしての先祖は、任意の有効なセレクターを表します。一方、子孫は、要素のマッチングに使用されるセレクターであり、最初のセレクターの子孫です。 。戻り値は Array です。
2．親>子セレクター
親>子セレクターは、指定された親要素の下にあるすべての子要素と一致することを意味します。 2 つのパラメータの意味は次のとおりです。親は任意の有効なセレクタを表し、子は要素の一致に使用されるセレクタであり、最初のセレクタの子要素です。戻り値は Array です。
3． prev next セレクター
このタイプのセレクターは、prev 要素の直後にあるすべての next 要素と一致するために使用されます。 2 つのパラメータの意味は次のとおりです。prev は任意の有効なセレクタを表し、next は最初のセレクタの直後にある有効なセレクタを表します。戻り値は Array です。
4. prev ~ 兄弟セレクター
prev ~ 兄弟セレクターは、prev 要素と一致した後のすべての兄弟要素を表します。 2 つのパラメーターの意味は次のとおりです: prev は任意の有効なセレクターを表し、sisters はセレクターを表し、最初のセレクターの兄弟として機能します。戻り値は Array です。

例:

コードをコピー コードは次のとおりです:

" />
1
2

//div 内の a タグの内容を取得した結果は 12
jQuery(" #divTest a").text();
//出力 div は直接出力されます子ノードの結果は、investment
jQuery("#divTest>input").val();
//出力 ID は次です。同じレベルの後の要素の結果は、Responsibility
jQuery(" #next input").val();
//上記と同様、title 要素の結果は Study
jQuery("#next~[ title]").val();


3. フィルター セレクター

フィルター セレクターは、主に特定のフィルター ルールと CSS を通じて必要な DOM 要素をフィルターします。つまり、疑似クラス セレクターの構文は同じです。セレクターはすべてコロンで始まります。 フィルター セレクターは合計 6 種類と多くの内容を含みますが、分類することができます。以下では、さまざまな種類のセレクターについて詳しく説明します。
1．基本フィルター セレクター

基本フィルター セレクターは、最も一般的に使用されるタイプのフィルター セレクターであり、ここで詳しく説明されている次の形式が含まれます。 (1): 最初/: 最後のセレクター。
(2): セレクターではありません。 (3):even および :odd セレクター。
(4):eq:gt、:lt、セレクター。
(5): ヘッダーセレクター。
(6):アニメーションセレクター。
例:

コードをコピー コードは次のとおりです:

& li gt; 成熟しました & lt;/lt;/lt;/lt;/lt;/lt; 私 & gt;

🎜>

//最初の li コンテンツの結果は投資です
jQuery("li:first").text() ;
//最後の li コンテンツの結果は責任があります
jQuery("li:last").text();
//未選択の値を入力した結果は学習されません
jQuery(" li input:not(:checked)").val();
//偶数の li の結果は投資満期です
jQuery("li:even").text();
// 奇数の li の結果は財務マネージャーです
jQuery("li:odd").text();
//インデックスが 2 より大きい li の内容は、財務マネージャーの結果です
jQuery("li:gt( 2 )").text();
//インデックスが 1 未満の li の内容は投資になります
jQuery("li:lt(1)").text();


2. コンテンツ フィルタリング セレクタ

コンテンツ フィルタリング セレクタには、主に、contains、:empty、:has、および :parent の 4 種類のフィルタが含まれています。フィルタのこの部分は、基本的なフィルタリングを補完します。上記で紹介したセレクターの他に、ページの選択や設定要素の表示などで重要な役割を果たします。各セレクターについては、以下で詳しく紹介します。
(1): セレクターが含まれます。
(2): 空のセレクター。
(3): セレクターがあります。
(4): 親セレクター。

例:


コードをコピー


コードは次のとおりです:

" > hyip 投資の結果は hyip jQuery("li:contains('hyip')").text(); //コンテンツは空の li の次の li です。コンテンツの結果は財務管理です。jQuery("li:empty li").text();//li のコンテンツの結果には、タグは、investmentjQuery("li:has(a)") .text();です。
3．可視性フィルター セレクター
可視性フィルター セレクターは比較的単純で、主にすべての表示要素と非表示要素を一致させるために使用されます。これら 2 つのセレクターについては、以下で詳しく紹介します。
(1): 非表示のセレクター。
(2): 表示されるセレクター。

例:

コードをコピー コードは次のとおりです。

• Visible


• Invisible

//Invisible li コンテンツresult is unavailable
jQuery("li:hidden").text();
//visible li のコンテンツ結果はvisible
jQuery("li:visible").text() ;

4．属性フィルター セレクター
属性フィルター セレクターは、特定の属性を含む要素を照合するために使用されます。もちろん、この属性を含まない要素を照合することもできます。属性フィルター セレクターには、次の 7 つのセレクターが含まれます。
(1) [属性]セレクター。
(2) [attribute=value]、[attribute!=value] セレクター (ここには 2 種類が含まれます)。
(3) [attribute^=value]、[attribute$=value]、[attribute*=value] セレクター (ここには 3 種類が含まれています)。
(4)[セレクター][セレクター2]セレクター。
例:

コードをコピー コードは次のとおりです:

<入力タイプ="text " name="hyipinvest" value="hyip 投資" />

<入力タイプ="text " name="google" value="HYIP" />
//name の値は hyipinvest で、結果は hyip Investment
alert(jQuery("input[name='hyipinvest'] ").val() );
//hyip で始まる name の値は hyip Investment になります
alert(jQuery("input[name^='hyip']").val());
//hyip で始まる名前 最後の値の結果は投資です hyip
alert(jQuery("input[name$='hyip']").val());
//を含む名前の値oo の結果は HYIP
alert( jQuery("input[name*='oo']").val());

5.サブ要素のフィルター セレクター
html は、レイヤーごとにネストされたタグで構成されます。一部のタグは個別に処理する必要があるため、プログラム内で 1 つまたはいくつかの特定のネストされたタグを選択する方法が問題になります。 jQuery は、この問題を解決するために子要素フィルター セレクターを提供します。 4 つのセレクターが含まれています。具体的な内容は以下で詳しく説明します。
(1):n 番目の子セレクター。
(2):first-child、:last-child セレクター (2 種類)。
(3): 唯一の子セレクター。
6．フォーム オブジェクト属性フィルター セレクター
この部分は非常に単純で、4 種類のセレクターのみが含まれています。これらのセレクターは、使用可能な要素、使用できない要素、選択された要素などを照合するために使用されます。内容のこの部分については、例を挙げて以下に説明します。
(1):有効、:無効セレクター。
(2): チェックされたセレクター。
(3): 選択されたセレクター。
フォーム フィルター セレクターは、頻繁に使用されるボタン、テキスト フィールド、ラジオ ボタン、チェック ボックスなどだけでなく、めったに使用されない画像、ドメインの非表示、ファイルのアップロード、などのタグ。これらのセレクターについては、以下で詳しく紹介します。
(1): 入力セレクター。
(2):テキスト、:パスワードセレクター。
(3):ラジオ、:チェックボックスセレクター。
(4):送信、:画像、:リセット、:ボタン、:ファイルセレクター。
(5): 隠しセレクター。

クエリセレクターはここにまとめられています。これらは基本的に学習プロセスで遭遇するものであり、まだまとめられていない部分がいくつかあります。しばらく練習すれば、誰もが jQuery セレクターを上手に使いこなせるようになると思います。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。