jquery 선택기, css3 선택기 및 다양한 선택기로서 매우 유연한 jquery 선택기, 어떻게 사용합니까?

1. jQuery 선택기의 기본 사용법

CSS3 선택기 표준 초안에 정의된 선택기 구문에서 jQuery는 상당히 완전한 하위 집합 집합을 지원하고 일부 비표준도 추가하지만 매우 유용합니다. 의사급. 참고: 이 섹션은 jQuery 선택기에 관한 것입니다. 이러한 선택기 중 대부분(전부는 아님)을 CSS 스타일 시트에서 사용할 수 있습니다. 선택기 구문은 3단계 구조로 되어 있습니다. 가장 간단한 형태의 선택기를 본 적이 있을 것입니다. "#te st"는 id 속성이 "test"인 요소를 선택합니다. "blockquote"는 문서의 모든

요소를 선택하는 반면, "p.note"는 클래스 속성이 "note"인 모든

요소를 선택합니다. 단순 선택자는 결합 문자가 구분 기호로 사용되는 한 "p.note>p" 및 "blockquote i"와 같은 "결합 선택자"로 결합될 수 있습니다. 단순 선택기와 결합 선택기는 쉼표로 구분된 목록으로 그룹화할 수도 있습니다. 이 유형의 선택기 그룹은 $() 함수에 전달되는 가장 일반적인 선택 형태입니다. 결합 선택자와 선택자 그룹을 설명하기 전에 먼저 단순 선택자의 구문을 이해해야 합니다.

1. 단순 선택기 사용법

단순 선택기(명시적이든 암시적이든)의 시작은 태그 유형 선언입니다. 예를 들어

요소에만 관심이 있는 경우 간단한 선택기는 "P"로 시작할 수 있습니다. 선택한 요소가 태그 이름과 관련이 없는 경우 대신 와일드카드 "*"를 사용할 수 있습니다. 선택기가 태그 이름이나 와일드카드로 시작하지 않으면 와일드카드가 암시적으로 포함됩니다.

태그 이름 또는 와일드카드는 대체 문서 요소의 초기 세트를 지정합니다. 단순 선택기에서 태그 유형 선언 뒤의 부분은 0개 이상의 필터로 구성됩니다. 필터는 작성된 순서대로 왼쪽에서 오른쪽으로 적용되며 각 필터는 선택한 요소 집합의 범위를 좁힙니다. 다음 표에는 jQuery에서 지원하는 필터가 나열되어 있습니다.

jQuery Selection Filter

Filter Meaning

#id id 속성이 id인 요소와 일치합니다. 유효한 ITML 문서에는 동일한 ID를 가진 요소가 여러 개 있을 수 없으므로 이 필터는 일반적으로 독립 실행형 선택기로 사용됩니다.

.class 클래스 속성(공백으로 구분된 문자열)과 일치합니다 클래스 단어의 모든 요소를 ​​포함하는 단어 목록

[attr] attr 속성이 있는 모든 요소와 일치합니다(값에 관계없이)

[attr=val] 은 attr 속성이 있는 모든 요소와 일치합니다. attr 속성과 값 val

[attr!=val]인 모든 요소 attr 속성이 없거나 attr 속성의 값이 val이 아닌 모든 요소를 ​​일치시킵니다((jQuery 확장)

[attr^=val] attr 속성 값이 val로 시작하는 요소 일치

[attr$=val] attr 속성 값이 val로 끝나는 요소 일치

[attr*=val ] attr 속성 값에 val이 포함된 요소 일치

[attr~=val] 요소는 attr 속성이 공백으로 구분된 단어 목록으로 해석될 때 val이라는 단어가 있는 요소와 일치합니다. 선택기 "p.note"는 "p[class~". =note]"와 일치합니다.

[attr|=val] attr 속성 값이 val로 시작하고 그 뒤에 다른 문자가 없는 요소와 일치합니다. 다른 문자는 하이픈으로 시작하는 요소입니다.

