>  기사  >  웹 프론트엔드  >  jQuery를 더 잘 사용하는 방법에 대한 일반적인 방법 요약

jQuery를 더 잘 사용하는 방법에 대한 일반적인 방법 요약

伊谢尔伦
伊谢尔伦원래의
2017-06-19 14:28:311271검색

jQuery가 너무 사용하기 쉽다는 사실은 객체를 가져올 때 CSS 선택기와 호환되는 구문을 사용한다는 사실과 많은 관련이 있습니다. 결국 모든 사람이 CSS 선택기에 익숙합니다(CSS 선택기에 대해서는 방법을 확인하세요). 10분 안에 CSS 선택기를 얻으려면) 그러나 그 장점은 CSS3 선택기와 호환되며 훨씬 더 많은 것을 가지고 있다는 것입니다.

Selector

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')필터링 방법 아이 찾기 컬렉션에 있는 각 요소의 노드
$('li.item-ii').find('li').css('background-color', 'red');
기본 선택기
$('*') 페이지의 모든 요소와 일치
$('#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)
.filter(selector)

컬렉션에 있는 현재 요소를 필터링합니다

$('li').filter(':even').css('background-color', 'red');

기본 메서드

.ready(handler)

문서가 로드된 후 실행되는 메서드로 창과 다릅니다. onload

$(document).ready(function() {  // Handler for .ready() called.});

.each(function(index,element))

컬렉션 Element

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) 개체 병합

var object = $.extend({}, object1, object2);
의 각 요소를 탐색합니다.

위 내용은 jQuery를 더 잘 사용하는 방법에 대한 일반적인 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.