简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Jquery: 강력한 선택기

高洛峰
풀어 주다： 2016-12-17 16:01:18
원래의
1279명이 탐색했습니다.

Jquery 선택자는 기본 선택자, 계층적 선택자, 필터 선택자, 양식 선택자로 구분되며, 이 4가지 선택자를 아래에서 하나씩 소개합니다.

1. 기본 선택자

대부분이 기본 선택자입니다. 기본 선택기에는 ID 선택기, 클래스 선택기, 레이블 선택기, 복합 선택기 및 "*" 선택기가 포함됩니다.

$("#id") 속성 ID가 "id"와 동일한 모든 요소를 ​​선택합니다.

$(".class_1") 속성 클래스가 "class_1"인 모든 요소를 ​​선택합니다.

$("p")는 모든

요소를 선택합니다.

$("div,span,p.myClass")는 속성 클래스가 "myClass"인 모든

, 태그의 요소 그룹을 선택합니다.

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

2. 계층적 선택자

요소 간의 계층적 관계를 기반으로 특정 요소를 얻고 싶다면 계층적 선택자를 사용하도록 선택할 수 있습니다.

$("div p")는

의 모든

요소를 선택합니다. 이 선택기는 다음 수준 요소(즉, 하위 요소)가 아닌 모든 하위 요소를 검색합니다.

$("div>p")는

의 모든 태그를

$(".class_1+div") 속성 클래스가 "class_1"인 다음 형제 요소를 선택합니다.

$(".class_1").next("div") 효과는 위와 같습니다.

$(".class_1~div")는 속성 클래스가 "class_1"인 요소 뒤에 있는 모든

요소를 선택합니다.

$(".class_1").nextAll("div") 효과는 위와 같습니다.

$(".class_1").siblings("div") 위의 두 선택기와 차이점은 이 선택기는 이전과 이후의 구분이 없다는 점입니다. 동일한 세대의 모든

요소를 선택합니다. .

3. 필터 선택기

필터 선택기는 모두 콜론(:)으로 시작합니다. 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링으로 나눌 수 있습니다. 및 양식 개체 속성 필터 선택기입니다.

1. 기본 필터 선택기

$("div:first")는 모든

요소 중 첫 번째
요소를 선택합니다.

$("div:last")는 모든

요소 중에서 마지막
요소를 선택합니다.

$("input:not(.class_1)") 속성 클래스가 "class_1"이 아닌 요소를 선택합니다.

$("input:even")은 인덱스가 짝수인 요소를 선택합니다.

$("input:odd")는 인덱스가 홀수인 요소를 선택합니다.

$("input:eq(1)") 인덱스가 1인 요소를 선택합니다.

$("input:gt(1)") 인덱스가 1보다 큰 요소를 선택합니다. (참고: 1보다 크고 1을 포함하지 않음)

$("input:lt(1)") 인덱스가 1보다 작은 요소를 선택합니다. (참고: 1개 미만, 1개 제외)

$(":header")는 웹페이지에서

,

,

...을 모두 선택합니다.

$("div:animated")는 애니메이션을 수행하는

요소를 선택합니다.

$(":focus")는 현재 포커스를 받고 있는 요소를 선택합니다.

2. 콘텐츠 필터링 선택기

$("div:contains('I')") "I"라는 텍스트가 포함된

요소를 선택합니다.

$("div:empty")는 하위 요소(텍스트 요소 포함)를 포함하지 않는

빈 요소를 선택합니다.

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

요소가 포함된

요소를 선택합니다.

$("div:parent")는 하위 요소(텍스트 요소 포함)가 있는

요소를 선택합니다.

3. 가시성 필터 선택기

$(":hidden")는 모든 보이지 않는 요소를 선택하고, $("input:hidden")은 모든 보이지 않는 요소를 선택합니다.

$("div:visible")은 표시되는 모든

요소를 선택합니다.

4. 속성 필터 선택기

$("div[id]")는 속성 ID가 있는

요소를 선택합니다.

$("div[title=text]") 속성 제목이 "text"인

요소를 선택합니다.

$("div[title!=text]") 속성 제목이 "text"와 같지 않은

요소를 선택합니다. (참고: 속성 제목이 없는
요소도 선택됩니다.)

$("div[title^=text]") 속성 제목이 "text"로 시작하는

.