:animated matches 애니메이션이 적용되는 요소, 애니메이션은 jQuery

:button 및 요소(jQuery 확장)

:checkbox 요소(jQuery 확장), 이 필터는 입력 태그 "input:checkbox"를 명시적으로 접두사로 붙일 때 더 효율적입니다. 지정된 텍스트를 포함하는 요소(jQuery 확장) 이 필터의 괄호는 텍스트 범위를 지정하므로 따옴표가 필요하지 않습니다. 필터링된 요소의 텍스트는 textContent 또는 innerText 속성에 의해 결정됩니다. 이는 태그와 설명이 없는 원본 문서 텍스트입니다.

: 비활성화됨 비활성화된 요소와 일치

: 비어 있음 일치하지 않는 하위 노드, 텍스트 내용이 없는 요소

: 활성화됨 비활성화되지 않은 요소와 일치

: eq(n) 문서 순서를 기준으로 선택한 목록의 n번째 요소와 일치하며 일련 번호는 0부터 시작합니다( jQuery 확장자)

:even 목록의 짝수 요소와 일치합니다. 첫 번째 요소의 시퀀스 번호가 0이므로 첫 번째, 세 번째, 다섯 번째 등의 요소가 실제로 선택됩니다(jQuery 확장)

:file matches Element(jQuery 확장명)

:first 은 목록의 첫 번째 요소와 일치합니다. ":eq(0)"(jQuery 확장)과 동일

:first-child 일치하는 요소는 상위 노드의 첫 번째 하위 요소입니다. 참고: 이는 ":first"와 다릅니다.

:gt(n) 문서 순서를 기준으로 0부터 시작하여 선택한 목록에서 일련 번호가 n보다 큰 요소와 일치합니다(jQuery 확장명)

: has( sel) 일치하는 요소에는 포함된 선택기 sel

:header 모든 헤더 요소와 일치합니다:

,

,

,

,

또는

(jQuery 확장)

:hidden 은 화면에 표시되지 않는 모든 요소와 일치합니다. 일반적으로 이러한 요소의 offsetWidth 및 offsetHeight는 0으로 간주될 수 있습니다.

:image 요소와 일치합니다. 이 필터는 요소(jQuery 확장)와 일치하지 않습니다.

:input 는 사용자 입력 요소(, , <select> 및 <button>)와 일치합니다. ( jQuery 확장)</button></select>

:last 는 선택한 목록의 마지막 요소와 일치합니다. ((jQuery 확장)

:last-child 일치하는 요소는 상위 노드의 마지막 하위 요소입니다. 참고: 이는 ":last"와 다릅니다

:lt(n) 문서 순서를 기준으로 0부터 시작하여 선택한 목록에서 n보다 작은 시퀀스 번호를 가진 요소와 일치합니다(jQuery 확장)

:not(sel) 인라인 선택기 sel

:nth(n) ":eq(n)"(jQuery의 확장)

과 동일: nth -child(n) 일치하는 요소는 상위 노드의 n번째 하위 요소입니다. . 숫자 값, 짝수라는 단어, 홀수라는 단어 또는 계산 공식일 수 있습니다. 상위 노드의 하위 요소 중 2위 또는 4위인 요소를 선택하려면 ":nth-child(even)"를 사용하세요. 부모 노드의 자식 요소 중 1위, 3위 등의 순위를 갖는 요소를 선택하려면 ":nth-child(odd)"를 사용하세요.

n이 xn 또는 xn+y와 같은 계산 공식인 경우가 더 일반적인 상황입니다. 여기서 x와 y는 정수이고 n은 리터럴 n입니다. 따라서 nth-child(3n+1)을 사용하여 1번째, 4번째, 7번째 등의 요소를 선택할 수 있습니다.

이 필터의 시퀀스 번호는 1부터 시작하므로 요소가 상위 노드의 첫 번째 하위 요소인 경우 홀수 요소로 간주되어 3n 대신 3n+1과 일치합니다. ":even" 및 ":odd" 필터와 구별하기 위해 후자와 일치하는 시퀀스 번호는 0부터 시작합니다.

:odd 페이페이 목록에서 홀수(0부터 시작)가 있는 요소와 일치합니다. 시퀀스 번호에 주의하세요 요소 1과 3은 각각 두 번째와 네 번째 일치 요소입니다(jQuery 확장)

:only-child 상위 노드의 유일한 하위 노드인 요소와 일치합니다

:parent ":empty"(jQuery의 확장)와 반대로 상위 노드의 요소와 일치합니다.

:password 요소와 일치합니다(jQuery의 확장)

: radio 는 요소(j Query의 확장)와 일치합니다.

:reset 은 및

:selected 선택한 체크박스와 라디오 버튼을 선택하려면 ":checked"를 사용하세요.(jQuery 확장)

: 제출 및 요소(jQuery 확장)

:text jQuery 확장)

