jQuery 하위 요소 필터
' : eq(index)'는 하나의 요소에만 일치하는 반면, 이는 모든 상위 요소에 대한 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다! :n번째-자식(홀수) :n번째-자식(3n)
다음을 사용할 수 있습니다.
| :n번째-자식(3n+1) | :nth - child(3n+2)각 ul에서 두 번째 li 찾기: | $("ul li:nth-child(2)")|
| :first-child | 첫 번째 자식과 일치 요소 ':first'는 하나의 요소에만 일치하며 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.
| 는 마지막 하위 요소와 일치합니다 |
| 각 ul에서 마지막 li 찾기: $("ul li:last-child") | :only-child | |
| 상위 요소에 다른 요소가 포함된 경우, 일치하지 않습니다. | ul에서 유일한 하위 요소인 li를 찾으세요. | 참고: 1. :nth-child(index)는 1부터 시작하고 eq(index)는 0부터 시작합니다. 즉, $("ul li:nth-child(0)"). "color","red")는 일치하는 요소를 가져올 수 없으며 1, 즉 $("ul li:nth-child(1)").css("color","red" ) 및 eq( 0)을 얻을 수 있으며, 첫 번째 자식 요소를 얻는 것과 동일합니다. :nth-child(even)은 짝수 자식 요소, 즉 두 번째, 네 번째, 여섯 번째..., 그리고 :even을 얻는 것입니다. 인덱스 0부터 시작해서 두 번째 인덱스, 네 번째 인덱스... 즉 첫 번째, 세 번째, 다섯 번째... 모두 홀수 개의 항목을 얻는 것 같습니다. :nth-도 마찬가지입니다. child(홀수) 및 :odd 2. :first-child는 각 상위 클래스의 하위 요소와 일치하고, :first는 하위 요소와 일치하며, :last-child 및 last 3에도 동일합니다. : 요소가 상위 요소의 유일한 하위 요소인 경우 일치합니다. 즉, 현재 하위 요소가 클래스의 유일한 요소인 경우 일치합니다! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
</div>
</form>
</body>
</html>||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<script>
$(function(){
// 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的)
//找到当前元素的父元素，在找他下面的子元素
$("span.child:nth-child(even)").css("fontSize","30px");
//2选取父元素下,索引值是奇数的元素(索引值从1开始)
$("span.child:nth-child(odd)").css("color","red");
//3匹配每个父元素下，索引值为xx的子元素,索引从1开始
$("span.child:nth-child(1)").css("color","blue");
//4匹配每个父元素的第一个子元素
$("span.child:first-child").css("fontSize","50px");
//5匹配每个父元素的第一个子元素
$("span.child:last-child").css("fontSize","50px");
})
</script>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
<span class="child">4</span>
<span class="child">5</span>
</div>
</body>
</html>
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
|
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
