다양한 요소를 조작하기 위한 jQuery 기본 튜토리얼_jquery

이 글의 예제에서는 기본 작업, 작업할 요소 선택, 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 개체 집합입니다. 예를 들어