:visible 현재 표시되는 모든 요소와 일치: 일반적으로 이러한 요소의 offsetWidth 및 offsetHeight 값은 ":hidden"의 반대인 0이 아닌 것으로 간주할 수 있습니다.

참고: 표에 나열된 선택기 중 일부는 괄호 안의 매개 변수를 허용합니다. 예를 들어 아래 선택기는 "JavaScript"라는 단어가 포함된 경우 상위 노드의 하위 요소 중 1위 또는 2위인 요소를 선택합니다. ". 요소.

p:nth-child(3n+1): text (JavaScript):not(:has(a))

일반적으로 태그 유형 접두사를 지정하면 필터가 더 많이 실행될 수 있습니다. 예를 들어, 라디오 버튼을 선택하기 위해 단순히 ":radio"를 사용하는 것보다 "input:radio"를 사용하는 것이 더 좋습니다. 선택기 "#" 주소"는 일반적으로 더 명시적인 "form#address"보다 더 효율적입니다.

2. 조합 선택기 사용

간단한 선택기를 결합하려면 특수 연산자나 "조합기"를 사용하세요. 문서 트리의 요소 간 관계. 다음 표에는 jQuery에서 지원하는 결합 선택기가 나열되어 있습니다. 이러한 조합 선택기는 CSS3에서 지원하는 것과 동일합니다.

다음은 결합된 선택기의 몇 가지 예입니다.

3. 선택자 조합

$() 함수에 전달된(또는 스타일 시트에서 사용되는) 선택자는 선택자 그룹으로, 하나 또는 구성된 항목으로 구성된 쉼표로 구분됩니다. 여러 개의 단순 선택자 또는 결합된 선택자. 선택기 그룹과 일치하는 요소는 선택기 그룹의 모든 선택기와만 일치하면 됩니다. 우리에게는 간단한 선택자가 선택자 그룹으로 간주될 수도 있습니다. 다음은 선택기 그룹의 몇 가지 예입니다.

및

요소와 class="note"

하위 요소 참고: CSS 및 jQuery 선택기 구문을 사용하면 간단한 선택기에서 괄호를 사용할 수 있습니다. 일부 필터에서는 더 일반적인 그룹화에는 허용되지 않습니다. 예를 들어 선택기 그룹이나 선택기 조합을 괄호 안에 넣고 이를 간단한 선택기로 처리할 수 없습니다:

2. 선택 방법

이 섹션에서는 이러한 선택 방법을 설명합니다. 이러한 선택 방법의 대부분은 선택기 구문과 동일한 기능을 제공한다는 것을 알 수 있습니다.

요소

Paras.eq (-2) // 선택 두 번째 & lt; p & gt;

paras [1] // 두 번째 & lt p & gt;

