jquery_jquery の複数条件セレクター、相対セレクター、階層セレクターの違い

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

1. :first、$("div:first") などの最初の要素を選択します。最初の div 要素を選択します。

2. :last、最後の要素を選択します (例: $("div:last") 最後の div 要素を選択します

3. :not (selector)、「selector」条件を満たさない要素を選択します, たとえば、$("div:not(.className)") は、スタイルが className

ではないすべての div 要素を選択します。 4. :even/:odd、偶数/奇数のインデックスを持つ要素を選択します。 $("div :even")、偶数のインデックス番号を持つすべての div 要素を選択します

5、:eq (インデックス番号)/:gt (インデックス番号)/:lt (インデックス番号)、と等しいものを選択しますインデックス番号 / インデックスより大きい 番号 / インデックス番号より小さい要素 (例: $("div:lt(3)") は、インデックス番号が 3 より小さいすべての div 要素を選択します

注: 混合使用

フィルター セレクターの後続のフィルター条件は、前のフィルター セレクターによるフィルター後の再番号付けに基づいていることに注意してください。つまり、フィルター処理は

のように段階的に行われます。 $("#t1 tr:gt(0):lt (3)").css("fontSize", "28"); //lt(3) は gt(0) からの新しいシーケンスのシリアル番号です。 lt(4)





2 番目にフォーカス

複数条件セレクター
複数条件セレクター: $( "p,div,span,menuitem")、p タグ、div タグ、および menuitem スタイル
の spam タグ要素を同時に選択します。セレクター式にはスペースを増減できないことに注意してください。これは簡単です間違いを犯すこと！

相対セレクター

$() で 2 番目のパラメーターを指定している限り、2 番目のパラメーターは相対要素です。たとえば、HTML コードは次のとおりです:

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

td>dsfdef ;/tr> ;td>dsds

dsds

dsfdef

td $("td", $(this)).css("background ", "red") の背景色を操作する次の JS コード。このコードは相対セレクターを使用し、選択された td は相対です。現在の tr 要素。選択された td 要素は現在の tr 要素の下にあるすべての td 要素であり、他の行に関与する td 要素はありません コードをコピー コードは次のとおりです。 $(function () { $("#table1 tr") .click(function () { $("td", $(this)).css("background", "red"); }); /script> レベル セレクター: 1 $("#div li") div の下のすべての li 要素を取得します (子孫、子、子の子...) 2 $( "#div > li") div 直下の li 子要素を取得します // スペースに注意してください 3 $(".menuiitem div") スタイル名 menuitem の後の最初の div 要素を取得しますこれは一般的には使用されません。 3 $(".menuitem ~ div") は、一般的には使用されないスタイル名 menuitem の後のすべての div 要素を取得します。 詳細の違いは (エラーが発生しやすい点): 複数条件セレクター: $("p,div,span,menuitem")、相対セレクター: $("td", $( this) ).css("background", "red")"、階層セレクター: $("#div li") div の下のすべての li 要素を取得します (子孫、子、子の子....) 3 つの違いは次のとおりです。 複数条件セレクター: "" 内のカンマで区切られます。 相対セレクター: 2 つの要素が区切られます。 レベルセレクターは「」内のスペースで区切られます。