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. 일부 속성 값에는 특수 문자가 포함됩니다
예:
2. 선택기에 공백이 포함되어 있습니다.
$('.class_1:hidden')과 $('.class_1:hidden') 비교.
$('.class_1 :hidden')은 속성 클래스가 class_1인 요소에 포함된 숨겨진 요소를 가져옵니다.
$('.class_1:hidden')은 속성 클래스가 class_1인 요소를 가져옵니다.
Jquery: Powerful Selector 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
