Jquery: 강력한 선택기

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") 선택 모든 , , <select> 및 <button> 요소. </button></select>

$(":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 중국어 웹사이트를 주목하세요!