jQuery가 너무 사용하기 쉽다는 사실은 객체를 가져올 때 CSS 선택기와 호환되는 구문을 사용한다는 사실과 많은 관련이 있습니다. 결국 모든 사람이 CSS 선택기에 익숙합니다(CSS 선택기에 대해서는 방법을 확인하세요). 10분 안에 CSS 선택기를 얻으려면) 그러나 그 장점은 CSS3 선택기와 호환되며 훨씬 더 많은 것을 가지고 있다는 것입니다.
CSS 선택기의 기본 사항을 익힌 후에는 jQuery 선택기를 살펴보는 것이 매우 간단합니다.
$('E~F')일반적인 인접 선택자(동생 선택자), E 요소$('.class1.class2')클래스 이름에 class1과 class2가 모두 포함된 일치 요소$("E:first" )첫 번째 all E$("E:last")모든 E의 마지막$("E:not(selector)")Filter by selector E $ ("E : EVEN") 모든 E의 모든 INDEX는 짝수입니다. $ ("E: ODD") All in E.eq(n)") " 인덱스 n이 있는 E의 모든 요소 $("E:gt(n)") " " 인덱스가 n보다 큰 E의 모든 요소 $("E: ll(n)") 인덱스가 n보다 작은 E의 모든 요소 n $(":header")h1~h7 요소 선택 $("p:animated")지금 선택 애니메이션 효과를 수행하는 요소 $('E:contains(value)')콘텐츠에 값이 포함된 요소 $('E:empty ')빈 콘텐츠가 있는 요소$('E:has (F)')하위 요소에 F가 있는 요소 $('p:has(a)'): 태그 p$('E: parent')태그 포함 상위 요소는 다음과 같습니다. E 요소, $('td: parent'): 상위 요소는 td$('E:hidden')모두 숨겨진 E의 요소입니다. $('E:visible')모든 보이는 E$('E[attr]')E 속성 attr $('E[attr=value]')E 속성 attr=value$('E[attr !=value]')속성 attr!=값 E 하위 요소 필터$('E:nth-child (3n+1)')$('E:nth- child(even)')$('E:nth-child(odd)')$ ('E:first-clild')$('E:last-clild')$('E: only-clild')양식 요소 선택기 $(':checked') $('option: selected')필터링 방법 아이 찾기 컬렉션에 있는 각 요소의 노드1 |
|
기본 선택기 | |
$('*') | 페이지의 모든 요소와 일치 |
$('#id') | id 선택기 |
$ ('.class') | 클래스 선택기 |
$('element') | 태그 선택기 |
구성/레벨 선택기 | |
$( 'E,F') | 다중 요소 선택기, ",로 구분됨, 동시에 요소 E 또는 요소 F |
$('E F') | 하위 선택기와 일치하며 사용됨 공백으로 구분, E 요소의 모든 후손과 일치합니다(하위 요소뿐만 아니라 하위 요소가 재귀적으로 하향됨)Element F |
$(E>F) | 하위 요소 선택기, ">"로 구분, E 요소 |
$('E+F') | 직접 인접 선택기의 모든 직접 하위 요소와 일치하고 E 요소 의 인접 및 동일한 레벨과 일치합니다. 요소 F |
다음에 동일 레벨 요소 F와 일치합니다(직접 인접 여부에 관계없이) | |
기본 필터 선택기 | |
콘텐츠 필터 | |
Visual selector | |
속성 필터 선택기 | |
$('E[attr ^=value]') | 속성 속성은 valueE로 시작합니다 |
$('E[attr $=value]') | 속성 속성은 값 E로 시작합니다. 값 끝에 |
$('E[attr *=value]') | |
$('E:nth-child(n)'을 사용하세요. )E의 n번째 자식 노드 | |
인덱스가 3n+1 표현식과 일치하는 자식 노드 | |
인덱스가 짝수인 하위 노드 | |
인덱스가 홀수인 하위 노드 | |
모든 E의 첫 번째 하위 노드 | |
모든 E | |
유일한 하위 노드가 있는 E의 하위 노드 | |
$('E:type')특정 입력 유형 | |
선택한 체크박스 또는 라디오 | |
선택한 옵션 | |
.find(selector) |
1 |
|
기본 메서드
.ready(handler)문서가 로드된 후 실행되는 메서드로 창과 다릅니다. onload
1 |
|
1 2 3 |
|
jQuery.extend( target [, object1 ] [, objectN ] ) 개체 병합
1 |
|
위 내용은 jQuery를 더 잘 사용하는 방법에 대한 일반적인 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!