jQuery가 너무 사용하기 쉽다는 사실은 객체를 가져올 때 CSS 선택기와 호환되는 구문을 사용한다는 사실과 많은 관련이 있습니다. 결국 모든 사람이 CSS 선택기에 익숙합니다(CSS 선택기에 대해서는 방법을 확인하세요). 10분 안에 CSS 선택기를 얻으려면) 그러나 그 장점은 CSS3 선택기와 호환되며 훨씬 더 많은 것을 가지고 있다는 것입니다.
CSS 선택기의 기본 사항을 익힌 후에는 jQuery 선택기를 살펴보는 것이 매우 간단합니다.
기본 선택기 | |
$('*') | 페이지의 모든 요소와 일치 |
$('#id') | id 선택기 |
$ ('.class') | 클래스 선택기 |
$('element') | 태그 선택기 |
구성/레벨 선택기 | |
$( 'E,F') | 다중 요소 선택기, ",로 구분됨, 동시에 요소 E 또는 요소 F |
$('E F') | 하위 선택기와 일치하며 사용됨 공백으로 구분, E 요소의 모든 후손과 일치합니다(하위 요소뿐만 아니라 하위 요소가 재귀적으로 하향됨)Element F |
$(E>F) | 하위 요소 선택기, ">"로 구분, E 요소 |
$('E+F') | 직접 인접 선택기의 모든 직접 하위 요소와 일치하고 E 요소 의 인접 및 동일한 레벨과 일치합니다. 요소 F |
일반적인 인접 선택자(동생 선택자), E 요소 | 다음에 동일 레벨 요소 F와 일치합니다(직접 인접 여부에 관계없이) |
클래스 이름에 class1과 class2가 모두 포함된 일치 요소 | |
기본 필터 선택기 | |
첫 번째 all E | |
모든 E의 마지막 | |
Filter by selector E | |
모든 E의 모든 INDEX는 짝수입니다. | |
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 |
Visual selector | |
$('E:hidden') | 모두 숨겨진 E |
$('E:visible') | 모든 보이는 E |
속성 필터 선택기 | |
$('E[attr]') | E 속성 attr |
$('E[attr=value]') | E 속성 attr=value |
$('E[attr !=value]') | 속성 attr!=값 E |
$('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) | 아이 찾기 컬렉션에 있는 각 요소의 노드
$('li').filter(':even').css('background-color', 'red');
기본 메서드
.ready(handler) 문서가 로드된 후 실행되는 메서드로 창과 다릅니다. onload$(document).ready(function() { // Handler for .ready() called.});
$("li" ).each(function( index ) { console.log( index + ": " + $(this).text() ); });
jQuery.extend( target [, object1 ] [, objectN ] ) 개체 병합
var object = $.extend({}, object1, object2);의 각 요소를 탐색합니다.
위 내용은 jQuery를 더 잘 사용하는 방법에 대한 일반적인 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!