일반인의 관점에서 선택기는 "특별한 의미를 나타내는 문자열"입니다. 선택기 문자열이 위 메서드에 전달되는 한 다양한 Dom 객체를 선택하여 jQuery 래퍼 세트 형식으로 반환할 수 있습니다.
그런데 책에 나온 분류가 jQuery의 공식 분류와 전혀 다르기 때문에 결국 CSS3 선택자 표준을 이해하지 못한 채 jQuery를 분류하는 데 어려움을 겪었습니다. 그러나 공식적인 jQuery 분류를 따르십시오.
jQuery의 선택기는 CSS3 선택기 표준을 지원합니다. 다음은 W3C의 최신 CSS3 선택기 표준입니다.
http://www. .w3.org/TR/css3 -selectors/
표준의 모든 선택자는 jQuery에서 사용할 수 있습니다.
jQuery 선택자는 크게 "선택"과 "필터링"으로 구분됩니다. 동시에 사용하여 선택기 문자열을 구성할 수 있습니다. 주요 차이점은 "필터" 선택기가 이전에 일치하는 콘텐츠에서 필터링할 조건을 지정한다는 것입니다. 이는 모든 "*"에서 필터링한다는 의미입니다. 예를 들어
$(“:[title]”)
은
$(“* :[title]”)
"Select" 기능의 선택자는 "filter"가 아닌 "select" 기능이므로 기본 범위를 가지지 않습니다.
다음 선택기에서 카테고리에서 "필터"가 있는 카테고리는 "필터" 선택기를 의미하고, 그렇지 않으면 "선택" 기능의 선택기를 의미합니다.
jQuery 선택기는 다음 카테고리로 구분됩니다.
[설명]
1. 이 방법에 대한 jQuery 공식 문서로 이동하려면 "이름"을 클릭하세요.
2. 다음 섹션의 jQuery 선택기 랩에서 다양한 선택기를 테스트할 수 있습니다
1.
이름
설명
예
#id
요소 ID를 기준으로 선택
$("divId ") ID가 divId인 요소를 선택합니다.
element
는 요소 이름을 기준으로 선택되고,
$("a")는 모든 요소를 선택합니다.
.class
요소의 CSS 클래스에 따라 선택
$(".bgRed") CSS 클래스가 bgRed인 요소를 선택
*
모든 요소 선택
$("*")은 페이지의 모든 요소를 선택합니다
selector1,
selector2,
selectorN
여러 선택자를 ","로 구분한 다음 철자를 입력할 수 있습니다. 선택기 문자열.
$(“#divId, a, .bgRed” )
[연구 제안]: 지금은 이것을 기억하세요. 실습을 위해 다음 섹션인 "jQuery Selector Lab"으로 바로 이동하여 모든 내용을 천천히 배울 수 있습니다. 선택기를 사용하거나 사용할 때 다시 쿼리하세요.
2. 계층 선택기 계층
이름
설명
예
조상 자손
양식 입력을 사용하여 양식의 모든 입력 요소를 선택합니다. 즉, 조상(조상)은 출신이고, 자손(하위)은
$(“.bgRed)입니다. div”)는 CSS 클래스가 bgRed 요소인 요소에서 모든
parent > child
부모의 직계 하위 노드를 선택합니다. 상위 및 상위 클래스는 상위 요소입니다.
$(“.myList> ;li") CSS 클래스를 myList 요소의 직접 하위 노드
prev + next
prev와 next는 동일한 레벨의 두 요소입니다. prev를 선택합니다.
$("#hibiscus+img")는 img 개체 다음에 선택됩니다. id는 hibiscus 요소입니다.
prev ~ siblings
는 prev Elements가 siblings
에 따라 필터링된 후 선택됩니다. 참고: siblings는 필터입니다
$("# someDiv~[title]") ID가 someDiv
인 객체 뒤에 title 속성이 있는 모든 요소를 선택합니다. 3. 기본 필터
이름
설명
예
:first
는 처음 발견된 요소
조회 테이블의 첫 번째 행과 일치합니다. $("tr:first")
:last
는 발견된 마지막 요소와 일치합니다.
조회 테이블의 마지막 줄: $("tr:last")
:not(selector)
모두 제거 주어진 선택기와 일치하는 요소
선택되지 않은 모든 입력 요소 찾기: $(“input:not(:checked)”)
:even
짝수 인덱스를 가진 모든 요소와 일치 0부터 계산되는 값
조회 테이블 Lines 1, 3, 5...: $("tr:even")
:odd
는 모든 요소를 홀수와 일치시킵니다. 0부터 계산되는 인덱스 값
테이블의 2, 4, 6행 찾기: $("tr:odd")
:eq(index)
일치 주어진 인덱스 값을 가진 요소
참고: 인덱스는 0부터 계산을 시작합니다
두 번째 줄 찾기: $("tr:eq(1)")
:gt(index )
주어진 인덱스 요소보다 큰 모든 값과 일치
참고: 인덱스는 0부터 계산되기 시작합니다.
두 번째와 세 번째 행을 찾습니다. 즉, 인덱스 값은 0보다 큰 1과 2: $("tr:gt(0)")
:lt(index)
결과 집합에서 인덱스가 N보다 작은 요소를 선택합니다.
참고: 인덱스는 0부터 계산되기 시작합니다
첫 번째와 두 번째 행, 즉 인덱스 값을 찾습니다. 0과 1로 2보다 작습니다. $("tr:lt(2) ")
:header
h1, h2, h3 등 헤더 태그를 모두 선택합니다.
페이지의 모든 제목에 배경색을 추가합니다. $(“: header”).css(“Background”, “#EEE”);
:animated
는 애니메이션 효과를 실행하는 모든 요소
와 일치하며 애니메이션 효과만 실행할 수 있습니다. 애니메이션 효과를 실행하지 않는 요소의 경우: $(“#run”).click(function(){
$(“div:not( :animated)").animate({ left: “+=20″ } , 1000);
});
4. 콘텐츠 필터콘텐츠 필터
이름
설명
예
:contains(text)
주어진 텍스트가 포함된 요소 일치
"John"이 포함된 모든 div 요소 찾기 :$("div:contains('John')")
:empty
하위 요소 또는 텍스트를 포함하지 않는 모든 빈 요소와 일치
모든 빈 요소 찾기 하위 요소를 포함하지 않는 요소 또는 텍스트의 빈 요소: $("td:empty")
:has(selector)
선택기와 일치하는 요소를 포함하는 요소와 일치
p 요소가 포함된 div 요소에 텍스트 클래스를 추가합니다. $(“div:has(p)”).addClass(“test”);
:parent
하위 요소 또는 텍스트 요소가 포함된 일치
하위 요소 또는 텍스트가 포함된 모든 td 요소 찾기: $("td:parent")
5. 가시성 필터 가시성 필터
이름
설명
예
:hidden
모든 보이지 않는 요소와 일치
참고: 버전 1.3.2에서는 숨겨진 자체가 일치합니다. 또는 상위 클래스가 문서에서 공간을 차지하지 않는 요소. CSS 가시성 속성을 사용하여 표시하지 않고 공간을 차지하도록 하는 경우
숨겨진 tr 요소를 모두 찾으세요. $(" tr:hidden ")
:visible
보이는 모든 요소와 일치
보이는 모든 tr 요소 찾기: $("tr:visible")
6 . 속성 필터 속성 필터
이름
설명
예
[속성]
해당 속성을 포함하는 요소와 일치
id 속성을 포함하는 모든 div 요소 찾기:
$("div[id]")
[attribute=value]
주어진 속성이 다음과 같은 특정 요소와 일치합니다. 특정 값
name 속성이 newsletter인 모든 입력 요소 찾기:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value]
주어진 속성에 특정 값이 포함되지 않은 요소와 일치
이름 속성이 뉴스레터가 아닌 모든 입력 요소 찾기:
$(“ input[ name!='newsletter']").attr("checked", true);
[attribute^=value]
특정 값으로 시작하는 지정된 속성과 일치합니다. 요소
$("input[name^='news']")
[attribute$=value]
는 지정된 속성과 일부 값을 일치시킵니다. 끝 요소
이름이 'letter'로 끝나는 모든 입력 요소를 찾습니다:
$("input[name$='letter']")
[attribute*=value]
주어진 항목과 일치 일부 값을 포함하는 요소인 속성
이름에 'man'이 포함된 모든 입력 요소 찾기:
$("input[name*='man' ]”)
[attributeFilter1] [attributeFilter2][attributeFilterN]
여러 조건을 동시에 충족해야 할 때 사용되는 복합 속성 선택기입니다.
id가 포함된 모든 속성을 찾고 해당 name 속성은 man으로 끝납니다:
$("input[id][name$='man']")
7 하위 요소. filter 하위 필터
이름
설명
예
:nth-child(index/even/odd/equation)
일치 상위 요소
':eq(index)' 아래의 N번째 하위 또는 홀수 요소는 하나의 요소와만 일치하며 이는 각 상위 요소의 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다!
사용할 수 있습니다:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
각 ul에서 두 번째 li를 찾습니다:
$(“ul li:nth-child ( 2)")
:first-child
는 첫 번째 하위 요소와 일치합니다.
':first'는 하나의 요소와만 일치하며, 이 선택기는 각 요소와 일치합니다. 상위 요소가 일치합니다. 하위 요소
각 ul에서 첫 번째 li 찾기:
$("ul li:first-child")
:last-child
마지막과 일치 하위 요소
':last'는 하나의 요소만 일치하며 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.
각 ul에서 마지막 요소 찾기 li:
$( "ul li:last-child")
:only-child
요소가 상위 요소의 유일한 하위 요소인 경우
와 일치합니다. 상위 요소에 다른 요소가 포함되어 있으면 일치하지 않습니다.
ul에서 유일한 하위 요소인 li 찾기:
$("ul li:only-child")
8. 양식 선택기 Forms
이름
설명
설명
: 입력
모든 입력, 텍스트 영역, 선택 및 버튼 요소와 일치
모든 입력 요소 찾기:
$( “:input”)
:text
모든 텍스트 상자 일치
모든 텍스트 상자 찾기:
$(“:text”)
:password
모든 비밀번호 상자 일치
모든 비밀번호 상자 찾기:
$(“:password”)
:radio
모든 라디오 일치 버튼
모든 라디오 버튼 찾기
:체크박스
모든 체크박스 일치
모든 체크박스 찾기:
$(“:checkbox”)
:submit
모든 제출 버튼 일치
모든 제출 버튼 찾기:
$(“:submit”)
:image
모든 이미지 필드와 일치
모든 이미지 필드와 일치:
$(“:image”)
:reset
모든 재설정 버튼과 일치
모든 재설정 버튼 찾기:
$(":reset")
:button
모든 버튼 일치 모든 버튼:
$(":button")
:file
모든 파일 필드 일치
모든 파일 필드 찾기:
$(":file ”)
9. 양식 필터
이름
설명
설명
:enabled
사용 가능한 모든 요소 일치
사용 가능한 모든 입력 요소 찾기:
$( "입력:활성화")
:비활성화
비활성화된 모든 요소 일치
사용할 수 없는 모든 입력 요소 찾기:
$("input:disabled")
:checked
선택된 모든 요소 일치 선택한 요소 (체크박스, 라디오박스 등, 선택 항목 제외)
선택한 모든 체크박스 요소 찾기:
$("input:checked")
:selected
선택한 모든 옵션 요소 일치
선택한 모든 옵션 요소 찾기:
$("select option:selected")
jQuery 선택자에 대한 더 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
