[jQuery] 선택자, 메소드 정리

 

- 선택자 (Selector)

selectors (선택자)

*	전부 선택
#	ID
.	class
E	element
E1, E2	여러개의 element 선택

 

속성(attribute) 선택자

[name]	name 속성을 가진
[name="~~~~"]	name 속성의 값이 ~~~~인
[name!="~~~~"]	name 속성의 값이 ~~~~가 아닌
[name^="~~~~"]	name 속성의 값이 ~~~~로 시작하는
[name$="~~~~"]	name 속성의 값이 ~~~~로 끝나는
[name*="~~~~"]	name 속성의 값이 ~~~~를 포함하는

 

기본 필터 (filter) 선택자

:first / :last	선택된 요소 중 처음 / 마지막 요소 선택
:even / :odd	짝수번째 / 홀수번째 요소 선택
:eq(n)	n번째 요소 선택 (n은 0부터 시작)
:lt(n) / :gt(n)	n보다 작은 / n보다 큰 요소 선택 (n은 0부터 시작)
:not()	선택자에 해당되지 않는 요소 선택

 

필터 (filter) 선택자

:first-child	부모 요소의 첫 자식 요소 선택
:last-child	부모 요소의 마지막 자식 요소 선택
:only-child	형제가 없는 요소 선택
:nth-child(n)	부모 요소의 n번째 자식 요소 선택 (n은 1부터 시작)
:contains('~~~')	특정 문자열 ~~~을 포함하는 요소 선택
:empty	빈 요소를 선택
:parent	자식이 있는 부모 요소를 선택
:has()	선택자에 해당하는 요소를 포함하는 상위 요소 선택

 

폼 (form) 선택자

:input      :checkbox     :radio

:text        :password     :file

:button   :submit         :image         :reset

:focus

:checked

:selected

:enabled   :disabled

 

계층 (hierarchy) 선택자

div > span	div 요소의 자식인 span 요소 선택
div span	div 요소의 자손인 span 요소 선택
div + span	div 요소 다음으로 인접한 span 요소 선택
div ~ span	div 요소 다음에 나오는 span 요소 형제들(복수개) 선택

 

Visibilisity 선택자

:visible	보이는 요소를 선택
:hidden	보이지 않는 요소를 선택

 

- Method

JQuery의 트리구조에서의 함수

.children()	자식 요소들
siblings()	형제 요소들
.closest()	현재 요소를 포함하여 가까운 조상 요소
.find()	자손 요소 중에 선택자에 해당하는 요소
.next() / prev()	다음에 오는 / 이전에 오는 요소
.nextAll() / prevAll()	다음에 오는 / 이전에 오는 모든 요소
.nextUntil()/prevUntil()	선택자에 해당하는 요소 전까지의 다음 / 이전 요소
.parent()	부모 요소
.parents()	루트 요소에 이르기까지 모든 부모 요소
.parentsUntil()	해당하는 선택자까지의 부모 요소
.offsetParent()	위치가 지정된 가장 가까운 조상 요소

 

Filtering 함수

.eq(n)	n번째 요소
.first() / .last	첫번째 / 마지막 요소
.slice()	시작과 끝 사이에 해당하는 요소
.has()	선택자에 해당하는 요소를 가지고 있는 부모 요소(DOM 요소)
.not()	해당되는 요소를 제외한 요소
.is()	선택자와 요소가 일치하는지 판별, true/false 반환
.map()	현재 선택된 요소들을 콜백함수에 보내서 새로운 jquery 객체를 반환
.filter()	선택자(DOM 요소)에 해당되는 요소
.add()	인수()의 요소가 추가된 JQuery 객체를 반환
.end()	최근 필터링 결과를 끝내고 체인의 이전 상태로 되돌린다
.contents()	안에 포함하고 있는 자식 요소들을 선택
.addSelf()	이전 체이닝에 자기 자신을 합침

 

스타일 관련

.css()	스타일 속성의 값을 얻거나 추가, 변경
.height()	요소의 높이를 얻거나 설정
.width()	요소의 너비를 얻거나 설정
.innerHeight()	padding, border 영역을 포함한 요소의 내부 높이를 얻거나 설정
.innerWidth()	padding, border 영역을 포함한 요소의 외부 높이를 얻거나 설정
.outerHeight()	padding, border 영역을 포함한 요소의 외부 높이를 얻거나 설정
.outerWidth()	padding, border 영역을 포함한 요소의 외부 너비를 얻거나 설정
.position()	부모 요소로부터 위치 값을 얻음
.offset()	문서로부터 위치 값을 얻음
.scrollLeft()	좌우 스크롤바의 위치값을 얻음
.scrollTop()	상하 스크롤바의 위치값을 얻음

 

일반 속성 관련

.attr('name')	HTML 속성 값을 얻어옴 --- getter 역할
.attr('name', '~~~')	HTML 속성 값을 추가하거나 변경 --- setter 역할
.removeAttr('name')	HTML 속성 제거
.prop('name')	JavaScript 속성 값을 얻어옴 --- getter 역할
.prop('name', '~~~')	JavaScript 속성 값을 추가하거나 변경 --- setter 역할
.prop('name', '~~~')	JavaScript 속성 값을 추가하거나 변경 --- setter 역할
.removeProp('name')	JavaScript 속성 제거
.val()	요소의 value 속성 값을 얻어옴 --- getter 역할
.val(value)	요소의 value 속성값을 추가하거나 변경 --- setter 역할

 

클래스 속성 관련

.addClass()	클래스를 추가
.removeClass()	클래스를 삭제
.hasClass()	클래스가 지정되어 있는지 확인
.toggleClass	현재의 클래스 값에 따라 클래스를 추가하거나 삭제

 

이벤트 (DOM 관련)

.text()	텍스트 내용을 얻어가 추가, 변경
.html()	html 내용을 얻어가 추가, 변경
A.append(B)	A가 끝나는 지점에 B를 자식 노드로 추가
A.appendTo(B)	B가 끝나는 지점에 A를 자식 노드로 추가
A.prepend(B)	A가 시작하는 지점에 B를 자식 노드로 추가
A.before(B)	A의 이전에 B를 형제 노드로 추가
A.insertBefore(B)	B의 이전에 A를 형제 노드로 추가
A.after(B)	A의 이후에 B를 형제 노드로 추가
A.insertAfter(B)	B의 이후에 A를 형제 노드로 추가
.remove()	DOM tree에서 해당 대상 요소를 삭제
.detach()	DOM tree에서 해당 요소를 삭제(데이터가 유지되기 때문에 저장했다가 다른 곳에 사용 가능)
.empty()	DOM에서 해당 대상 요소의 자식 요소를 모두 삭제
.replaceWith()	인수의 요소로 jQuery 객체를 대체
.replaceAll()	jQuery 객체로 인수의 요소를 대체
.wrap()	감싸는 요소로 추가
.wrapAll()	전체를 감싸는 요소로 추가
.unwrap()	감싸고 있는 부모 요소를 제거
.wrapInner()	내부의 콘텐츠를 감싸는 요소를 추가