JavaScript フレームワーク: jQuery セレクターの習得チュートリアル

jQuery は他のライブラリに比べて簡単に始められ、習得も簡単ですが、完全にマスターするのは簡単ではありません。これには Web 開発のあらゆる側面が含まれるため、何千ものメソッドと内部バリエーションが提供されています。初心者は、始めるのは簡単だが上達するのは難しいと感じることがよくあります。この記事の目的は、jQuery セレクターを体系的に整理し、jQuery の設計思想を明確にし、学習の背景を明らかにして、読者が初心者から熟練者に移行できるようにすることです。
jQuery とは

簡単に言うと、jQuery は JavaScript フレームワークであり、その目的は、記述するコードを減らして、より多くのことを実行することです。 Web 開発者にとって、jQuery は、AJAX インタラクション、JavaScript アニメーション効果などの関連アプリケーションをより迅速に開発できる強力な JavaScript ライブラリです。 Web デザイナーにとって、jQuery は Javascript ソース コードの詳細をカプセル化し、HTML タグから効果的に分離できるため、デザイナーは Web ページのデザイン効果にさらに集中できるようになります。これに基づいて、Web ページのインタラクティブ性、視覚効果などを含め、Web ページのユーザー エクスペリエンスが大幅に向上します。

jQuery の中心的な設計思想は、Web ページ要素を選択し、それに対して何らかの操作を実行することです。では、特定の Web ページ要素を選択して配置するにはどうすればよいでしょうか? JavaScript 開発者にとって一般的なメソッドは document.getElementById() です。 jQuery 構文では、ドル記号 "$" が使用され、同等の選択式は次のように記述されます:

var someElement = $("#myId");
jQuery が "jQuery" と呼ばれる主な理由は次のとおりです。強力なセレクター。これが Javascript クエリの意味です。以下では、jQuery セレクターに関連する設計アイデアを詳しく紹介します:

1. jQuery の基本セレクター

前述したように、セレクターは jQuery の機能です。 jQueryの基本的なセレクターは主に以下の5種類に分かれます:

1. $("#myId") // ID myIdを持つWebページ要素を選択

2. $("tag name") // 例えば$ ( "div") は、HTML ドキュメント内のすべての div 要素の jQuery オブジェクトのコレクションを取得します

3. $(".myClass") // HTML ドキュメント内のクラス "myClass" を持つすべての要素のコレクションを取得します

4 . $(“*”) // HTML文書内のすべての要素を取得します

5. $(“selector1,selector2,selector3…selectorN “) // このタイプのセレクターはグループセレクターと呼ばれます。例: $("span,#two")

// すべてのspanタグ要素とid=twoの要素を選択します。

2. jQuery階層セレクター

jQueryセレクターを通じて取得されるjQueryオブジェクトは、どの時点でも要素の集合です。 jQueryの階層セレクターは主に以下の2種類に分かれます:

1. $("ancestor子孫"): 親要素以降の子要素をすべて選択します。アンセスターは中国語で「祖先」を意味し、ディセンダントは中国語で「子孫」を意味します。例:

$("body div") は、body 要素の下にあるすべての div 要素を選択します。

