이 문서의 예에서는 jQuery 하위 속성 필터 선택기의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
1. :첫번째 자식 선택자
은 상위 요소의 첫 번째 하위 요소의 모든 요소를 선택하는 데 사용됩니다. 형식은 다음과 같습니다.
$("selector:first-child")
예:
$("ul:first-child" ).css( "텍스트 장식", "밑줄").css("색상", "파란색");
2. :마지막 자식 선택자
은 상위 요소의 마지막 하위 요소의 모든 요소를 선택하는 데 사용됩니다. 형식은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다. 🎜>$("선택기:마지막 자식")
예:
코드 복사 코드는 다음과 같습니다.$("ul:last-child" ).css( "텍스트 장식", "밑줄").css("color", "red");
3. :n번째 자식 선택자
N번째 하위 요소 또는 상위 요소 아래의 홀짝 요소를 선택하는 데 사용됩니다.
구문 형식:
예:
코드 복사 코드는 다음과 같습니다.$("ul li:nth-child (4)" ).css("color", "red");//ul 요소 아래 다섯 번째 요소의 텍스트 색상을 빨간색으로 설정합니다. 즉, li 요소의 인덱스 값은 4
4. :자녀 선택자
요소를 선택하는 데 사용되는 고유 선택기
형식:
간단한 예:
코드 복사 코드는 다음과 같습니다.
<머리>
자원素过滤选择器
<스크립트 유형="텍스트/자바스크립트">
$(document).ready(function() {
$("table tr:first-child").css("배경", "#FCF");
$("table tr:last-child").css("배경", "노란색");
$("tr td:nth-child(even)").css("border", "1px 단색 빨간색");
$("div h3:only-child").css("color", "#999");
});
<본문>
子元素过滤器应用实例
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
