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

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

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery 선택기에는 어떤 유형이 있나요?

1. 기본 선택기

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

1. ID 선택기 #id

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

예: $("# test") id가 test

2인 요소를 선택합니다. Class selector.class

설명: 주어진 클래스 이름에 따라 요소를 일치시키고 요소 set

을 반환합니다.예: $(".test") 선택 클래스 테스트 Element

3. 요소(태그) 선택기 요소

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

예: $("p")는 모든

4, *

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

예: $("*") 모든 요소 선택

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

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

예: $("p,span,p.myClass ")는 클래스가 myClass인 모든

, 및

태그가 있는 요소 세트를 선택합니다

2. 계층적 선택기

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

1. 하위 선택기

예: $("pspan")는

요소의 모든 요소를 선택합니다(참고: 하위 선택기는 상위 요소의 지정된 모든 요소를 ​​선택합니다. 아들 수준 또는 손자 수준입니다)

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

예: $("p>span")는

요소 아래의 모든 을 선택합니다. ; 요소(참고: 하위 선택자는 상위 요소에 직접 속한 하위 요소만 선택합니다.)

3. 형제 선택자 $("prev+next")

설명: 이전 요소 바로 다음 요소를 선택합니다. 요소 집합 반환

예: $(".one+p")는 클래스 1

4으로 설정된 다음 형제 요소를 선택합니다. $("prev~siblings")

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

예: $("#two~p")는 ID가 2인 요소 뒤의 모든 형제 요소 집합을 선택합니다.

3. 필터 선택기

1>기본 필터 선택기

1, :first

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

예: $("p:first")는 모든 < 중에서 첫 번째 요소를 선택합니다. ;p>A

요소

2, :last

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

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

elements ;Element

3, :not(selector)

설명: 주어진 선택기와 일치하는 모든 요소를 ​​제거하고 요소 set을 반환합니다

예: $("input:not(.myClass)")는 다음과 같은 클래스를 선택합니다. not myClass 요소

4, :even

Description: 인덱스가 짝수인 모든 요소를 ​​선택하고, 인덱스는 0부터 시작하고, 요소 세트를 반환합니다.

5, :odd

설명: 인덱스가 다음인 모든 요소를 ​​선택합니다. 홀수, 인덱스 0부터 시작, 요소 집합 반환

6, :eq(index)

설명: 인덱스가 인덱스와 동일한 요소를 선택하고, 인덱스는 0부터 시작하고, 단일 요소

7을 반환합니다. :gt(index)

설명: 인덱스 선택 index보다 큰 요소의 경우 인덱스는 0부터 시작하여 요소 세트

8을 반환합니다. :lt(index)

설명: 인덱스가 index보다 작은 요소를 선택합니다. . 인덱스는 0부터 시작하고 요소 세트

9를 반환합니다. :focus

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

2> 콘텐츠 필터 선택기

1, :contains(text)

설명: 선택 텍스트 내용을 텍스트로 포함하는 요소를 텍스트로 포함하고 요소 컬렉션을 반환합니다.

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

2, :empty

가 포함된 요소 선택: 비어 있음 선택 하위 요소 또는 텍스트 요소를 포함하지 않고 요소 컬렉션을 반환하는 요소

예: $(" p:empty")는 하위 요소 또는 텍스트 요소를 포함하지 않는 빈

;

)

3. :has(선택기)

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

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

p>

또는 텍스트 요소의

요소(

또는

text

)

3> ;가시성 필터 선택기

1. :hidden

설명: 보이지 않는 요소를 모두 선택하고 요소 세트를 반환합니다2. :visible

설명: 보이는 요소를 모두 선택하고 요소 세트를 반환합니다

4> 선택기(요소 집합 반환)

1. [속성]

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

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

3, [attribute!=value]

와 같은 입력 요소를 선택하세요. 예: $("input[name!=text]") 이름 속성이 아닌 입력 요소를 선택하세요. text

4. [속성^=값]

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

5로 시작하는 입력 요소를 선택합니다.

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

6으로 끝나는 이름 속성을 가진 입력 요소를 선택합니다. [attribute*=value]

예: $("input[name*=text] ")는 이름 속성이 있는 입력 요소를 선택합니다. 텍스트가 포함된 입력 요소

7, [속성~=값]

예: $("input[class~=text]") 값에 텍스트가 포함된 입력 요소 선택 ​​클래스 속성을 사용하여 공백으로 구분

8, [attribute1][attribute2][attributeN]

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

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

1, :enabled

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

2, :disabled

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

3, :checked

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

예: $(" input: selected") 선택한 요소 모두 선택

4, :selected

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

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

4. 양식 선택기(요소 컬렉션 반환, 유사한 사용법)

1.:text

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

예: $(":text") 선택 모든 한 줄 텍스트 상자

2, :password

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

3, :button

설명: 모든 버튼 선택

4, :checkbox

설명: 선택 모든 다중 선택 상자

추천 관련 비디오 튜토리얼:

jQuery 비디오 튜토리얼

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