Jquery 선택기란 무엇입니까? jquery의 공통 선택기 소개-JS 튜토리얼-php.cn

jquery 선택기는 요소 노드를 찾는 데 사용됩니다. jQuery에서 $() 함수의 가장 강력하고 일반적으로 사용되는 기능 중 하나는 선택기를 사용하여 DOM 요소를 선택하는 것입니다. 는 에서 일반적으로 사용되는 선택자입니다. 도움이 필요한 친구들이 살펴볼 수 있습니다.

자세히 본문으로 들어가겠습니다~

jquery 선택기에는 기본 선택기, 계층적 선택기, 필터 선택기, 양식 선택기의 네 가지 주요 범주가 있습니다. 이 네 가지 범주를 각각 살펴보겠습니다. 선택자.

1. jquery의 기본 선택기

기본 선택기는 JQuery에서 가장 일반적으로 사용되는 선택기이며 요소 ID, 클래스 및 태그 이름을 통해 DOM 요소를 찾는 가장 간단한 선택기입니다.

$("#myELement")	id 값이 myElement와 동일한 요소를 선택하세요. id 값은 문서에 하나만 있을 수 있으므로 얻을 수 있습니다. 유일한 요소입니다
$ ("div")	모든 div 태그 요소를 선택하고 div 요소의 배열을 반환합니다
$(".myClass")	myClass 클래스의 CSS를 사용하여 모든 요소를 선택합니다.
$("*")	문서의 모든 요소를 선택합니다. 공동 선택을 위해 다양한 선택 방법을 사용할 수 있습니다. 예: $("#myELement,div,.myclass")

참고: ID는 웹페이지에서 한 번만 사용할 수 있습니다. 즉, ID는 고유하지만 클래스는 재사용이 허용됩니다.

2. jquery 계층적 선택자

계층적 선택자는 DOM 요소 간의 계층적 관계를 통해 요소를 얻습니다. 주요 계층적 관계에는 부모-자식, 인접 및 형제 관계가 포함됩니다.

$("form input")	모든 양식 요소에서 입력 요소 선택
$("#main > *")	id 값이 main인 모든 하위 요소 선택
$("label + input")	모든 레이블 요소 중 다음 입력 요소 노드를 선택합니다. 테스트 후 선택기는 레이블 레이블
바로 뒤에 입력 레이블이 오는 모든 입력 레이블 요소를 반환합니다. $("#prev ~ div")	Sibling 선택자, 이 선택자는 ID가 prev

인 태그 요소의 동일한 상위 요소에 속하는 모든 div 태그를 반환합니다.

참고: 이 메서드가 JQuery 객체를 반환하는 경우에만 체인 작업을 수행할 수 있습니다.

3. jquery 필터 선택기

필터 선택기는 주로 특정 필터링 규칙을 통해 필수 DOM 요소를 필터링합니다. 필터링 규칙은 CSS의 의사 클래스 선택기와 동일한 구문을 갖습니다. a 콜론(:)으로 시작합니다(CSS 의사 클래스 선택기에 대한 자세한 내용은 css 학습 매뉴얼을 참조하세요). 다양한 필터링 규칙에 따라 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 및 양식 필터링으로 나눌 수 있습니다. 객체 속성 필터링 선택기에는 6가지 유형의 선택기가 있습니다. jquery의 6가지 필터 선택기를 별도로 간략하게 살펴보겠습니다

(1) jquery 기본 필터 선택기

필터 선택기는 특정 유형의 필터링 규칙에 따라 요소를 일치시키며, 작성 시 모두 (:)로 시작합니다. 단순 필터 선택기는 가장 널리 사용되는 필터 선택기 유형입니다.

$("tr:first"): 모든 tr 요소 중 첫 번째 요소 선택

$("tr:last"): 모든 tr 요소 중 마지막 요소 선택

$("input:not(: 체크) + 스팬"): 필터링: 체크된 선택기의 모든 입력 요소

$("tr:even"): 모든 tr 요소 중 0번째, 2번째, 4번째... 요소를 선택합니다(참고: 선택한 요소는 배열이고 시퀀스 번호는 0부터 시작합니다.)

