>웹 프론트엔드 >JS 튜토리얼 >jQuery에는 어떤 유형의 선택기가 있습니까?

jQuery에는 어떤 유형의 선택기가 있습니까?

一个新手
一个新手원래의
2017-09-07 13:30:229338검색

jQuery Selector
1. 기본 선택기

기본 선택기는 jQuery에서 가장 일반적으로 사용되는 간단한 선택기이며 요소의 ID, 클래스 및 태그 이름을 통해 DOM 요소를 찾습니다.
1. ID 선택기 #id
설명: 주어진 ID를 기준으로 요소를 일치시키고 단일 요소를 반환합니다. (참고: 웹 페이지에서는 ID 이름을 반복할 수 없습니다.)
예: $("#test")는 테스트 요소로서의 ID
2. 클래스 선택기.class
설명: 지정된 클래스 이름에 따라 요소를 일치시키고 요소 컬렉션을 반환합니다.
예: $(".test")는 클래스 test
3가 있는 모든 요소를 ​​선택합니다.
설명: 주어진 요소 이름에 따라 요소를 일치시키고 요소 세트를 반환합니다
예: $("p") 모든

요소를 선택합니다
4, *
설명: 모든 요소를 ​​일치시키고 요소 세트를 반환합니다
예: $(" *") 모든 요소 선택
5, selector1, selector2,..., selectorN
설명: 각 선택기와 일치하는 요소를 병합하여 함께 반환하고, 병합된 요소 집합을 반환합니다
예: $("p, span,p.myClass")는 myClass 클래스를 사용하여 모든

,

태그의 요소 집합을 선택합니다.
2. 계층적 선택기
계층적 선택기는 계층적 관계를 기반으로 특정 요소를 가져옵니다. .
1. 하위 선택기
예: $("pspan")는

요소의 모든 요소를 선택합니다(참고: 하위 선택기는 하위 수준에 관계없이 상위 요소의 지정된 모든 요소를 ​​선택합니다). 또는 손자 수준)
2. 하위 선택기 $("parent>child")
예: $("p>span")는

요소 아래의 모든 상위 요소에 직접 속하는 하위 요소)
3. 피어 선택기 $("prev+next")
설명: 이전 요소 바로 다음 요소를 선택하고 요소 세트를 반환합니다.
예: $(".one+ p") 클래스 1로 설정된 다음

형제 선택기 $("prev~siblings")
설명: 이전 요소 뒤의 모든 형제 요소를 선택하고 요소 세트를 반환합니다.
예: $ ("#two ~p") ID가 2인 요소 뒤에 있는 모든

형제 요소 집합을 선택합니다.

3. 필터 선택기
1> 기본 필터 선택기 1. :first
설명: 첫 번째 One 요소를 선택하고, 단일 요소를 반환합니다
예: $("p:first") 모든

요소 중에서 첫 번째

요소를 선택합니다
2, :last
설명: 마지막 요소를 선택하고 단일 요소를 반환합니다.
예: $( "p:last")는 모든

요소 중에서 마지막

요소를 선택합니다.
3. :not(selector)
설명: 지정된 선택기와 일치하는 모든 요소를 ​​제거하고 Collection
예: $(" input:not(.myClass)") 클래스가 myClass
4가 아닌 요소를 선택합니다. :even
설명: 인덱스가 짝수인 모든 요소를 ​​선택하고 인덱스는 0부터 시작하며 요소 세트를 반환합니다
5. :odd
설명: 0부터 시작하여 홀수 인덱스를 가진 모든 요소를 ​​선택하고 요소 컬렉션을 반환합니다
6. :eq(index)
설명: 0부터 시작하여 인덱스와 동일한 요소를 선택하고 단일 요소 반환
7. :gt(index)
Description: 인덱스가 0부터 시작하고 요소 집합을 반환합니다.
8. 인덱스는 0부터 시작합니다. 요소 컬렉션을 반환합니다
9, :focus
설명: 현재 포커스를 받는 요소를 선택합니다

2> 콘텐츠 필터 선택기
1, :contains(text)설명: 선택 텍스트 콘텐츠가 있는 요소를 텍스트로 반환하고 요소 컬렉션을 반환합니다
예: $("p:contains('I')") 텍스트 "I"가 포함된 요소를 선택하세요
2, :empty
설명: 텍스트가 포함되지 않은 빈 요소를 선택하세요. 하위 요소 또는 텍스트 요소를 선택하고 요소 컬렉션을 반환합니다.
예: $ ("p:empty") 하위 요소 또는 텍스트 요소를 포함하지 않는 빈

요소를 선택합니다(

)
3. :has(selector)
설명: 요소의 선택기 요소를 포함하는 일치하는 요소를 선택하고 요소 컬렉션을 반환합니다.
예: $("p:has(p)")는 다음을 포함하는

요소(

4. :parent
설명: 하위 요소 또는 텍스트가 포함된 요소를 선택하고 요소 컬렉션을 반환합니다. 예: $(" p:parent") 하위 요소 또는 텍스트 요소를 포함하는

요소(

)를 선택합니다. selector

1, :hidden
Description: 보이지 않는 요소를 모두 선택하고 요소 집합을 반환합니다
2, :visible설명: 보이는 요소를 모두 선택하고 요소 집합을 반환합니다.
4> 속성 필터 선택기(요소 집합 반환)

1 , [속성]
예: $("p[id]" ) id 속성을 가진 p 요소를 선택
2, [속성=값]예: $("input[name=text]") 입력 요소 선택 name 속성이 text3, [attribute!=value]
와 동일함예: $("input[name!=text]") 이름 속성이 텍스트와 같지 않은 입력 요소를 선택합니다.
4. [속성^=값]
예: $("input[name^=text]") 이름 속성이 텍스트와 같지 않은 요소를 선택합니다. 이름 속성이 text로 시작하는 입력 요소
5, [attribute$=value]
예: $("input[name$=text]")는 이름 속성이 끝나는 입력 요소를 선택합니다. with text
6, [속성*=값 ]
예: $("input[name*=text]") text
7을 포함하는 이름 속성이 있는 입력 요소를 선택하세요. input[class~=text]") 공백으로 구분된 값에 텍스트
8, [attribute1][attribute2][attributeN]
설명: 여러 속성 필터 선택기 결합

5> 양식 개체가 포함된 클래스 속성이 있는 입력 요소 선택 속성 필터 선택기(요소 모음 반환) 1, :enabled
Description: 사용 가능한 모든 요소 선택
2, :disabled
Description: 사용할 수 없는 모든 요소 선택
3, :checked
Description: 선택한 모든 요소 선택(라디오 상자) , 확인란)
예: $("input:checked")는 선택한 모든 요소를 선택합니다.
4.:selected
설명: 선택한 모든 옵션 요소를 선택합니다(드롭다운 목록)
예: $("select option :selected ") 선택한 모든 옵션 요소 선택

4. 양식 선택기(요소 모음 반환, 유사한 사용법)1. :text
설명: 모든 한 줄 텍스트 상자 선택
예: $(":text" ) 선택 모든 한줄 텍스트 상자
2, :password
설명: 모든 비밀번호 상자 선택
3, :button
설명: 모든 버튼 선택
4, :checkbox
설명: 다중 체크박스 모두 선택

위 내용은 jQuery에는 어떤 유형의 선택기가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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