Jquery 선택기 유형은 무엇입니까?

jquery 선택기에는 다음과 같은 4가지 유형이 있습니다. 1. ID, 클래스 등으로 요소를 찾는 기본 선택기 2. 계층 관계를 기반으로 특정 요소를 가져오는 계층 선택기 3. 다음을 포함한 필터 선택기 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 4. 요소 컬렉션을 반환할 수 있는 양식 선택기.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

jquery에는 4개의 선택기가 있습니다.

1. 기본 선택기

기본 선택기는 jQuery에서 가장 일반적으로 사용되는 간단한 선택기로서 요소의 ID, 클래스 및 태그 이름을 통해 검색합니다. .

1. ID 선택기 #id

설명: 주어진 ID를 기준으로 요소를 일치시키고 단일 요소를 반환합니다. (참고: 웹 페이지에서는 ID 이름을 반복할 수 없습니다.)

예: $("#test" ) 테스트

2인 ID 요소를 선택합니다. 클래스 선택기 .class

설명: 주어진 클래스 이름에 따라 요소를 일치시키고 요소 컬렉션을 반환합니다.

예: $(".test")는 클래스 테스트를 사용하여 모든 요소를 ​​선택합니다.

3 , 요소(레이블) 선택기 요소

설명: 주어진 요소 이름에 따라 요소를 일치시키고 요소 컬렉션을 반환합니다.

예: $("p")는 모든

요소를 선택합니다. $("div") : 모든 div 태그 선택

4, *

설명: 모든 요소를 ​​일치시키고 요소 집합을 반환

예: $("*")는 모든 요소를 ​​선택합니다

5, selector1, selector2,...,selectorN (union Selector)

설명: 각 선택기와 일치하는 요소를 결합하여 함께 반환하고 병합된 요소 집합을 반환합니다

예: $("p,span,p.myClass")는 모든

를 선택합니다. 클래스가 myClass인 및

태그가 있는 요소

2. 계층적 선택기

계층적 선택기는 계층적 관계를 기반으로 특정 요소를 가져옵니다.

1. 하위 선택기

예: $("pspan")는

요소의 모든 요소를 선택합니다(참고: 하위 선택기는 Son에 관계없이 상위 요소의 지정된 모든 요소를 ​​선택합니다). 수준 또는 손자 수준)

2. 하위 선택기 $("parent>child")

예: $("p>span")는

요소 아래의 모든 요소를 선택합니다. 상위 요소에 직접 속한 하위 요소만 선택)

3. 피어 선택기 $("prev+next")

설명: PRev 요소 바로 다음 요소를 선택하고 요소 집합을 반환합니다

예:$(" .one+p") 클래스 1로 설정된 다음

형제 요소를 선택합니다.

4. 형제 선택기 $("prev~siblings")

설명: 이전 요소 요소 뒤의 모든 형제 요소를 선택하고, 다음의 집합을 반환합니다. elements

예: $("#two~p")는 ID가 2

3인 요소 뒤의 모든 형제 요소 집합을 선택합니다. 필터 선택기

1>기본 필터 선택기

1. First

설명: 첫 번째 요소를 선택하고 단일 요소를 반환합니다.

예: $("p:first")는 모든

요소 중에서 첫 번째

요소를 선택합니다. , :last

Description : 마지막 요소를 선택하고 단일 요소를 반환합니다.

예: $("p:last")는 모든

요소 중에서 마지막

요소를 선택합니다

3. :not(selector : even

설명: 인덱스가 짝수인 모든 요소를 ​​선택하고 인덱스는 0부터 시작하며 요소 세트

5, :odd

를 반환합니다. 설명: 인덱스가 홀수인 모든 요소를 ​​선택하고 인덱스는 0부터 시작하며 다음을 반환합니다. 요소 세트

6 , :eq(index)

설명: 인덱스가 인덱스와 같은 요소를 선택하고 인덱스는 0부터 시작하며 단일 요소를 반환합니다

7, :gt(index)

설명: 인덱스가 더 큰 요소를 선택합니다. 인덱스보다, 인덱스는 0부터 시작, 요소 컬렉션을 반환

8, :lt(index)

설명: 인덱스가 인덱스보다 작은 요소를 선택, 인덱스는 0부터 시작, 요소 컬렉션을 반환

9, : focus

설명: 현재 포커스를 받는 요소를 선택합니다

2>콘텐츠 필터링 선택기

1, :contains(text)

설명: 텍스트가 포함된 요소를 선택하고 요소 컬렉션을 반환합니다

예: $("p: 포함('I')") 텍스트 "I"

2, :empty

의 포함 요소 선택 설명: 하위 요소 또는 텍스트 요소를 포함하지 않는 빈 요소를 선택하고 요소 컬렉션을 반환합니다

예제 : $("p:empty") 하위 요소나 텍스트를 포함하지 않는 선택 요소의 빈

요소(

)

3. 설명: 선택기와 일치하는 요소를 포함하는 요소를 선택하고 요소 set을 반환합니다.

예: $("p:has(p)")는

;

)

4. :parent

설명: 하위 요소 또는 텍스트가 포함된 요소를 선택하고 요소 컬렉션을 반환합니다.

예: $("p:parent")는 하위 요소 또는 텍스트 요소(

또는

text

)를 포함하는

요소를 선택합니다.

3> 가시성 필터 선택기

1, :hidden

설명: 보이지 않는 모든 요소를 ​​선택하고 요소 컬렉션을 반환합니다.

2, :visible

설명: 보이는 요소를 모두 선택하고 요소 컬렉션을 반환합니다.

4>속성 필터 선택기(요소 모음 반환)

1. [속성]

예: $("p[id]")는 id 속성이 있는 p 요소를 선택합니다

2.[속성=값]

예: $("input[name=text]") 이름 속성이 text

3과 동일한 입력 요소를 선택합니다. [속성!=값]

예: $("input[name!=text]") 입력 요소 선택 이름 속성이 text

4, [속성^=값]

예: $("input[name^=text]") text

5, [ attribute$=로 시작하는 이름 속성이 있는 입력 요소를 선택하세요. value]

예: $("input[name$=text]") 이름 속성이 text

6으로 끝나는 입력 요소를 선택합니다. [속성*=값]

예: $("input[ name*= text]") text

7, [attribute~=value]

예: $("input[class~=text]") 공백으로 구분된 클래스 속성이 있는 입력 요소 선택 다음을 포함하는 입력 요소 선택 값의 텍스트

8, [attribute1][attribute2][attributeN]

설명: 여러 속성 필터 선택기 병합

5> 양식 객체 속성 필터 선택기(요소 컬렉션 반환)

1, :enabled

설명: 사용 가능한 요소 모두 선택

2, :disabled

설명: 사용할 수 없는 요소 모두 선택

3, :checked

설명: 선택한 요소 모두 선택(라디오 상자, 확인란)

예: $("input:checked" ) 선택한 모든 요소 선택

4, :selected

설명: 선택한 모든 옵션 요소 선택(드롭다운 목록)

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

4. 양식 선택기(요소 모음 반환, 유사한 사용법)

1. :text

설명: 모든 한 줄 텍스트 상자 선택

예: $(":text")는 모든 한 줄 텍스트를 선택합니다. 상자

2, :password

설명: 모든 비밀번호 상자 선택

3, :button

설명: 모든 버튼 선택

4, :checkbox

설명: 모든 확인란 선택

위 내용은 Jquery 선택기 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!