위치별로 선택 항목을 추출하는 보다 일반적인 방법은 슬라이스()o입니다. jQuery의 슬라이스() 메서드는 Array.slice() 메서드와 유사합니다. 전자는 시작 및 끝 일련 번호를 허용합니다(음수 일련 번호는 끝) 및 반환된 jQuery 객체는 시작부터 끝 번호까지의 요소 집합을 포함합니다(끝 번호는 포함하지 않음). 끝 시퀀스 번호가 생략되면 반환된 개체에는 시작 시퀀스 번호부터 시작하는 모든 요소가 포함됩니다.

$("p").slice(2,5) //3번째, 4번째 및 5번째< ;P> 선택 ;Element

$("p").slice(-3) //마지막 3p>요소 선택

filter()는 3가지 호출 방법이 있는 일반적인 선택 필터링 방법입니다.

　 선택기 문자열을 filter()에 전달하면 선택기와 일치하는 선택된 요소만 포함된 jQuery 객체가 반환됩니다.

　 또 다른 jQuery 객체를 filter()에 전달하면 이 두 Query 객체의 교차점을 포함하는 새로운 jQuery 객체가 반환됩니다. 요소 배열이나 단일 문서 요소를 filter()에 전달할 수도 있습니다.

　 판단 함수를 filter()에 전달하면 일치하는 각 요소에 대해 함수가 호출됩니다. filter()는 판단 함수가 true(또는 모든 true 값)인 요소만 포함하는 jQuery 객체를 반환합니다. 판정 함수 호출 시 this 값은 현재 요소이고, 파라미터는 요소 번호입니다.

$("p").filter(".note") //$("p.note")

$("p").filter($(".note"와 동일) )) //$("p.note")

$("p").filter(function(idx){return idx%2 == 0})과 동일 //$("p: even ")은

not() 메소드와 동일합니다. 단, 의미는 filter()와 반대라는 점만 다릅니다. 선택기 문자열을 not()에 전달하면 선택기와 일치하지 않는 요소만 포함하는 새 jQuery 객체가 반환됩니다. jQuery 객체, 요소 배열 또는 단일 요소를 not()에 전달하면 명시적으로 제외된 요소를 제외하고 선택한 모든 요소가 반환됩니다. not()에 판단 함수를 전달하면 판단 함수는 filter()와 마찬가지로 호출됩니다. 단, 반환된 jQuery 객체에는 판단 함수가 false 또는 다른 false 값을 반환하도록 하는 요소만 포함된다는 점이 다릅니다.

$(" p").not("#header, #footer"); //두 개의 특수 요소를 제외한 모든 요소

jQuery 1.4에서 선택 항목을 추출하는 또 다른 방법은 has() 메서드입니다. 선택기가 전달되면 has()는 하위 항목이 선택기와 일치하는 선택된 요소만 포함하는 새 jQuery 객체를 반환합니다. has()에 문서 요소를 전달하면 선택한 요소 집합이 지정된 요소의 조상 노드인 선택한 요소로 조정됩니다.

$("p").has("a[href ]") // 링크가 포함된 단락

add() 메소드는 선택 항목을 필터링하거나 추출하는 대신 선택 항목을 확장합니다. $() 함수에 전달된 모든 매개변수(함수 제외)는 add() 메소드에도 전달될 수 있습니다. add() 메소드는 원래 선택된 요소와 $() 함수에 전달된 매개변수에 의해 선택된(또는 생성된) 요소를 반환합니다. add()는 중복 요소를 제거하고 요소가 문서의 순서대로 정렬되도록 합니다.

//모든

요소에 해당하는 모든

$("p").add(p) //선택기를 add()에 전달

$ ("p").add( $("p")) //jQuery 객체를 add()

에 전달합니다. var paras = document.getElementsByTagName("p") //배열형 객체

$("p") .add(paras); // add()

메서드의 체인 호출을 실현하기 위해 많은 jQuery 개체 메서드는 결국 호출 개체를 반환합니다. 그러나 이 섹션에 설명된 메서드는 모두 새로운 jQuery 개체를 반환합니다. 계속해서 체인 호출을 할 수 있으나, 체인 호출 이후에 동작하는 요소 세트는 더 이상 체인 호출 시작 시의 요소 세트가 아닐 수도 있다는 점을 분명히 인지해야 합니다.

