[jQuery] 선택자

jQuery CDN

https://code.jquery.com/

<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>

 

window.onload

BOM의 window.onload 이벤트 핸들러와 동일한 코드는 아래와 같다.

$(document).ready(function () {}); // or $(function() {})

 

Selector

jQuery 선택자는 기본적으로 CSS 선택자와 같다.

 

선택자	설명
$("*")	전체선택
$("div")	div 요소 선택
$("#id-name")	id 선택
$(".class-name")	class 선택

 

반환값은 jQuery이며, 선택된 요소를 배열의 형태로 가지는 유사배열이다. 즉, $("div")[0]은 HTMLElement 객체를 반환한다.

 

선택자	설명
$("div").parent()	부모요소 선택
$("div").parents()	조상요소 선택
$("p").closest("div")	p의 가장 가까운 조상 div 선택
$("div").children()	자식요소 선택
$("div").find("p")	div의 자손요소 중 p 요소
$("div").prev()	형요소 선택
$("div").next()	동생요소 선택
$("div").siblings()	모든 형제요소 선택

 

선택된 요소중에 특정조건에 따라 필터링할 수 있다.

 

선택자	설명
$("li").first()	li 요소 중 첫번째
$("li").last()	li 요소 중 마지막
$("li").eq(n)	li 요소 중 (n+1)번째
$("li").slice(m, n)	li 요소 중 (m+1)번째 ~ (n)번째
$("div").has("ul")	ul를 가지고 있는 div 요소
$("div").not(":first")	첫번째만 제외한 div 요소
$("div").filter(".class-n")	클래스명을 가지는 div 요소

 

주요 메소드

아래는 주요 메소드이다.

 

메소드	설명
$("div").each((index, value) => {$(this)})	선택된 div 요소를 순회해서 실행
$("div").index("#id-n")	div 요소중 지정한 요소의 인덱스 반환
$("div").is(':animated')	div가 애니메이션중이면 true