jQuery의 선택기는 매우 강력합니다. 다음은 일반적으로 사용되는 요소 검색 방법에 대한 간략한 요약입니다.
jQuery 선택기를 사용하면 페이지 요소를 더 쉽고 유연하게 얻을 수 있어 개발자의 스트레스가 크게 줄어듭니다. 건물을 짓는 것과 마찬가지로 벽돌과 타일이 없으면 건물을 지을 수 없습니다. 요소를 얻을 수 없다면 어떻게 다른 작업에 대해 이야기할 수 있나요? jQuery 선택자의 중요성을 알 수 있습니다. 물론 모든 선택자를 한꺼번에 익히는 것은 매우 어렵습니다. 이를 위해서는 연습과 축적이 필요합니다.
이제 공식적으로 jQuery 선택기 연구에 들어갑니다. jQuery 선택자를 분류하고 학습하며 jQuery 선택자를 다음과 같은 유형으로 나눕니다.
1. 기본 선택기
◦ id 요소 ID를 기준으로
을 선택합니다.
◦elementname 요소 이름을 기준으로
선택
◦ classname 요소 CSS 클래스 이름을 기반으로
예:
각 요소의 값을 얻을 수 있습니다. 위의 3개는 가장 일반적인 선택자이며, 그 중 ID 선택자가 가장 효율적이므로 가능할 때마다 사용해야 합니다.
2. 레벨 선택기
◦조상 후손 조상 및 후손 선택자
◦ parent > child 상위-하위 노드 선택기
◦ prev next 동일 레벨 선택기
◦ prev ~ siblings 필터 선택기
예:
3. 기본 필터 선택기
◦:first 첫 번째 요소 찾기
◦:last 마지막 요소 찾기
◦:not(selector) 주어진 선택기와 일치하는 요소를 제거합니다
◦:even 0부터 계산하여 짝수 인덱스 값을 갖는 요소와 일치합니다
◦:odd 0부터 계산하여 홀수 인덱스 값을 갖는 요소와 일치
◦:eq(index) 0부터 시작하는 주어진 인덱스를 가진 요소와 일치
◦:gt(index) 주어진 인덱스 값보다 큰
요소와 일치합니다.
◦:lt(index) 주어진 인덱스 값보다 작은
요소와 일치합니다.
◦:header h1, h2, h3 등의 태그 선택(아직 사용되지 않음)
◦:animated 애니메이션 효과를 수행하는 요소와 일치합니다(아직 사용되지 않음)
예:
◦:empty 하위 요소나 텍스트를 포함하지 않는 모든 빈 요소와 일치 ◦:has(selector) 선택기와 일치하는 요소와 일치
예:
5. 가시성 필터
◦:hidden 보이지 않는 요소와 일치
◦:visible 보이는 요소와 일치
예:
6. 속성 필터
◦[attribute=value] 속성이 주어진 값인 요소와 일치
◦[attribute^=value] 일치하는 속성은 주어진 값
으로 시작하는 요소입니다.
◦[attribute$=value] 일치하는 속성은 주어진 값
으로 끝나는 요소입니다.
◦[attribute*=value] 속성에 지정된 값이 포함된 요소와 일치합니다.
예:
JQuery Selector는 기본적으로 학습 과정에서 접하게 되는데, 아직 요약하지 못한 부분이 몇 가지 있습니다. 어느 정도 연습을 하고 나면 누구나 jQuery 선택기를 능숙하게 사용할 수 있을 것이라고 믿습니다.
$("#myELement") id 값이 myElement와 동일한 요소를 선택합니다. id 값은 반복될 수 없습니다. 문서에는 id 값 myElement가 하나만 있을 수 있으므로 얻는 것은
뿐입니다.
$("div") 모든 div 태그 요소를 선택하고 div 요소의 배열을 반환합니다.
$(".myClass") myClass 클래스의 CSS를 사용하여 모든 요소 선택
$("*") 문서의 모든 요소를 선택합니다. 공동 선택을 위해 다양한 선택 방법을 사용할 수 있습니다. 예: $("#myELement,div,.myclass")
계단식 선택기:
$("form input") 양식 요소의 모든 입력 요소 선택
$("#main > *") ID 값이 main인 모든 하위 요소를 선택합니다
$("label input") 모든 레이블 요소 중 다음 입력 요소 노드를 선택합니다. 테스트 후 선택기는 모든 입력 레이블 요소 바로 뒤에 입력 레이블
을 반환합니다.
$("#prev ~ div") 형제 선택자, 이 선택자는 ID가 prev
인 태그 요소의 동일한 상위 요소에 속하는 모든 div 태그를 반환합니다.
기본 필터 선택기:
$("tr:first") 모든 tr 요소 중 첫 번째 요소 선택
$("tr:last") 모든 tr 요소 중 마지막 요소 선택
$("input:not(:checked) 범위")
필터링: 선택된 선택기의 모든 입력 요소
$ ("TR: EVEN") 모든 TR 요소 중 0, 2, 4 ... ... Personal 요소를 선택합니다. (참고: 선택한 여러 요소는 선택 시 배열이므로 일련 번호는 0부터 시작합니다.)
$("tr:odd") 모든 tr 요소 중 첫 번째, 세 번째, 다섯 번째... 요소 선택
$("td:eq(2)") 모든 td 요소 중 일련번호 2를 갖는 td 요소를 선택합니다
$("td:gt(4)") td 요소에서 4보다 큰 시퀀스 번호를 가진 모든 td 요소를 선택합니다
$("td:ll(4)") td 요소에서 시퀀스 번호가 4보다 작은 모든 td 요소를 선택합니다.
$(":헤더")
$("div:애니메이션")
$("div:contains('John')")은 div에서 John 텍스트를 포함하는 모든 요소를 선택합니다
$("td:empty") 비어 있는 모든 td 요소의 배열을 선택합니다(텍스트 노드 제외)
$("div:has(p)") p 태그가 포함된 모든 div 요소 선택
$("td:parent") td를 상위 노드로 사용하는 모든 요소 배열을 선택합니다.
$("div:hidden") 모든 숨겨진 div 요소 선택
$("div:visible") 보이는 모든 div 요소 선택
속성 필터 선택기:
$("div[id]") id 속성을 포함하는 모든 div 요소 선택
$("input[name='newsletter']") 이름 속성이 'newsletter'와 동일한 모든 입력 요소를 선택합니다.
$("input[name!='newsletter']")는 이름 속성이 'newsletter'와 같지 않은 모든 입력 요소를 선택합니다.
$("input[name^='news']") 이름 속성이 'news'로 시작하는 모든 입력 요소를 선택합니다.
$("input[name$='news']") 이름 속성이 'news'로 끝나는 모든 입력 요소를 선택합니다.
$("input[name*='man']") 이름 속성에 'news'가 포함된 모든 입력 요소를 선택하세요.
$("input[id][name$='man']") 공동 선택을 위해 여러 속성을 사용할 수 있습니다. 이 선택기는 id 속성을 포함하는 모든 요소를 가져오고 속성은 man
으로 끝납니다.
하위 요소 필터 선택기:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)")
$("divspan:first-child") 모든 div 요소의 첫 번째 하위 노드 배열을 반환합니다.
$("divspan:last-child") 모든 div 요소의 마지막 노드 배열을 반환합니다.
$("div 버튼:only-child") 모든 div에 하위 노드가 하나만 있는 모든 하위 노드의 배열을 반환합니다.
양식 요소 선택기:
$(":input") 입력, 텍스트 영역, 선택 및 버튼을 포함한 모든 양식 입력 요소를 선택합니다
$(":text") 모든 텍스트 입력 요소 선택
$(":password") 모든 비밀번호 입력 요소 선택
$(":radio") 모든 라디오 입력 요소 선택
$(":checkbox") 모든 체크박스 입력 요소 선택
$(":submit") 모든 제출 입력 요소 선택
$(":image") 모든 이미지 입력 요소 선택
$(":reset") 모든 재설정 입력 요소 선택
$(":button") 모든 버튼 입력 요소 선택
$(":file") 모든 파일 입력 요소 선택
$(":hidden") 숨겨진 유형인 양식의 모든 입력 요소 또는 숨겨진 필드를 선택합니다
양식 요소 필터 선택기:
$(":enabled") 작동 가능한 모든 양식 요소 선택
$(":disabled") 작동할 수 없는 모든 양식 요소 선택
$(":checked") 체크된 양식 요소 모두 선택
$("select option:selected")는 select
의 하위 요소 중에서 선택된 모든 요소를 선택합니다.
"S_03_22"라는 입력 텍스트 상자의 이전 td의 텍스트 값을 선택하세요.
$("입력[@ 이름 =S_03_22]").parent().prev().text()
이름은 "S_"로 시작하고 "_R"로 끝나지 않습니다.
$("input[@ name ^='S_']").not("[@ name $='_R']")
radio_01이라는 라디오가 선택한 값
$("input[@ name =radio_01][@checked]").val()
$("A B")는 간접 하위 노드를 포함하여 A 요소 아래의 모든 하위 노드를 찾습니다.
$("A>B")는 A 요소 아래에서 직접 하위 노드를 찾습니다.
$("A B")는 간접 하위 노드를 포함하여 A 요소 뒤에 있는 형제 노드를 찾습니다.
$("A~B")는 간접 자식 노드를 제외하고 A 요소 뒤에 있는 형제 노드를 찾습니다.
1. $("A B")는 간접 하위 노드를 포함하여 A 요소 아래의 모든 하위 노드를 찾습니다.
예:
형식의 모든 입력 요소를 찾습니다.
HTML 코드:
<레이블>이름:
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:
<입력 이름="뉴스레터" />
<입력 이름="없음" />
jQuery 코드:
$("양식 입력")
결과:
[ , ]
2. $("A>B")는 A 요소 아래에서 직접 하위 노드를 찾습니다.
예: 양식의 모든 하위 입력 요소를 일치시킵니다.
<레이블>이름:
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:
<입력 이름="뉴스레터" />
<입력 이름="없음" />
jQuery 코드:
$("양식 > 입력")
결과:
[ <입력 이름="이름" /> ]
3. $("A B")는 간접 하위 노드를 포함하여 A 요소 뒤에 있는 형제 노드를 찾습니다.
예: 라벨 다음의 모든 입력 요소 일치
HTML 코드:
<레이블>이름:
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:
<입력 이름="뉴스레터" />
<입력 이름="없음" />
jQuery 코드:
$("라벨 입력")
결과:
[ , ]
4. $("A~B")는 간접 자식 노드를 제외하고 A 요소 뒤에 있는 형제 노드를 찾습니다.
예:
형식의 형제인 모든 입력 요소를 찾습니다.
<레이블>이름:
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:
<입력 이름="뉴스레터" />
<입력 이름="없음" />
jQuery 코드:
$("양식 ~ 입력")
결과:
[ <입력 이름="없음" />
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
