jQuery階層セレクター

无忌哥哥
リリース: 2018-06-29 11:11:21
オリジナル
1850 人が閲覧しました

//1. 子孫: space

  $('li a').addClass('green')
ログイン後にコピー

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

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

/ /スペースで区切ると、
  • の前景色がすべて変わります

    $('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 サイトの他の関連記事を参照してください。

  • ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート