jQuery_jquery のサブ要素フィルターセレクターの簡単な説明-jsチュートリアル-php.cn

jQuery_jquery のサブ要素フィルターセレクターの簡単な説明

WBOY

リリース： 2016-05-16 15:04:50

オリジナル

2029 人が閲覧しました

子要素フィルタのフィルタリングルールは、親要素と子要素の関係から対応する要素を取得することです。

2016418172315508.png (694×613)

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 
 
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 
 
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 
 
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 
 
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素 
 
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素

ログイン後にコピー

私たちは使い方を知っています

:first

ログイン後にコピー

フィルターセレクターは、指定された親要素の最初の子要素を取得できますが、このセレクターはコレクションではなく 1 つの要素のみを返し、
を使用します。

:first-child

ログイン後にコピー

子要素フィルターセレクターは、各親要素で返される最初の子要素を取得でき、コレクションであり、複数のコレクションデータの選択処理によく使用されます。

以下に示すように、ページ上の各 UL の最初の li を取得し、その色を変更したい場合。その後、

を使用できます。

: first-child

ログイン後にコピー

<body>
  <h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
  <ul>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ul>
  <ul>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ul>
</body>

ログイン後にコピー

<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

ログイン後にコピー

ブラウザに表示される効果:

2016418172340814.jpg (489×326)

合格

$("li:first-child")

ログイン後にコピー

セレクターコードは、2 つの

要素を取得し、
を使用します。
```
css()
```
ログイン後にコピー
メソッドは、ページに表示されるテキストの色を変更します。

jQuery_jquery のサブ要素フィルター セレクターの簡単な説明

jQuery_jquery のサブ要素フィルターセレクターの簡単な説明