JQUERY2

Jquery

jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다.

---

1. jQuery 필터 선택자

▶ 필터 선택자의 종류

선택자 종류	설명
:even	$("tr:even")	tr 요소 중 짝수행만 선택합니다.
:odd	$("tr:odd")	tr 요소 중 홀수행만 선택합니다.
:first	$("td:first")	첫번째 td 요소를 선택합니다.
:last	$("td:last")	마지막 td 요소를 선택합니다.
:header	$(":header")	해당 (h1~h6) 요소를 선택합니다.
:eq()	$("li:eq(0)")	index가 0인 li요소를 선택합니다. index는 0번이 첫번째 요소입니다.
:gt()	$("li:gt(0)")	index가 0보다 큰 li 요소들을 선택합니다.
:lt()	$("li:lt(2)")	index가 2보다 작은 li 요소들을 선택합니다.
:not()	$("li:not(.bg)")	li 요소 중에서 class명 bg가 아닌 li 요소를 선택합니다.
:root	$(":root")	html을 의미합니다.
:animated	$(":animated")	움직이는 요소를 선택합니다.

▶ 자식 필터 선택자

선택자 종류	설명
:first-child	$("span:first-child")	첫번째 span 요소를 선택합니다.
:last-child	$("span:last-child"]	마지막 span 요소를 선택합니다.
:first-of-type	$("span:first-of-type"]	span 요소 중에서 첫번째 span 요소를 선택합니다.
:last-of-type	$("span:last-of-type"]	span 요소 중에서 마지막 span 요소를 선택합니다.
:nth-child()	$("span:nth-child(2)")	두번째 span 요소를 선택합니다. nth-child(2n)은 2,4,6...번째 요소를 선택하고, nth-child(2n+1)은 1,3,5...번째 요소를 선택합니다.
span:nth-last-child()	$("span:nth-last-child(2)")	마지막 두번째 span 요소를 선택합니다.
:nth-of-type()	$("span:nth-of-type(2)")	span 요소 중에서 두번째 span 요소를 선택합니다.
:nth-last-of-type()	$("span:nth-last-of-type(2)")	span 요소 중에서 마지막에서 두번째 span 요소를 선택합니다.
:only-child	$("div > span:only-child")	div의 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택합니다.
:only-of-type	$("div > span:only-of-type")	div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.

▶ 콘텐츠 필터 선택자

선택자 종류	설명
:contains()	$("p:contains('html')")	p요소 중에서 html 텍스트를 포함하고 있는 p요소를 선택합니다.
:empty	$("div:empty"]	div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다.
:parent	$("span:parent"]	span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다.
:has()	$("section:has(article)"]	section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.