jQuery 선택기의 전체 컬렉션에 대한 자세한 설명

일반인의 관점에서 선택기는 "특별한 의미를 나타내는 문자열"입니다. 선택기 문자열이 위 메서드에 전달되는 한 다양한 Dom 객체를 선택하여 jQuery 래퍼 세트 형식으로 반환할 수 있습니다.

그런데 책에 나온 분류가 jQuery의 공식 분류와 전혀 다르기 때문에 결국 CSS3 선택자 표준을 이해하지 못한 채 jQuery를 분류하는 데 어려움을 겪었습니다. 그러나 공식적인 jQuery 분류를 따르십시오.

jQuery의 선택기는 CSS3 선택기 표준을 지원합니다. 다음은 W3C의 최신 CSS3 선택기 표준입니다.

http://www. .w3.org/TR/css3 -selectors/

표준의 모든 선택자는 jQuery에서 사용할 수 있습니다.

jQuery 선택자는 크게 "선택"과 "필터링"으로 구분됩니다. 동시에 사용하여 선택기 문자열을 구성할 수 있습니다. 주요 차이점은 "필터" 선택기가 이전에 일치하는 콘텐츠에서 필터링할 조건을 지정한다는 것입니다. 이는 모든 "*"에서 필터링한다는 의미입니다. 예를 들어

$(“:[title]”)

은

$(“* :[title]”)

"Select" 기능의 선택자는 "filter"가 아닌 "select" 기능이므로 기본 범위를 가지지 않습니다.

다음 선택기에서 카테고리에서 "필터"가 있는 카테고리는 "필터" 선택기를 의미하고, 그렇지 않으면 "선택" 기능의 선택기를 의미합니다.

jQuery 선택기는 다음 카테고리로 구분됩니다.

[설명]
1. 이 방법에 대한 jQuery 공식 문서로 이동하려면 "이름"을 클릭하세요.
2. 다음 섹션의 jQuery 선택기 랩에서 다양한 선택기를 테스트할 수 있습니다

1.

이름

설명

예

#id

요소 ID를 기준으로 선택

$("divId ") ID가 divId인 요소를 선택합니다.

element

는 요소 이름을 기준으로 선택되고,

$("a")는 모든 요소를 선택합니다.

.class

요소의 CSS 클래스에 따라 선택

$(".bgRed") CSS 클래스가 bgRed인 요소를 선택

*

모든 요소 선택

$("*")은 페이지의 모든 요소를 ​​선택합니다

selector1,
selector2,
selectorN

여러 선택자를 ","로 구분한 다음 철자를 입력할 수 있습니다. 선택기 문자열.

$(“#divId, a, .bgRed” )

[연구 제안]: 지금은 이것을 기억하세요. 실습을 위해 다음 섹션인 "jQuery Selector Lab"으로 바로 이동하여 모든 내용을 천천히 배울 수 있습니다. 선택기를 사용하거나 사용할 때 다시 쿼리하세요.

2. 계층 선택기 계층

이름

설명

예

조상 자손

양식 입력을 사용하여 양식의 모든 입력 요소를 선택합니다. 즉, 조상(조상)은 출신이고, 자손(하위)은

$(“.bgRed)입니다. div”)는 CSS 클래스가 bgRed 요소인 요소에서 모든

를 선택합니다.

parent > child

부모의 직계 하위 노드를 선택합니다. 상위 및 상위 클래스는 상위 요소입니다.

