jQuery의 선택기는 매우 강력합니다. 다음은 일반적으로 사용되는 요소 검색 방법에 대한 간략한 요약입니다.
$("#myELement") id 값이 myElement와 동일한 요소를 선택하세요. 문서에서 하나의 ID 값만 myElement이므로 모든 DIV 태그 요소를 선택하는 유일한 요소
$ ("div")만 얻을 수 있으며 DIV 요소 배열
$ (".MyClass")를 반환합니다. MyClass 클래스 클래스 CSS의 모든 요소
$("*") 사용을 선택합니다. 문서의 모든 요소를 선택하려면 공동 선택을 위한 다양한 선택 방법을 사용할 수 있습니다. 예: $("#myELement, div,.myclass")
계단식 선택기:
$("form input") 양식 요소의 모든 입력 요소를 선택합니다.
$("#main > *") 모든 하위 요소를 선택합니다. main
의 id 값을 사용하여 $("label input") 모든 레이블 요소 중 다음 입력 요소 노드를 선택합니다. 테스트 후 선택기는 입력 레이블
$( 바로 뒤에 오는 모든 입력 레이블 요소를 반환합니다. "#prev ~ div" ) 형제 선택기, 이 선택기는 ID가 prev인 태그 요소의 동일한 상위 요소에 속하는 모든 div 태그를 반환합니다.
기본 필터 선택기:
$("tr:first") 모든 tr 요소 중 첫 번째
$("tr:last") 선택 모든 tr 요소 중 마지막
$("input:not(:checked)span") 선택 필터링
: 선택된 선택기의 모든 입력 요소
$("tr:even") 모든 tr 요소 중 0번째, 2번째, 4번째... 요소를 선택할 수 있습니다(참고: 선택한 경우 여러 요소가 있고 배열이므로 시퀀스 번호는 0부터 시작합니다)
$("tr:odd") ~ 1번째, 3번째, 5번째... 요소를 선택할 수 있습니다. 🎜>$ ("td:eq(2)") 모든 td 요소 중 일련 번호가 2인 td 요소를 선택할 수 있습니다.
$ ("td: gt (4)") 는 다음보다 큰 일련 번호를 가진 td 요소를 선택할 수 있습니다. 모든 td 요소 중 4개
$("td:gt(4)") 요소
$("td:ll(4)") > ‐ td 요소가 부족함
$(": header")
$("div:animated")
콘텐츠 필터 선택기:
$("div:contains('John')") div $("td:empty") 비어 있는 모든 요소 선택 td 요소 배열(텍스트 노드 제외)
$("div:has(p)") p 태그가 포함된 모든 div 요소 선택 시각적 필터 상위 노드의 요소 배열
에 대한 선택기:
$("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") 입력, 텍스트 영역, 선택 및 버튼을 포함한 모든 양식 입력 요소를 선택할 수 있음 " ) 비밀번호 입력 요소 모두 선택
$(":radio") 이용 – out out 모든 제출 입력 요소
$(":image") 모든 버튼 입력 요소를 선택할 수 있습니다
$(":file") 모든 파일 입력 요소 선택
$(":hidden") 모두 선택 양식의 숨김 또는 숨겨진 필드 유형의 입력 요소
양식 요소 필터 선택기:
$(":enabled") 작동 가능한 모든 양식 요소 선택
$(":disabled") 작동 불가능한 모든 양식 요소 선택
$(": selected") 선택된 모든 양식 요소 선택
$("select option:selected") select의 하위 요소에서 선택한 모든 요소 선택
이름 선택 "S_03_22" 입력 텍스트 상자의 이전 td의 텍스트 값
$("input[@ name =S_03_22]").parent().prev().text()
이름은
$("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 코드:
결과:
코드 복사
코드 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
