jQuery階層セレクター

//1. 子孫: space

  $('li a').addClass('green')

//2. すべての子要素>

//ulの子要素liの前景色のみが赤くなり、孫要素のテキストは変更されません。

$('ul > *').addClass('red')

/ /スペースで区切ると、

の前景色がすべて変わります

$('ul  *').css('color','red')

//3 隣接する兄弟要素 +

は、6 番目の前の li の次の兄弟になります。 li 景色が緑色に変わります

$('li:nth-child(5) + li').addClass('green')

//4. すべての兄弟要素~

$('li:nth-child(5) ~ li').addClass('green')

//5. 最初と最後の要素

  $('li:first-child').addClass('green')
  $('li:first').addClass('green')
  $('li:last-child').css('color','red')
  $('li:last').css('color','red')

//7. 以上を選択します。特定のシリアル番号より小さい要素

//最初にすべての要素のクラスを削除します

  $('li:nth-child(6)').addClass('red')
  //jquery使用eq(i),i从0开始,注意与css中的不一样
  $('li:eq(5)').addClass('red')

//li の下の a を除いて li のみを削除します。リンクは緑色のままです

  $('*').removeClass()

//シリアル番号より大きい要素をすべて選択します4 より大きい場合、計算は 0 から始まることに注意してください

  $('li').removeClass()

// 8 未満のシリアル番号を持つすべての要素を選択します

$('li:gt(3)').addClass('red')

// シリアル番号の特性に基づいて要素を選択します

// 偶数のシリアル番号を持つすべての要素を選択します Even

/ /0、0、2、、4 から始まるので、奇数を選択したように見えますので、ご注意ください

$('li:lt(7)').addClass('red')

//奇数を選択するということは奇数を意味すると推測しているかもしれません。そうだよ

そうだね

以上がjQuery階層セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。