はじめてのJQuery (1) jqueryセレクターの必須知識のポイント_jquery

この章の内容は、私が開発でよく使うセレクタを例に説明していますが、もっとよく使われる簡単な例があれば、ぜひご回答いただき、ディスカッションに参加して、一緒に勉強してください。一般的に使用される CSS セレクターを使用します。

CSS セレクターには、ワイルドカード セレクター、ID セレクター、属性セレクター、包含セレクター、クラス セレクターなどが含まれます。それらの基本形式は次のとおりです:

ワイルドカード セレクター: $ ("#ID *") はすべてを意味しますこの要素の下にある要素。

ID セレクター: $("#ID") は、指定された ID を持つ要素を取得することを意味します。

属性セレクター: $("input[type=text]") は、type 属性が text であるすべての入力要素を示します。

セレクターが含まれます: $("ul li a") は、ul 要素の下にあるすべての li 要素内のすべての a 要素を表します。

クラス セレクター: $(".Class") は、クラス スタイルを参照するすべての要素を表します。

もちろん、これらのセレクターは一緒に使用できます。たとえば、$("#ID input[type=text]") は、指定された ID 要素の下の type 属性を持つすべての入力要素を表します。文章。 $("ul li").addClass("Class") や $("ul > li").addClass("Class") など、JQuery の微妙な変更は非常に興味深いものであり、それらが示す効果は異なります。 1 つ目は ul の下のすべての li 要素にスタイルを追加することであり、2 つ目は ul の下の最初の li 要素にスタイルを追加することです。より具体的な使用方法については、自分でテストできます。

") は、要素内の title 属性を持つすべての要素を選択することを意味します。

$("[@title^=t]") は、すべての属性 title 値が t で始まる要素であることを意味します。

$("[@title$=t]") は、すべての属性 title 値が t で終わる要素であることを意味します。
$("[@title*=t]") は、すべての属性 title 値が t を含む要素であることを意味します。

XPath セレクターは CSS セレクターと同じであり、複数の XPath セレクターを一緒に使用したり、CSS セレクターと一緒に使用したりできるため、必要な要件を達成したい場合は、JQuery メソッドを使用します。たくさんの種類があります。

カスタム セレクターとは、コロン (:) で始まるセレクターのことであり、頻繁に使用される gt()、:eq()、:odd、などについては触れません。 :even、これらは :odd や :even など、最も一般的に使用されるものです。通常、これらはストライプ スタイルのテーブルを作成するために使用されます。使用方法は $("#table tr:odd ") のように非常に簡単です。 addClass("odd") と $("#table tr:even").addClass("even") は、2 行のコードを使用するだけで、必要なストライプ スタイルを作成します。

もちろん、実際の開発では、通常、

$("#table td:contains('Window window')") のようなセレクターと DOM トラバーサル メソッドを使用して操作します。 parent().find("td:gt(0)").addClass("highlight")

このコードは、「Window window」セルを取得し、その親要素を取得して、これを見つけることを意味します。要素には、0 より大きい数値を持つすべてのセルが含まれます。もちろん、一部のメソッドは簡略化できます。ここでは JQuery の連結効果を示したいだけです。この形式は通常次のように記述します。

$("#table td:contains( ') Window window')")
.parent() // 親を取得
.find("td") // td要素を検索
.not(":contains('Window window')" ) //ウィンドウではない要素
.addClass("highlight"); //スタイル

を追加して分割し、後でマークして読みやすくします。

以下に、実際の開発で最も一般的に使用されるコードをいくつか示します (続行するには遅すぎるため)。

$("input[type='text']" ) .val(''); //テキスト ボックスをすべてクリアします
$("#text input:text").val('');//テキスト要素の下のテキスト ボックスをすべてクリアします

// 選択されているすべての CheckBox の値を取得します

$("input:checkbox:checked").each(function() {
alert($(this).val());
}) ;

$("select option:selected").val()//選択されたドロップダウン ボックスの値を取得します

$("select option:selected" ).text()// 選択されたドロップダウン ボックスのテキストを取得します

JQuery セレクターについての私の理解はここで終わりです。興味のある友人はディスカッションに参加することを歓迎します。続く...


デモパッケージのダウンロード