Jquery의 세 가지 유형의 선택자는 무엇입니까?

jquery의 세 가지 선택기: 1. 요소 ID, 요소 이름, 클래스 이름 및 여러 선택기로 구성된 기본 선택기 2. DOM 요소 간의 계층적 관계를 통해 요소를 얻는 계층적 선택기 3. 필터링 선택기 다양한 필터링 규칙은 단순 필터링, 콘텐츠 필터링, 표시 필터링, 속성 필터링, 양식 필터링 등으로 나눌 수도 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

1. 기본 선택기

요소 ID, 요소 이름, 다중 선택기로 구성됩니다. 기본 선택기를 통해 대부분의 페이지 요소를 검색할 수 있습니다.

Selector	기능 설명
#id	지정된 ID를 기반으로 요소와 일치
element	지정된 요소 이름을 기반으로 모든 요소와 일치
.class	지정된 클래스를 기반으로 요소와 일치
*	모두 일치 elements
selector1, selectorN	각 선택자를 요소와 일치시키고 함께 반환합니다

2. 계층적 선택자

계층적 선택자는 DOM 요소 간의 계층적 관계를 통해 요소를 얻습니다. 주요 계층적 관계에는 자손이 포함됩니다. , 아버지-아들, 인접 및 형제 관계를 통해 특정 유형의 관계를 사용하여 요소를 편리하고 빠르게 찾을 수 있습니다.

Selector	함수 설명
ancestorDescendant	상위 요소를 기준으로 모든 하위 요소와 일치
parent>child	상위 요소를 기준으로 모든 하위 요소와 일치
이전 +next	이전 요소 바로 뒤의 모든 인접 요소와 일치
pre~siblings	이전 요소 뒤의 모든 형제 요소와 일치

3. 필터 선택기

Filter? 반드시 필터 조건을 추가해야 합니다. "$("div:first")"와 같이 ":"를 통해 필터 조건을 추가하여 div 요소 컬렉션의 첫 번째 div 요소를 반환하고 첫 번째는 필터 조건입니다.
다양한 필터링 규칙에 따라 필터 선택기는 단순 필터 선택기, 콘텐츠 필터 선택기, 가시성 필터 선택기, 속성 필터 선택기, 하위 요소 필터 선택기, 양식 개체 속성 필터 선택기 등으로 나눌 수 있습니다.

1) 단순 필터 선택기

필터 선택기는 특정 필터링 규칙에 따라 요소를 일치시킵니다. 작성 시 콜론(:)으로 시작합니다. 단순 필터 선택기는 필터 선택기 중 가장 널리 사용되는 필터 선택입니다.

selectorfirst() 또는:firstlast() 또는:last:not( 선택기 ):even:odd:eq(index):gt(index):lt(index):header:animated

함수 설명
첫 번째 요소 가져오기
마지막 요소 가져오기
주어진 선택자를 제외한 모든 요소를 ​​가져옵니다.
인덱스 값이 짝수인 모든 요소를 ​​가져옵니다. 인덱스 번호는 0
인덱스 값이 홀수인 모든 요소를 ​​가져옵니다. , 인덱스 번호는 0
지정된 인덱스 값을 가진 요소를 가져옵니다. 인덱스 번호는 0
Get all에서 시작합니다. 주어진 인덱스 값, 인덱스 번호는 0
지정된 인덱스 값보다 작은 모든 요소를 ​​가져옵니다. 인덱스 번호는 0
모든 헤더를 가져옵니다. h1, h2... 요소 컬렉션
애니메이션 효과를 수행하는 요소 가져오기

2) 콘텐츠 필터 선택기

텍스트를 기반으로 한 콘텐츠 필터 선택기 요소 콘텐츠 또는 포함된 하위 요소 특성은 요소를 가져오고 해당 텍스트 콘텐츠는 요소 위치 지정에 대해 완전히 모호하거나 절대적으로 일치할 수 있습니다

selector:contains(text):empty:has(selector): parent

Function Description
고정된 텍스트가 있는 요소에 포함 가져오기
하위 요소 또는 텍스트를 포함하지 않는 모든 빈 요소 가져오기
선택기와 일치하는 요소 가져오기
하위 요소 또는 텍스트가 포함된 요소 가져오기

3) 가시성 필터

가시성 필터 선택기 요소 표시 여부의 특성을 기반으로 요소 가져오기

Selector:hidden:visble

4) 속성 필터

속성 필터는 ID 번호나 속성 값과 일치하는 콘텐츠 등 요소의 특정 속성을 기반으로 요소를 가져오고 "["로 시작하고 "]"로 끝납니다

함수 설명
보이지 않는 모든 요소 또는 숨겨진 유형의 요소 가져오기
보이는 요소 모두 가져오기

Selector	함수 설명
[속성]	주어진 속성을 포함하는 요소를 가져옵니다
[속성=값]	주어진 속성과 동일한 요소를 가져옵니다. 특정 값
[속성!=값]	특정 값인 주어진 속성과 같지 않은 요소를 가져옵니다
[속성^=값]	지정된 속성과 같지 않은 요소를 가져옵니다. 특정 값으로 시작하는 속성
[attribute$=value]	주어진 속성이 특정 값으로 끝나는 요소 가져오기
[attribute*=value]	주어진 속성이 끝나는 요소 가져오기 어떤 값을 사용
[selector1][selector2][selectorN]	여러 조건을 충족하는 속성을 충족하는 요소 가져오기

5) 하위 요소 필터

페이지 개발 프로세스 중에 다음을 시도해 보세요. 특정 라인의 필요성을 강조합니다. 기본 필터 선택기 ":eq(index)"를 사용하면 단일 테이블을 표시할 수 있지만 대량의 데이터와 여러 테이블의 선택 요구 사항을 충족할 수는 없습니다. 이러한 기능을 구현하기 위해 jQuery는 하위 요소 필터 선택기를 통해 모든 상위 요소의 요소를 쉽게 얻을 수 있습니다.

부터 시작합니다.

Selector	함수 설명
:nth-child(eq/even/odd/index)	각 상위 요소 아래에 특정 위치 요소를 가져오세요. 인덱스 번호는 1
:first-child	각 상위 요소 아래의 첫 번째 하위 요소 가져오기
:last-child	각 상위 요소 아래의 마지막 하위 요소 가져오기
:only-child	하나의 하위 요소만 가져오기 각 상위 요소 아래

6) 양식 객체 속성 필터

양식 객체 속성 필터 선택기는 활성화, 비활성화, 확인, 선택 속성과 같은 양식에 있는 객체의 속성 특성을 통해 요소를 얻습니다. ㅋㅋㅋ

: selected양식에서 선택한 모든 요소 가져오기:selected양식에서 선택한 옵션이 있는 모든 요소 가져오기7) jQuery 선택기의 양식 필터 Selector함수 설명:input모든 입력 가져오기, 텍스트 영역, select

양식 선택기는 , 이는 양식용으로 특별히 설계되었으며 페이지에서 양식 개체를 빠르게 찾는 데 사용할 수 있습니다.

:text모든 한 줄 텍스트 상자 가져오기

:비밀번호 모든 비밀번호 상자 가져오기 :radio모든 라디오 버튼 가져오기:checkboxget checkbox:submit모든 제출 버튼 가져오기:image모든 이미지 가져오기 도메인 :reset모든 재설정 버튼 가져오기:button모든 버튼 가져오기:file모든 파일 도메인 가져오기 jQuery 비디오 튜토리얼 , 웹 프론트엔드 영상

	[권장 학습:
】

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