06. 제이쿼리(jQuery) 문서 객체 선택자와 조작법

1. 제이쿼리 기본 다지기

1) 제이쿼리(jQuery)란?

jQuery는 JavaScript 라이브러리다.

DOM 조작, 이벤트 처리, 애니메이션, AJAX 등을 간결하게 작성할 수 있도록 도와준다.

 

📌 기존 JavaScript

document.getElementById("title").style.color = "red";

📌jQuery

$("#title").css("color", "red");

코드를 단순화하고 브라우저 호환 문제를 해결해준다.

 

2) 제이쿼리 라이브러리 연동하기

CDN 방식

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

로컬 파일 방식

<script src="js/jquery.min.js"></script>

기본 구조

$(document).ready(function() {
  // 실행 코드
});

또는 축약형

$(function() {
  // 실행 코드
});

DOM 로드 완료 후 실행된다.

 

2. 선택자

jQuery의 핵심은 선택자다.

1) 선택자란?

HTML 요소를 선택하는 방법

$("선택자")

 

2) 기본 선택자

선택자	설명
$("태그")	태그 선택
$("#id")	아이디 선택
$(".class")	클래스 선택
$("*")	전체 선택

 

ex.

$("p")
$("#header")
$(".box")

 

3) 직접 선택자

선택자	설명
$("A B")	하위 요소
$("A > B")	자식 요소
$("A + B")	바로 다음 형제
$("A ~ B")	모든 형제

 

4) 인접 관계 선택자

$("div + p")

div 바로 다음 p 선택

 

3. 제이쿼리 탐색 선택자

선택한 요소를 기준으로 다시 탐색하는 기능이다.

1) 탐색 선택자

메서드	설명
parent()	부모
children()	자식
find()	하위 요소
siblings()	형제
next()	다음
prev()	이전

 

2) 위치 탐색 선택자

선택자	설명
:first	첫 요소
:last	마지막 요소
:eq(n)	n번째
:lt(n)	n보다 작은
:gt(n)	n보다 큰
:even	짝수
:odd	홀수

ex.

$("li:eq(2)")

 

3) jQuery 배열 관련 메서드

메서드	설명
each()	반복
map()	변환
index()	인덱스 반환
toArray()	배열 변환

$("li").each(function(index) {
	console.log(index);
});

 

4) 속성 탐색 선택자

$("input[type = 'text']")
$("a[herf]")

 

5) 컨텐츠 탐색 선택자

선택자	설명
:contains(text)	특정 텍스트 포함
:empty	비어 있는 요소
:has(selector)	특정 요소 포함

 

6) 유용한 메서드

메서드	설명
length	요소 개수
is()	조건 검사
not()	제외
filter()	조건 필터

 

4. 객체 조작

1) 객체 조작 메서드

메서드	설명
html()	HTML 변경
text()	텍스트 변경
append()	뒤에 추가
prepend()	앞에 추가
remove()	삭제
empty()	내부 삭제

 

2) 속성 조작 메서드

메서드	설명
attr()	속성 설정
removeAttr()	속성 제거
prop()	속성 값
val()	입력 값
data()	데이터 속성

$("#img").attr("src", "image.jpg");

 

3) 수치 조작 메서드

메서드	설명
width()	너비
height()	높이
innerWidth()	패딩 포함
outerWidth()	패딩 + 보더 포함

 

4) 객체 편집 메서드

메서드	설명
addClass()	클래스 추가
removeClass()	클래스 제거
toggleClass()	토글
css()	스타일 변경

$(".box").addClass("active");