ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery のサブ要素フィルター セレクターの簡単な説明
jQuery_jquery のサブ要素フィルター セレクターの簡単な説明
- WBOYオリジナル
- 2016-05-16 15:04:502018ブラウズ
子要素フィルタのフィルタリングルールは、親要素と子要素の関係から対応する要素を取得することです。
$('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>
ブラウザに表示される効果:
合格
$("li:first-child")
セレクター コードは、2 つの
- 要素の最初の
- 要素を取得し、
を使用します。css()
メソッドは、ページに表示されるテキストの色を変更します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。