> 웹 프론트엔드 > JS 튜토리얼 > jQuery 선택기 Understanding_jquery

jQuery 선택기 Understanding_jquery

WBOY
풀어 주다: 2016-05-16 18:32:11
원래의
1228명이 탐색했습니다.

$의 선택자 부분:
$를 사용할 때마다 반환 값은 객체입니다.
$ 선택자는 주로 태그를 선택하는 데 사용됩니다. 그러나 매우 흥미로운 점은 일반적인 브라우저를 지원하고 CSS의 많은 선택기가 IE6에서 지원되지 않는다는 것입니다.
1. 기본 선택기(3가지 유형): ----$ 사용 other 반환 값은 객체입니다.
$("label name"), 예: $("p") 모든 p 레이블 노드 선택
$("#id name"), 예: $("#test " )는 ID가 test인
$(".class name") 레이블 노드를 선택합니다. 예를 들어 $(".test")는 test 클래스가 있는 모든 레이블 노드
를 선택합니다. $( ") 및 $(".class name") 위의 "레이블 이름"은 만족한 모든 노드를 반환합니다. 추가 필터링을 위해 eq, gt, lt 등과 같은 일부 기능을 추가할 수 있습니다.
2. 그룹 선택기: - --- ","로 구분된 3개의 기본 선택기 조합
규칙을 만들어 보겠습니다. "태그 이름 또는 #id 이름 또는 .class 이름"을 mix로 쓴 다음 mix는 태그 이름 또는 # id를 나타냅니다. 또는 .class.
$("mix,mix,mix,..."), 예:$("div,#test1,p,.test2,#test3")

3 .Descendant 선택기: ----" "로 구분된 3개의 기본 선택기 조합, 직접 선택기는 모두 유효합니다
$("mix mix"). 물론 여러 중첩될 수 있지만 하위 선택기는 다음과 같을 수 있습니다. 깊은 하위 항목이므로 $("mix mix mix...")는 별로 유용하지 않습니다. 예: $("div .test"): div 태그에 test가 포함된 클래스의 모든 하위 요소(즉, 중첩된 div의 class 속성은 테스트 태그입니다.

4. 하위 선택자: ----">"로 구분된 3개의 기본 선택자의 조합, 상위 및 하위에만 유효합니다.
$( "mix>mix"), 이는 비교를 위해 하위 선택자 뒤에 배치됩니다. 하위 선택자는 깊은 중첩을 처리하지 않습니다.

는 여기서 p 단락 태그에 유효합니다. 그러나

에는 유효합니다. ;p class="test">

는 여기서 p 단락 태그에 유효하지 않습니다.
$("div .test)
를 사용하세요. 선택기: ----" "로 구분된 3개의 기본 선택기 조합, 다음 형제 노드
$("mix mix")만 다음 형제 노드를 선택합니다. 예: $(" div #test" ), ID가 test인 노드는 $("div #test; ")는 p 단락 노드

를 얻을 수 있으며 얻을 수 없습니다
6. 속성 선택자: ---- " |=|^|$|*"
CSS 선택자에 속성 선택자가 배치되지 않는 이유는 jQuery에서 작성 방법이 다르기 때문입니다. CSS의 메서드에 대해서는 이전에 작성한 CSS 선택기 기사를 참조할 수 있습니다. jQuery의 작성 방법은 xPath와 유사합니다.
$("mix[@attr]"): 모든 믹스를 선택하고 attr 속성 Node를 갖습니다.
$("mix[@attr=a_value"]): attr 속성을 갖고 속성 값을 a_value로 만족하는 이 혼합의 모든 노드
$("mix[@attr^=a_value_head"])를 선택합니다. : attr 속성의 속성 값은 a_value_head
$("mix[@attr$=a_value_end"])로 시작합니다. attr 속성의 속성 값은 a_value_end
$("mix[@attr*= a_value "]): attr 속성의 속성값은 a_value

를 포함합니다. 7. 제한된 선택자:
이 이름은 제가 직접 지은 이름입니다. 사실 선택자 조합은 제한된 의미를 가지고 있습니다. 어떤 내용이 소개되는지 이해하실 수 있을 것입니다.
적격한 하위 노드 선택기가 있습니다. $("mix1[mix2]"): mix2를 포함하는 mix1 노드를 반환합니다. 예: $("div[a]"): 다음을 포함하는 div입니다.
이것은 $("div a")와 다릅니다. 후자는 div의 a 태그를 나타내며 전자는 div 태그 개체를 반환합니다.
selector: $( "mix:condition"): 태그를 혼합하고 한정 조건을 충족합니다.
E:root: 유형은 E이고 문서의 루트 요소입니다.
E:nth-child( n): E 유형의 상위 요소 n개 하위 요소의 번째 요소이며 기본 번호는 1부터 시작합니다
E: 첫 번째 하위: 상위 요소의 E 유형의 첫 번째 하위 요소입니다
E:last-child: 상위 요소의 첫 번째 하위 요소입니다. E 유형의 마지막 하위 요소입니다.
E:only-child: 상위 요소의 E 유형의 유일한 하위 요소입니다

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