$("tr:odd"): 모든 tr 요소의 첫 번째, 세 번째, 다섯 번째... 요소를 선택합니다

$("td:eq(2 )"): 전체 td 요소 중 일련 번호가 2인 td 요소를 선택합니다.

$("td:gt(4)"): 일련 번호가 4보다 큰 td 요소를 모두 선택합니다.

$("td :ll(4)"): td 요소에서 4보다 작은 시퀀스 번호를 가진 모든 td 요소를 선택합니다.

$(":header"): h1, h2, h3과 같은 헤더 요소를 일치시킵니다. 이는 특별히 사용됩니다. h1 및 h2 같은 제목 요소 획득

$("div:animated"): 애니메이션 효과를 실행하는 모든 요소 일치

(2) jquery 콘텐츠 필터 선택기

콘텐츠 필터 선택 필터의 필터링 규칙은 다음과 같습니다. 주로 포함된 하위 요소와 텍스트 콘텐츠에 반영됩니다.

$("div:contains('John')"): John 텍스트가 포함된 모든 div 요소 선택

$("td:empty"): 비어 있는 모든 td 선택(텍스트 노드 제외) 요소 배열

$("div:has(p)"): p 태그가 포함된 모든 div 요소 선택

$("td:parent"): td가 상위 노드인 요소의 모든 배열 선택

(3) jquery 가시성 필터 선택기

가시성 필터 선택기는 요소의 표시 여부에 따라 해당 요소를 선택합니다.

$("div:hidden"): 숨겨진 div 요소 모두 선택

$("div:visible"): 보이는 div 요소 모두 선택

(4) jquery 속성 필터 선택기

필터링 규칙 속성 필터 선택기는 요소의 속성을 통해 해당 요소를 얻는 것입니다.

$("div[id]"): id 속성이 있는 모든 div 요소 선택

$("input[name='newsletter']"): 이름 속성이 'newsletter'

$와 같은 모든 입력 요소 선택 ("input[name!='newsletter']"): 이름 속성이 'newsletter'

$("input[name^='news']")와 같지 않은 모든 입력 요소 선택: 모든 이름 속성 선택 입력 'news'

$("input[name$='news']")로 시작하는 요소: 이름 속성이 'news'

$("input[name*='man ']"으로 끝나는 모든 입력 요소를 선택합니다. ): 이름 속성에 'news'가 포함된 모든 입력 요소를 선택하세요

(5) jquery 하위 요소 필터 선택기

$("ul li:nth-child(2)"),$(" ul li:nth- child(odd)"),$("ul li:nth-child(3n + 1)"): 상위 요소 아래의 N번째 하위 또는 홀수 요소와 일치합니다. 이 선택기는 이전 항목 eq()를 기반으로 합니다. 기본 필터는 다소 비슷하지만 전자는 0부터 시작하고 후자는 1부터 시작한다는 차이점이 있습니다.

$("divspan:first-child"): 모든 div 요소의 첫 번째 하위 노드 배열을 반환합니다.

$("divspan:last-child"): 모든 div 요소 중 마지막 하위 노드 배열을 반환합니다. of node

$("div 버튼:only-child"): 모든 div에 하위 노드가 하나만 있는 모든 하위 노드의 배열을 반환합니다.

(6) jquery 양식 객체 속성 필터 선택기

this 선택기 주로 선택한 양식 요소를 필터링합니다.

$(":enabled"): 작동 가능한 모든 양식 요소 선택

$(":disabled"): 작동 불가능한 모든 양식 요소 선택

$(":checked"): 작동 가능한 모든 양식 요소 선택 체크된 양식 요소

$("select option:selected"): 선택한 하위 요소에서 선택한 모든 요소를 선택합니다.

$("input[@ name =S_03_22]").parent().prev() .text(): 텍스트 값을 선택합니다. "S_03_22"

$("input[@ name ^='S_']").not("[@ name $=' _R']")이라는 이름의 입력 텍스트 상자의 이전 td: 이름은 다음으로 시작합니다. "S_"이고 "_R"로 끝나지 않습니다

$("input[@ name =radio_01][@checked]").val();: radio_01이라는 라디오의 선택된 값