jQuery 필터 선택기 사용 분석_jquery-JS 튜토리얼-php.cn

이 기사의 예에서는 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");
        });

<본문>

jQuery 필터 선택기 사용 분석_jquery

简单过滤选择器应用示例