실제 상황은 더 복잡합니다. 여기에 설명된 선택 방법은 새 ejQuery 개체를 생성하거나 반환할 때 파생된 이전 jQuery 개체에 대한 내부 참조를 추가합니다. 이렇게 하면 연결된 목록이나 jQuery 개체의 스택이 생성됩니다. end() 메서드는 스택을 팝하고 저장된 jQuery 객체를 반환하는 데 사용됩니다. 일련의 호출에서 end()를 호출하면 일치하는 요소 집합이 이전 상태로 복원됩니다. 다음 코드를 고려하세요.

//모든

요소를 찾은 다음 그 안에 있는

요소를 찾습니다.

//

요소를 강조 표시합니다. ; 요소 A border

//먼저 연결 호출을 사용하지 않음

var ps = $("p");

var paras = p.find("p");

paras .addClass("highlight");

ps.css("border", "solid black 1px");

//다음은 체인 호출을 사용하여

을 달성하는 방법을 보여줍니다. $( "p").find("p").addClass("highlight").end().css("border", "solid black 1px");

//순서를 반대로 할 수도 있습니다 호출을 피하기 위한 작업 end()

$("p").css("border", "solid block 1px").find("p").addClass("highlight");

수동으로 정의하려는 경우 end() 메서드와의 호환성을 유지하면서 요소 집합을 선택하려면 새 요소 집합을 배열 또는 유사 배열 객체로 push5tack() 메서드에 전달할 수 있습니다. 지정된 요소는 새로 선택한 요소가 되며 이전에 선택한 요소 세트는 스택에 푸시됩니다. 그런 다음 end() 메서드를 사용하여 해당 요소를 복원할 수 있습니다.

var sel = $("p");

Elements

sel.pushStack(document.getElementsByTagName("p")); //모든

요소

sel.end() p> ;요소

이제 end() 메서드와 이 메서드가 사용하는 선택 스택을 설명했으므로 마지막으로 설명해야 할 메서드가 하나 있습니다. andSelf()는 현재 선택된 모든 요소와 이전에 선택한 모든 요소를 ​​포함하는 새 jQuery 객체를 반환합니다(중복은 제거됩니다). andSelf() 메소드는 add() 메소드와 동일합니다. 아마도 "addPrev"가 더 설명적인 이름일 것입니다. 예를 들어, 위 코드의 다음 변형을 고려해 보세요. 상위 노드에서

요소를 강조 표시한 다음 해당

요소에 테두리를 추가합니다. ("p ") .find (" p "). // & lt; p"를 찾습니다. end (). end

위에 설명된 filter(), add() 및 not() 메서드는 선택한 각 요소 집합에 대해 교집합, 합집합 및 차이 연산을 수행합니다. jQuery는 또한 현재 선택된 요소 세트를 컨텍스트로 사용할 수 있는 다른 선택 방법도 정의합니다. 선택된 각 요소에 대해 이러한 메소드는 선택된 요소를 컨텍스트 또는 시작점으로 사용하여 선택된 요소의 새로운 세트를 가져온 다음 새로 선택된 모든 요소의 통합을 포함하는 새로운 jQuery 객체를 반환합니다. add() 메서드와 마찬가지로 중복된 요소는 제거되고 정렬되어 요소가 문서에 나타나는 순서대로 정렬됩니다.

이 카테고리를 선택하는 가장 일반적인 방법은 find()입니다. 현재 선택된 각 요소의 하위 항목 중에서 지정된 선택기 문자열과 일치하는 요소를 찾은 다음 일치하는 하위 항목 집합을 나타내는 새 jQuery 객체를 반환합니다. 새로 선택한 요소는 선택한 요소의 기존 세트에 병합되지 않습니다. 또한 find()는 filter()와 다릅니다. filter()는 새 요소를 선택하지 않고 단순히 현재 선택한 요소 집합을 줄입니다.

