jQuery_jquery의 하위 요소 필터 선택기에 대한 간략한 설명
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-05-16 15:04:502103검색
자식 요소 필터의 필터링 규칙은 상위 요소와 하위 요소 간의 관계를 통해 해당 요소를 구하는 것입니다.
$('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
필터 선택기는 지정된 상위 요소에서 첫 번째 하위 요소를 가져올 수 있지만 이 선택기는 컬렉션이 아닌 요소 하나만 반환하고
을 사용합니다.
: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")
선택기 코드는 두 개의
- 요소 중 첫 번째
-
메소드는 페이지에 표시되는 텍스트 색상을 수정합니다.css()
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.