$(“.myList> ;li") CSS 클래스를 myList 요소의 직접 하위 노드

객체로 선택합니다.

prev + next

prev와 next는 동일한 레벨의 두 요소입니다. prev를 선택합니다.

$("#hibiscus+img")는 img 개체 다음에 선택됩니다. id는 hibiscus 요소입니다.

prev ~ siblings

는 prev Elements가 siblings
에 따라 필터링된 후 선택됩니다. 참고: siblings는 필터입니다

$("# someDiv~[title]") ID가 someDiv

인 객체 뒤에 title 속성이 있는 모든 요소를 ​​선택합니다. 3. 기본 필터

이름

설명

예

:first

는 처음 발견된 요소

조회 테이블의 첫 번째 행과 일치합니다. $("tr:first")

:last

는 발견된 마지막 요소와 일치합니다.

조회 테이블의 마지막 줄: $("tr:last")

:not(selector)

모두 제거 주어진 선택기와 일치하는 요소

선택되지 않은 모든 입력 요소 찾기: $(“input:not(:checked)”)

:even

짝수 인덱스를 가진 모든 요소와 일치 0부터 계산되는 값

조회 테이블 Lines 1, 3, 5...: $("tr:even")

:odd

는 모든 요소를 ​​홀수와 일치시킵니다. 0부터 계산되는 인덱스 값

테이블의 2, 4, 6행 찾기: $("tr:odd")

:eq(index)

일치 주어진 인덱스 값을 가진 요소
참고: 인덱스는 0부터 계산을 시작합니다

두 번째 줄 찾기: $("tr:eq(1)")

:gt(index )

주어진 인덱스 요소보다 큰 모든 값과 일치
참고: 인덱스는 0부터 계산되기 시작합니다.

두 번째와 세 번째 행을 찾습니다. 즉, 인덱스 값은 0보다 큰 1과 2: $("tr:gt(0)")

:lt(index)

결과 집합에서 인덱스가 N보다 작은 요소를 선택합니다.
참고: 인덱스는 0부터 계산되기 시작합니다

첫 번째와 두 번째 행, 즉 인덱스 값을 찾습니다. 0과 1로 2보다 작습니다. $("tr:lt(2) ")

:header

h1, h2, h3 등 헤더 태그를 모두 선택합니다.

페이지의 모든 제목에 배경색을 추가합니다. $(“: header”).css(“Background”, “#EEE”);

:animated

는 애니메이션 효과를 실행하는 모든 요소

와 일치하며 애니메이션 효과만 실행할 수 있습니다. 애니메이션 효과를 실행하지 않는 요소의 경우: $(“#run”).click(function(){
$(“div:not( :animated)").animate({ left: “+=20″ } , 1000);
});

4. 콘텐츠 필터콘텐츠 필터

이름

설명

예

:contains(text)

주어진 텍스트가 포함된 요소 일치

"John"이 포함된 모든 div 요소 찾기 :$("div:contains('John')")

:empty

하위 요소 또는 텍스트를 포함하지 않는 모든 빈 요소와 일치

모든 빈 요소 찾기 하위 요소를 포함하지 않는 요소 또는 텍스트의 빈 요소: $("td:empty")

:has(selector)

선택기와 일치하는 요소를 포함하는 요소와 일치

p 요소가 포함된 div 요소에 텍스트 클래스를 추가합니다. $(“div:has(p)”).addClass(“test”);

:parent

하위 요소 또는 텍스트 요소가 포함된 일치

하위 요소 또는 텍스트가 포함된 모든 td 요소 찾기: $("td:parent")

5. 가시성 필터 가시성 필터

이름

설명

예

:hidden

모든 보이지 않는 요소와 일치

참고: 버전 1.3.2에서는 숨겨진 자체가 일치합니다. 또는 상위 클래스가 문서에서 공간을 차지하지 않는 요소. CSS 가시성 속성을 사용하여 표시하지 않고 공간을 차지하도록 하는 경우

숨겨진 tr 요소를 모두 찾으세요. $(" tr:hidden ")

:visible

보이는 모든 요소와 일치

보이는 모든 tr 요소 찾기: $("tr:visible")

6 . 속성 필터 속성 필터

이름

설명

예

[속성]

해당 속성을 포함하는 요소와 일치

id 속성을 포함하는 모든 div 요소 찾기:
$("div[id]")

[attribute=value]

주어진 속성이 다음과 같은 특정 요소와 일치합니다. 특정 값

name 속성이 newsletter인 모든 입력 요소 찾기:
$("input[name='newsletter']").attr("checked", true);

[attribute!=value]

주어진 속성에 특정 값이 포함되지 않은 요소와 일치

이름 속성이 뉴스레터가 아닌 모든 입력 요소 찾기:
$(“ input[ name!='newsletter']").attr("checked", true);

[attribute^=value]

특정 값으로 시작하는 지정된 속성과 일치합니다. 요소

$("input[name^='news']")

[attribute$=value]

는 지정된 속성과 일부 값을 일치시킵니다. 끝 요소

이름이 'letter'로 끝나는 모든 입력 요소를 찾습니다:
$("input[name$='letter']")

[attribute*=value]

주어진 항목과 일치 일부 값을 포함하는 요소인 속성

이름에 'man'이 포함된 모든 입력 요소 찾기:
$("input[name*='man' ]”)

[attributeFilter1] [attributeFilter2][attributeFilterN]

여러 조건을 동시에 충족해야 할 때 사용되는 복합 속성 선택기입니다.

id가 포함된 모든 속성을 찾고 해당 name 속성은 man으로 끝납니다:
$("input[id][name$='man']")

7 하위 요소. filter 하위 필터

이름

설명

예

:nth-child(index/even/odd/equation)

일치 상위 요소

':eq(index)' 아래의 N번째 하위 또는 홀수 요소는 하나의 요소와만 일치하며 이는 각 상위 요소의 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다!

사용할 수 있습니다:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

각 ul에서 두 번째 li를 찾습니다:
$(“ul li:nth-child ( 2)")

:first-child

는 첫 번째 하위 요소와 일치합니다.

':first'는 하나의 요소와만 일치하며, 이 선택기는 각 요소와 일치합니다. 상위 요소가 일치합니다. 하위 요소

각 ul에서 첫 번째 li 찾기:
$("ul li:first-child")

:last-child

마지막과 일치 하위 요소

':last'는 하나의 요소만 일치하며 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.

각 ul에서 마지막 요소 찾기 li:
$( "ul li:last-child")

:only-child

요소가 상위 요소의 유일한 하위 요소인 경우

와 일치합니다. 상위 요소에 다른 요소가 포함되어 있으면 일치하지 않습니다.

ul에서 유일한 하위 요소인 li 찾기:
$("ul li:only-child")

8. 양식 선택기 Forms
이름

설명

설명

: 입력

모든 입력, 텍스트 영역, 선택 및 버튼 요소와 일치

모든 입력 요소 찾기:
$( “:input”)

:text

모든 텍스트 상자 일치

모든 텍스트 상자 찾기:
$(“:text”)

:password

모든 비밀번호 상자 일치

모든 비밀번호 상자 찾기:
$(“:password”)

:radio

모든 라디오 일치 버튼

모든 라디오 버튼 찾기

:체크박스

모든 체크박스 일치

모든 체크박스 찾기:
$(“:checkbox”)

:submit

모든 제출 버튼 일치

모든 제출 버튼 찾기:
$(“:submit”)

:image

모든 이미지 필드와 일치

모든 이미지 필드와 일치:
$(“:image”)

:reset

모든 재설정 버튼과 일치

모든 재설정 버튼 찾기:
$(":reset")

:button

모든 버튼 일치 모든 버튼:

$(":button")

:file

모든 파일 필드 일치

모든 파일 필드 찾기:

$(":file ”)

9. 양식 필터

이름

설명

설명

:enabled

사용 가능한 모든 요소 일치

사용 가능한 모든 입력 요소 찾기:

$( "입력:활성화")

:비활성화

비활성화된 모든 요소 일치

사용할 수 없는 모든 입력 요소 찾기:
$("input:disabled")

:checked

선택된 모든 요소 일치 선택한 요소 (체크박스, 라디오박스 등, 선택 항목 제외)

선택한 모든 체크박스 요소 찾기:
$("input:checked")

:selected

선택한 모든 옵션 요소 일치

선택한 모든 옵션 요소 찾기:
$("select option:selected")

jQuery 선택자에 대한 더 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.