이 글의 예제에서는 기본 작업, 작업할 요소 선택, DOM 요소 처리 등 요소에 대한 jQuery의 작업을 설명합니다. jQuery를 학습하는데 좋은 참고값이 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
1. 기본
jquery 개체 집합:
$(): jquery 객체 컬렉션
jquery 개체 집합의 요소 가져오기:
인덱스를 사용하여 래퍼에서 javascript 요소를 가져옵니다.
var temp = $('img[alt]')[0]
jquery의 get 메소드를 사용하여 jquery 객체 세트의 javascript 요소를 가져옵니다.
var temp = $('img[alt]').get(0)
jquery의 eq 메서드를 사용하여 jquery 개체 집합에서 jquery 개체 요소를 가져옵니다.
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery 객체 세트를 javascript 배열로 변환:
var arr = $('label+button').toArray()
레이블 뒤의 동일한 레벨에 있는 모든 버튼 요소는 자바스크립트 배열로 변환됩니다
jquery 개체 집합의 색인:
var n = $('img').index($('img#id')[0]) 참고: index() 매개변수는 자바스크립트 요소입니다.
var n = $('img').index('img#id')는 이전 줄과 동일합니다. 찾을 수 없으면 -1
을 반환합니다.
var n = $('img').index()는 동일한 레벨 요소에서 img의 인덱스를 가져옵니다.
jquery 개체 집합에 더 많은 jquery 개체 집합을 추가합니다.
쉼표를 사용하세요:
$('img[alt],img[title]')
추가 방법 사용:
$('img[alt]').add('img[title]')
다른 jquery 객체에 대해 다른 방법을 사용하세요.
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
jquery 개체 집합에 새로 생성된 요소를 추가합니다.
$('p').add('<div></div>');
jquery 개체 집합에서 요소 삭제:
$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
jquery 개체 집합 필터링:
$('td').filter(function(){return this.innerHTML.match(^d $)}) 숫자를 포함하는 td
jquery 개체 집합의 하위 집합 가져오기
$('*').slice(0,4) 처음 4개 요소를 포함하는 새로운 jquery 객체 세트
$('*').slice(4) 처음 4개 요소를 포함하는 새로운 jquery 객체 세트
$('div').has('img[alt]')
jquery 개체 집합의 요소 변환:
var allIds = $('div').map(function(){
return (this.id==undefined) ? null : this.id;
}).get();위 예제는 get 메소드를 통해 자바스크립트 배열로 변환될 수 있습니다.
jquery 개체 집합의 요소를 탐색합니다.
$('img').each(function(n){
this.alt = '这是第['+n+']张图片，图片的id是' + this.id;
})
$([1,2,3]).each(function(){alert(this);})
요소 간 관계를 사용하여 jquery 개체 집합 가져오기:
$(this).closest('div') 예를 들어 트리거된 버튼이 발생한 div
$(this).siblings('button[title="Close"]')자신을 제외한 모든 형제 요소
$(this).children('.someclassname')중복 하위 노드를 제외한 모든 하위 노드 요소
$(this).closest('')는 조상 요소에 가깝습니다
$(this).contents()는 요소 콘텐츠로 구성된 jquery 개체 집합입니다. 예를 들어