jQuery 하위 속성 필터 선택기 사용 analyze_jquery
- WBOY원래의
- 2016-05-16 16:14:461090검색
이 문서의 예에서는 jQuery 하위 속성 필터 선택기의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
1. :첫번째 자식 선택자
은 상위 요소의 첫 번째 하위 요소의 모든 요소를 선택하는 데 사용됩니다. 형식은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다. 🎜>
$("selector:first-child")
예:
코드 복사 코드는 다음과 같습니다.
$("ul:first-child" ).css( "텍스트 장식", "밑줄").css("색상", "파란색");
2. :마지막 자식 선택자
은 상위 요소의 마지막 하위 요소의 모든 요소를 선택하는 데 사용됩니다. 형식은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다. 🎜>$("선택기:마지막 자식")
코드 복사 코드는 다음과 같습니다.$("ul:last-child" ).css( "텍스트 장식", "밑줄").css("color", "red");
N번째 하위 요소 또는 상위 요소 아래의 홀짝 요소를 선택하는 데 사용됩니다.
구문 형식:
코드 복사 코드는 다음과 같습니다.$("selector:nth-child( 색인/짝수/홀수/방정식)");
코드 복사 코드는 다음과 같습니다.$("ul li:nth-child (4)" ).css("color", "red");//ul 요소 아래 다섯 번째 요소의 텍스트 색상을 빨간색으로 설정합니다. 즉, li 요소의 인덱스 값은 4
요소를 선택하는 데 사용되는 고유 선택기
형식:
코드 복사 코드는 다음과 같습니다.$("selector:only-chilid")
코드 복사 코드는 다음과 같습니다.
<머리>
자원素过滤选择器
<스크립트 유형="텍스트/자바스크립트">
$(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");
});
<본문>
<머리>
<스크립트 유형="텍스트/자바스크립트">
$(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");
});
<본문>
子元素过滤器应用实例