jQuery 필터 선택기 사용 분석_jquery
- WBOY원래의
- 2016-05-16 16:14:491279검색
이 기사의 예에서는 jQuery 필터 선택기의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
실제로는 기본 선택기에 필터 선택기를 추가하여 쿼리 작업을 완료할 수 있으며, 특정 상황에 따라 요소의 인덱스 값, 내용, 속성, 하위 요소 위치, 형식을 사용할 수 있습니다. 필터 선택기
필터 조건으로서의 도메인 속성 및 가시성
1. :첫번째 선택자
형식:
코드 복사 코드는 다음과 같습니다.
$("selector: first")
가 사용됩니다. 현재 jQuery 컬렉션을 필터링하고 일치하는 첫 번째 요소를 선택합니다.
예:
코드 복사 코드는 다음과 같습니다.
$("td:first").css ("테두리", "2px 단색 파란색");
2. :마지막 선택자
형식:
코드 복사 코드는 다음과 같습니다.
$("selector: last")
가 사용됩니다. 현재 jQuery 컬렉션을 필터링하고 마지막으로 일치하는 요소를 선택합니다. 예:
코드 복사 코드는 다음과 같습니다.
$("td:last").css("border ", " 2px 단색 파란색");
3. :홀수 선택자
형식:
코드 복사 코드는 다음과 같습니다.
$("selector: 홀수")
가 사용됩니다. 홀수 인덱스(0부터 계산)를 갖는 모든 요소를 선택합니다.
예:
코드 복사 코드는 다음과 같습니다.
$("td:odd").css ("배경", "빨간색");
4. :짝수 선택기
형식:
코드 복사 코드는 다음과 같습니다.
$("selector: even")
가 사용됩니다. 짝수 인덱스(0부터 계산)를 갖는 모든 요소를 선택합니다.
예:
코드 복사 코드는 다음과 같습니다.
$("td:even").css ("배경", "빨간색");
5. :eq 선택기
형식:
코드 복사 코드는 다음과 같습니다.
$("selector:eq(index)" )
일치하는 세트에서 주어진 값과 인덱스가 같은 요소를 선택하는 데 사용됩니다
예:
코드 복사 코드는 다음과 같습니다.
$("li:eq(1)" ).css ("색상", "파란색");
6. :gt 선택기
형식:
코드 복사 코드는 다음과 같습니다.
$("selector:gt(index)" )
주어진 값보다 큰 인덱스를 가진 일치된 집합에서 모든 요소를 선택하는 데 사용됩니다.
예:
코드 복사 코드는 다음과 같습니다.
$("li:gt(0)" ).css ("색상", "녹색");
7. :lt 선택자
형식:
코드 복사 코드는 다음과 같습니다.
$("selector:lt(index)" )
주어진 값보다 큰 인덱스를 가진 일치된 집합에서 모든 요소를 선택하는 데 사용됩니다.
예:
코드 복사 코드는 다음과 같습니다.
$("li:lt(5)" ).css ("색상", "녹색");
n1보다 크고 n2보다 작은 인덱스를 가진 모든 요소를 찾으려면 배열 선택기
를 사용할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
$("selector:gt(n1), selector:lt(n2 )") ;
8. :선택자가 아님
형식:
코드 복사 코드는 다음과 같습니다.
$("selector1:not(selector2)" )
일치하는 집합에서 주어진 선택자와 일치하는 모든 요소를 제거하는 데 사용됩니다.
예:
코드 복사 코드는 다음과 같습니다.
$("td:not(:first, :last) ").css("배경", "red"); //첫 번째 셀과 마지막 셀을 제외하고 다른 셀의 배경색은 빨간색입니다
9. :헤더 선택기
형식:
코드 복사 코드는 다음과 같습니다.
$(":header")
선택을 위해 h1, h2, h3과 같은 모든 제목 요소
10. :애니메이션 선택기
형식:
코드 복사 코드는 다음과 같습니다.
$("selector:animated")
가 사용됩니다. 애니메이션을 수행하는 모든 요소를 선택하세요
간단한 예:
코드 복사 코드는 다음과 같습니다.
<머리>
<스크립트 유형="텍스트/자바스크립트">
$(document).ready(function() {
$(":header").css("color", "#999");
$("tr:first").css("배경", "#FCF");
$("td:last").css("배경", "#FCF");
$("td:odd").css("배경", "노란색");
$("td:even").html("이벤트");
$("td:eq(1)").css("테두리", "1px 단색 빨간색");
$("td:gt(6)").css("테두리", "1px 단색 파란색");
$("td:lt(6)").css("color", "blue");
$("td:not(:first, :last").css("color", "red");
});
<본문>