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()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
jquery 개체 집합에서 요소 삭제:
$('img[제목]').not('[제목*=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(){
반환(this.id==undefine) ? null: this.id;
}).get();get 메소드를 통해 자바스크립트 배열로 변환
jquery 객체 세트의 요소 탐색
$('img').each(함수(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 개체 집합입니다. 예를 들어
$(this).find(p 스팬)
var hasImg = $('*').is('img');
$().숨기기()
$().addClass('')
$().html('')
$('a').size()요소 개수
$('p:even')
$('tr:nth-child(1)')
$('body > div') 직계 하위 요소
$('a[href=$='pdf']')속성을 기준으로
선택
$(div:has(a)) 필터
$.trim()
$(문서).ready(function(){});
$(함수(){});
$('
').insertAfter();
if(item)(){}else{} 느슨한 테스트
If(item != null) 권장 테스트, null과 정의되지 않음을 구별할 수 있음
2. 운용할 요소를 선택하세요
태그 이름에 따라: $('a')
ID 기준: $('#id')
클래스 이름에 따라: $('.someclassname')
여러 조건 충족: $('a#id.someclassname') 또는 $('div,span')
요소의 모든 하위 노드: $(p a.someclassname)
요소의 직접 하위 노드: $(ul.myList > li)
속성 이름에 따라:
$(a[href^='http://'])는 다음으로 시작합니다...
$(href$='.pdf')는 다음으로 끝납니다...
$(form[method]) form
메소드 속성을 포함
$(intput[type='text'])
$(intput[name!=''])
$(href*='some')포함
특정 요소 다음의 첫 번째 요소: $(E F)는 F와 일치하며 F는 E 다음의 첫 번째 요소입니다
특정 요소 다음의 요소: $(E~F)는 F와 일치하고 F는 E 다음의 요소입니다
통과 위치 :
$(li:first)첫번째 li
$(li:last)마지막 li
$(li:even)짝수 행 li
$(li:odd)홀수선 li
$(li:eq(n))n번째 요소, index는 0부터 시작
$(li:gt(n))n번째 요소 이후의 요소, 인덱스는 0부터 시작합니다
$(li:lt(n))n번째 요소 이전의 요소, 인덱스는 0부터 시작합니다
$(ul:first-child)목록의 첫 번째 li
$(ul:last-child)목록의 마지막 li
목록의 $(ul:nth-child(n))n번째 li
리 형제가 없는 $(ul:only-child)ul
$(ul:nth-child(even))목록에서 짝수 행 li, 홀수가 개수 행 li
목록의 $(ul:nth-child(5n 1))li
를 5로 나누고 나머지는 1입니다.
필터별:
$(input:not(:checkbox))
$(':not(img[src*="dog"])')
$('img:not([src*="dog"])')
$(div:has(범위))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
애니메이션 상태
$(input:button)에는 버튼, 재설정, 제출 유형의 입력
이 포함됩니다.
$(input:checkbox)는 $(input[type=checkbox])
와 동일합니다.
$(span:contains(food))span
텍스트 포함 food
$(입력:비활성화)비활성화
$(입력:활성화)활성화
$(input:file)은 $(input[type=file])
과 동일합니다.
$(:header)h1 ~ h6
$(입력:숨김)
$(input:image)는 $(input[type=image])
와 동일합니다.
$(:input)에는 입력, 선택, 텍스트 영역, 버튼 요소가 포함됩니다
$(tr:부모)
$(input:password)는 $(input[type=password])
와 동일합니다.
$(input:radio)는 $(input[type=radio])
와 동일합니다.
$(input:reset)은 $(input[type=reset]) 또는 $(button[type=reset])
과 동일합니다.
$('.clssname:선택됨')
$(input:submit)은 $(input[type=submit]) 또는 $(button[type=submit])
과 동일합니다.
$(input:text)는 $(input[type=text])
와 동일합니다.
$(div:표시)
3. DOM 요소 처리
요소 속성 조작:
$('*').each(함수(n){
This.id = this.tagName n;
})
속성 값 가져오기: $('').attr('');
속성 값 설정:
$('*').attr('제목', function(index, PreviousValue){
이전 값 반환 ' 나는 ' index ' 요소이고 내 이름은 ' this.id;
}) 속성 값 설정
$('입력').attr({
값: '',
제목: ''
}); 여러 속성에 대한 값 설정
속성 삭제:
$('p').removeAttr('value');
모든 링크를 새 창에서 열도록 설정:
$('a[href^="http://"]').attr('target',"_blank");
양식을 여러 번 제출하지 마세요.
$("양식").submit(함수(){
$(":submit", this).attr("disabled","disabled");
})
클래스 이름 추가: $('#id').addClass('')
클래스 이름 삭제: $('#id').removeClass('')
클래스 이름 전환: $('#id').toggleClass('') 클래스 이름이 있으면 삭제하고, 없으면 클래스 이름을 추가하세요.
클래스 이름이 포함되어 있는지 확인: $('p:first').hasClass('') $('p:first').is('')
배열 형식으로 클래스 이름 목록을 반환합니다.
$.fn.getClassNames = 함수(){
var 이름 = this.attr('someclsssname');
if(이름 != null){
반환 이름.split(" ");
}
그 외
{
반환 [];
}
}
스타일 설정:
$('div.someclassname').css(function(index, currentWidth){
currentWidth 20을 반환합니다.
});
$('div').css({
커서: '포인터',
테두리: '1px 단색 검정색',
패딩: '12px 12px 20px 20x',
배경색상: '흰색'
});
사이즈 정보 :
$(div).width(500)
$('div').높이()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
포지셔닝 정보:
$('p').offset() 문서를 기준으로 한 참조 위치
$('p').position()은 상위 요소의 상대 위치를 오프셋합니다.
$('p').scrollLeft() 가로 스크롤 막대의 오프셋 값
$('p').scrollLeft(값)
$('p').scrollTop()
$('p').scrollTop(값)
관련 요소 콘텐츠:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
추가 콘텐츠
요소 끝에 HTML 조각을 추가합니다: $('p').append('some text');
요소 끝에 있는 DOM의 기존 요소: $('p').append($(a.someclassname))
요소의 시작 부분에 추가: $("p").prepend()
요소 앞에 추가: $("span").before()
요소 뒤에 추가: $("span")after()
끝에 콘텐츠 추가:appendTo(targets)
내용을 시작 부분에 추가: prependTo(targets)
요소 앞에 콘텐츠 추가: insertBefore(targets)
요소 끝에 콘텐츠를 추가합니다: $('
래핑 요소:
$('a.someclassname').wrap("
요소 삭제:
$('.classname').remove()는 요소를 삭제하고 해당 요소에 바인딩된 이벤트 및 데이터도 삭제됩니다
$('.classname').detach()는 요소를 삭제하지만 이벤트와 데이터는 유지합니다
$('.classname').empty()는 요소를 삭제하지 않지만 요소 내용을 지웁니다
요소 복사:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
교체 요소:
$('img[alt]').each(함수(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
form 요소의 값에 대해:
$('[name="radioGroup"]:checked').val()은 라디오 버튼의 값을 가져옵니다. 하나를 선택하지 않으면 정의되지 않은 값을 반환합니다
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
$(this).val();
반환
}).toArray(); 다중 선택 상자의 값을 가져옵니다