$(“div#test div”) idが「test」のdivに含まれるdivの子要素を全て選択します

2. $(“parent > child”): 親要素のchild以降の最初の要素を全て選択します要素。例:

$(“body > div”) は、body 要素の下にあるすべての第 1 レベルの div 要素を選択します。

$(“div#test > div”) IDが「test」のdivに含まれる第1レベルのdivサブ要素をすべて選択します
3. jQueryフィルターセレクター

最も基本的なjQueryフィルターセレクターは次のとおりです:

1. :first // 最初の要素を選択します。 $("div:first") はすべての div 要素の中から最初の div 要素を選択します

2. :last // 最後の要素を選択します。 $("div:last") はすべての div 要素のうち最後の div 要素を選択します

3. :even // インデックスが偶数である要素をすべて選択します。 $("input:even") は、インデックスが偶数である入力要素を選択します。

4. :odd // インデックスが奇数である要素をすべて選択します。 $("input:odd") は、インデックスが奇数である入力要素を選択します。

5. :eq(index) // インデックスがindexと等しい要素を選択します。 $("input:eq(1)") は、インデックスが 1 に等しい入力要素を選択します。

6. :gt(index) // インデックスより大きいインデックスを持つ要素を選択します。 $("input:gt(1)") は、インデックスが 1 より大きい入力要素を選択します。

7. :lt(index) // インデックスより小さいインデックスを持つ要素を選択します。 $("input:lt(3)") は、インデックスが 3 未満の入力要素を選択します。

jQuery コンテンツ フィルター セレクターは、DOM ドキュメント内のテキスト コンテンツを簡単にフィルターして、必要な要素を正確に選択できます。

1. :contains(text) // テキストコンテンツを含む「text」要素を選択します。 $("div:contains('you')") は、テキスト「you」を含む div 要素を選択します。

2. :empty // 子要素やテキストを含まない空の要素を選択します。 $("div:empty") は、子要素 (テキスト要素を含む) を含まない空の div 要素を選択します。

3. :parent // 子要素またはテキストを含む要素を選択します。 $("div:parent") は、子要素 (テキスト要素を含む) を持つ div 要素を選択します。

jQueryコンテンツフィルタリングセレクタのフィルタリングルールは、主にそれに含まれるサブ要素やテキストコンテンツに反映されていることがわかります。

jQueryの可視性フィルターセレクターの使い方は以下の通りです:

1. :hidden // 非表示の要素をすべて選択します。 $(“:hidden”) は、Web ページ内のすべての非表示要素を選択します。

2. :visible // 表示されている要素をすべて選択します。 $("div:visible") は、表示されているすべての div 要素を選択します。

jQuery属性フィルタセレクタのフィルタリングルールは、要素の属性を通じて対応する要素を取得することです。

1. [attribute] // この属性を持つ要素を選択します。 $("div[id]") は属性 id を持つ要素を選択します。

2. [attribute=value] // 属性値がvalueである要素を選択します。 $("div[name=test]") は、属性名の値が「test」である div 要素を選択します。

3. [attribute!value] // 属性値が value と等しくない要素を選択します。

4.[attribute^=value] //属性値がvalueで始まる要素を選択します。

5. [attribute$=value] // 属性値が value で終わる要素を選択します。

6. [attribute*=value] // 属性値にvalueが含まれる要素を選択します。

7. [selector1] [selector2] [selectorN] //複合属性セレクター。 $("div[id][name*=test]") は、属性 ID を持ち、属性名の値に "test" が含まれる div 要素を選択します

jQuery のサブ要素フィルタリング セレクターのフィルタリング ルールは少し異なります他のセレクターに比べてやや複雑です。

1. :nth-child(index/even/odd/equation) // 各親要素の下にある、index 番目の子要素または奇数偶数要素を選択します。

2. :first-child // 各親要素の最初の子要素を選択します

3. :last-child // 各親要素の最後の子要素を選択します

jQuery フォームオブジェクトの属性フィルターセレクター 主に、選択されたフォーム要素 (使用できないフォーム要素の選択、選択されたドロップダウン ボックス、複数選択ボックスなど)。

1. :enabled // 利用可能なフォーム要素をすべて選択します。 $("#form1 :enabled") は、ID "form1" を持つフォーム内の使用可能な要素をすべて選択します。

2. :disabled // フォーム要素をすべて無効にします。

3. :checked // 選択された要素をすべて選択します。 $("input:checked") は、選択されたすべての要素を選択します。

4. :selected // 選択されたオプション要素をすべて選択します。 $("select :selected") は、選択されたすべてのオプション要素 (option) を選択します。

jQueryにフォームセレクターが導入され、フォーム内の特定の要素や要素の種類を簡単に取得できるようになりました