$("p").find("p") //$("p p")와 동일하게 요소 찾기

이 카테고리의 다른 메소드는 현재 선택된 것을 나타내는 새 jQuery 객체를 반환합니다. element 각 요소의 하위 요소, 형제 요소 또는 상위 요소에 초점을 맞춥니다. 대부분은 선택적 선택기 문자열을 인수로 받아들입니다. 선택기가 전달되지 않으면 모든 하위 요소, 형제 요소 또는 상위 요소가 반환됩니다. 선택기가 전달되면 요소 세트를 필터링하여 일치하는 요소만 반환합니다.

children() 메서드는 선택한 각 요소의 직접 하위 요소를 반환하며, 이는 선택적 선택기 매개변수로 필터링할 수 있습니다.

//ID가 "header" 및 "footer"인 하위 노드 요소를 찾습니다. 요소

//의 모든 요소는 $("#header>span, #footer>span")

$("#header, #footer").children(" span" )

contents() 메서드는 텍스트 노드를 포함하여 각 요소의 모든 하위 노드를 반환한다는 점을 제외하면 children() 메서드와 유사합니다. 선택한 요소 세트에

next() 및 prev() 메서드는 선택한 각 요소(있는 경우)의 다음 및 이전 형제 요소를 반환합니다. 선택기가 전달되면 선택기와 일치하는 형제 요소만 선택됩니다.

$("h1").next("p") //$("h1+p")

$("h1").prev() //

요소

nextAll() 및 prevAll() 앞의 형제 요소는 선택한 각 요소(있는 경우) 앞이나 뒤의 모든 형제 요소를 반환합니다. siblings() 메서드는 선택한 각 요소의 모든 형제 요소를 반환합니다(선택한 요소 자체는 자신의 형제 요소가 아닙니다). 이러한 메소드에 선택기를 전달하면 일치하는 형제 요소만 반환됩니다.

$("#footer").nextAll("p") //#footer 요소 바로 뒤에 오는 모든

$("#footer").prevAll() //#footer 요소 앞에 있는 모든 형제 요소

jQuery 1.4부터 nextUntil() 및 prevUntil() 메소드는 선택기 매개변수를 허용하고 선택자와 일치하는 요소를 찾을 때까지 요소 뒤 또는 앞의 모든 형제를 선택합니다. 선택기가 생략되면 이 두 메서드는 선택기가 없으면 nextAll() 및 prevAll()과 동일하게 동작합니다.

parent() 메소드는 선택한 각 요소의 상위 노드를 반환합니다.

$("li").parent() //목록 요소의 상위 노드(예: ;ol> 요소

parents() 메서드는 선택한 각 요소(최대 요소까지)의 상위 노드를 반환합니다. parent() 및 parent() 모두 선택적 선택기 문자열 매개변수를 허용합니다.

$("a[href]").parents("p") //링크를 포함하는

요소

parentUntil()은 지정된 선택기와 일치하는 첫 번째 조상 요소가 나타날 때까지 선택한 각 요소의 조상 요소를 반환합니다. 가장 가까운() 메서드는 선택기 문자열을 전달해야 하며 선택한 각 요소(있는 경우)의 조상 요소 중에서 선택기와 일치하는 가장 가까운 조상 요소를 반환합니다. 이 방법의 목적에 따라 요소는 자체 조상으로 간주됩니다. jQuery 1.4에서는 상위 요소를 검색할 때 jQuery가 지정된 요소를 벗어나는 것을 방지하기 위해 상위 요소를 close()의 두 번째 매개변수로 전달할 수도 있습니다.

$("a[href]").closest ("p ") //링크

$("a[href]").parentsUntil(":not(p)") //모든 패키지

Elements

이상은 jquery 선택기와 원리에 대한 전체 소개입니다. 읽어주셔서 감사합니다!