jqueryで一般的に使用されるいくつかのセレクターの使用例の違い

1. Jquery で一般的に使用されるフィルター セレクターは次のとおりです:

1、:first、最初の要素を選択します。たとえば、$("p:first") は最初の p 要素を選択します
2、:last 、最後の p 要素を選択するには $("p:last") のように最後の要素を選択します
3. :not (selector)、$("p: など) "selector" 条件を満たさない要素を選択しますnot(.className)")、スタイルが className
4 ではないすべての p 要素を選択します。 :even/:odd、$("p:even") など、indexが偶数/奇数である要素を選択し、すべて選択しますインデックス番号が偶数の要素 p 要素
5、:eq (インデックス番号)/:gt (インデックス番号)/:lt (インデックス番号)、インデックス番号と等しい/インデックス番号より大きい/インデックスより小さい要素を選択$("p:lt(3 )") などの数値を指定すると、インデックス番号が 3 未満のすべての p 要素が選択されます
注:
混合フィルター セレクターを使用する場合は、後続のフィルター条件が次の順序に基づいていることに注意してください。前のフィルター セレクター、つまりフィルターされたレベル (
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); ) は gt(0) からの新機能です シーケンス内のシリアル番号を lt(4) として記述することはできません

二番目、重要な点
1. 複数条件セレクター
複数条件セレクター: $("p,p,span ,menuiitem")、pタグとpタグを同時に選択、そしてmenuitemスタイルのspanタグ要素
セレクター式内のスペースの数に注意してください。間違いやすいです！

2. 相対セレクター
$() の 2 番目のパラメーターを指定するだけです。2 番目のパラメーターは相対要素です。例えばHTMLコードは以下の通りです

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table>

すると、以下のjsコードを使ってtdの背景色を操作できます
$("td", $(this)).css("background", "red ")、このコードが使用されます。これは相対セレクターです。選択された td は、現在の tr 要素に対して相対的です。選択された td 要素は、現在の tr 要素の下にあるすべての td 要素であり、他の行の td 要素は関与しません。

<script type="text/
javascript
"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

3. 階層セレクター:
a $("#p li") は p の下のすべての li 要素を取得します (子孫、子、子の子....)
b $("#p > li" ) p の下に直接 li 子要素を取得します。 // スペースに注意してください
c $(".menuitem + p") スタイル名 menuitem の後の最初の p 要素を取得します。これは一般的には使用されません。
d $(".menuitem ~ p") は、一般的には使用されないスタイル名 menuitem の後のすべての p 要素を取得します。
細部の違い（エラーが起こりやすい点）：
複数条件セレクター：$("p,p,span,menuitem")、相対セレクター：$("td", $(this)).css("背景" , "赤")"、階層セレクター: $("#p li") p の下のすべての li 要素を取得します (子孫、子、子の子...)

3 つの違いは次のとおりです:
1.複数条件セレクター: "" 内でカンマで区切られます。
2. 相対セレクター: 2 つの要素で区切られます。
3. 階層セレクター: "" 内でスペースで区切られます。

サンプル コードは次のとおりです。

以上がjqueryで一般的に使用されるいくつかのセレクターの使用例の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。