$("div[title$=text]")는 속성 제목이 "text"로 끝나는

요소를 선택합니다.

$("div[title*=text]") 속성 제목에 "text"가 포함된

요소를 선택합니다.

$('div[title|="text"]') 속성 제목이 "text"이거나 접두사가 "text"인

요소를 선택합니다. (참고: 접두사는 문자열 뒤에 '-'가 따른다는 의미입니다).

$('div[title~="text"]') 공백으로 구분된 값에 속성 제목에 "text" 문자가 포함된 요소를 선택합니다.

$("div[id][title$='text']") 속성 ID가 있고 속성 제목이 "text"로 끝나는

요소를 선택합니다.

5. 하위 요소 필터 선택기

$("div.one:nth-child(2)")는 속성 클래스가 "one"인 상위 요소 아래에서

두 번째 자식 요소.

$("div.one:first-child(2)") 속성 클래스가 "one"인

상위 요소 아래의 첫 번째 하위 요소를 선택합니다.

$("div.one:last-child(2)") 속성 클래스가 "one"인

상위 요소 아래의 마지막 하위 요소를 선택합니다.

$("div.one:first-child(2)") 속성 클래스가 "one"인

상위 요소 아래에 하위 요소가 하나만 있는 경우 이 하위 요소를 선택합니다.

6. 양식 객체 속성 필터 선택기

$("#form1 input:enabled")는 양식에서 사용 가능한 요소를 선택합니다.

$("#form1 input:disabled") 양식에서 사용할 수 없는 요소를 선택합니다.

$("input:checked") 선택한 확인란을 선택하세요.

$("select:selected") 드롭다운 상자에서 선택한 항목을 선택합니다.

(참고: 요소에서 비활성화된 속성을 "disabled"로 설정하면 이 요소를 사용할 수 없게 될 수 있습니다.)

4. 양식 선택기

$(":input") 선택 모든 ,

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

$(":password")는 모든 비밀번호 상자를 선택합니다.

$(":radio") 모든 라디오 버튼을 선택합니다.

$(":checkbox") 모든 확인란을 선택합니다.

$(":image")는 모든 이미지 버튼을 선택합니다.

$(":reset")은 모든 재설정 버튼을 선택합니다.

$(":button")은 모든 버튼을 선택합니다.

$(":file")은 모든 업로드 컨트롤을 선택합니다.

$(":hidden")은 보이지 않는 요소를 모두 선택합니다.

5. 선택기의 일부 주의사항

1. 일부 속성 값에는 특수 문자가 포함됩니다

예:

, 이 요소를 얻는 방법은 $("#id\[1\]")입니다.

2. 선택기에 공백이 포함되어 있습니다.

$('.class_1:hidden')과 $('.class_1:hidden') 비교.

$('.class_1 :hidden')은 속성 클래스가 class_1인 요소에 포함된 숨겨진 요소를 가져옵니다.

$('.class_1:hidden')은 속성 클래스가 class_1인 요소를 가져옵니다.



Jquery: Powerful Selector 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨：
Jquery选择器
원천：php.cn
이전 기사：js 콜백 메커니즘을 사용하여 호출 페이지의 부분 새로 고침 구현 다음 기사：여러 요소를 선택하기 위한 jquery 다중 선택기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
MySQL: "<여기 변수 또는 하위 쿼리>로...에서 텍스트 선택" 다음 데이터가 포함된 다음 테이블이 있습니다. id 텍스트 언어 1 독일어 텍스트 독일어 2 영어 텍스트 영어 내가 원하는 것은 다음 형식의 결과를 얻는 것입니다...
에서 2024-04-06 19:25:54
0
2
529
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
Reactjs에서 여러 확인란을 선택하는 방법 여러 개의 확인란을 선택하고 싶지만 그렇게 할 수 없는 옵션 목록이 있습니다. 이 코드에 어떤 문제가 있습니까? 샌드박스 URL
에서 2024-04-06 18:55:21
0
1
396
클리어 후에도 내 파일 입력값은 그대로 남아있습니다 스크린샷에서 볼 수 있듯이. 파일을 선택하고 페이지를 새로 고치지 않고 팝업을 유지한 후 다시 열면 파일 입력이 여전히 내가 선택한 파일입니다. <input...
에서 2024-04-06 15:44:52
0
1
384
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！