jQuery 메서드 총정리 — 선택, 조작, 이벤트, 효과를 한 장에

작성자:

jQuery는 페이지의 요소를 골라 내용을 바꾸고 움직이게 하는 도구입니다. 이름이 비슷해 헷갈리지만 “읽는 쓰임”과 “넣는 쓰임”만 구분하면 됩니다. 자주 쓰는 메서드를 표와 예제로 정리한 사전입니다.

메서드 하는 일 반환값
find(s) / children() 자손 전체 / 자식만 새 jQuery 객체
parent() 바로 위 부모 새 jQuery 객체
eq(i) i번째 하나만 새 jQuery 객체
text() / html() 글자만 / 태그까지 읽기·쓰기 문자열 / 자기 자신
val() 입력창 값 읽기·쓰기 문자열 / 자기 자신
attr(n, v) / css(n, v) 속성·스타일 읽기·쓰기 문자열 / 자기 자신
addClass(c) / removeClass(c) 클래스 붙이고 떼기 자기 자신 (변경)
toggleClass(c) 있으면 떼고 없으면 붙임 자기 자신 (변경)
hasClass(c) 클래스 유무 true / false
on(e, f) / off(e) 이벤트 연결·해제 자기 자신
fadeIn(ms) / slideToggle(ms) 나타내기 / 펼침·접힘 자기 자신
each(f) 요소를 하나씩 자기 자신

반환값의 “자기 자신”이 핵심입니다. 대부분 자기 자신을 돌려주므로 .addClass().fadeIn()처럼 이어 쓰는데, 이를 체이닝이라고 합니다. 기본 문법은 jQuery 시작하기 편에 있습니다.

골라내고 좁히기 — find, parent, children, eq

선택자로 고른 결과를 좁히는 메서드입니다.

// <ul id="noteList"> 안에 class="item"인 <li> 세 개가 있습니다
console.log($("#noteList").find("li").length); // 3  children()도 같습니다
console.log($(".item").eq(0).text());   // "1강 변수"
console.log($(".item").parent().attr("id")); // "noteList"
console.log($("#noneExist").length);  // 0  없는 요소를 골라도 오류가 아닙니다

find는 손자까지 뒤지고 children은 자식만 봅니다. 없는 요소를 골라도 오류 없이 길이가 0이 되어 조용히 아무 일도 안 하므로, 동작하지 않으면 .length부터 찍어 보십시오.

내용과 값 다루기 — text, html, val

세 메서드 모두 인자가 없으면 읽기, 있으면 쓰기입니다.

const current = $("#noteTitle").text(); // 읽기 → "카드뉴스 노트"
$("#noteTitle").text("코딩 입문 강좌");  // 쓰기 → 자기 자신을 반환

$("#desc").html("<strong>중요</strong>"); // 굵은 글씨로 해석
$("#desc").text("<strong>중요</strong>"); // 태그가 글자 그대로

const keyword = $("#searchInput").val(); // 입력창의 값 (val("")로 비움)

// 자주 하는 실수 1: 읽기 결과에 메서드를 이어 쓰기
$("#noteTitle").text("새 제목").addClass("done"); // 됩니다
// $("#noteTitle").text().addClass("done");  오류: 문자열엔 메서드가 없습니다

입력창의 내용은 val()로 읽습니다. input에는 글자가 아니라 값이 있기 때문입니다. 읽어 온 값의 가공은 자바스크립트 문자열 함수 편으로 이어집니다.

속성과 스타일 — attr, css, addClass

주소를 바꾸고 색을 입히고 클래스를 다룹니다.

console.log($("#thumb").attr("alt"));      // 읽기
$("#thumb").attr("src", "/img/c.png");     // 쓰기
$(".card").css("color", "#333");
$(".card").css({ "font-size": "16px" });   // 여러 개는 중괄호로
$(".card").addClass("active").removeClass("hidden");
$("#menuBtn").toggleClass("open");  // 번갈아 붙였다 뗍니다

값을 직접 넣기보다 클래스를 붙였다 떼는 방식이 낫습니다. 디자인을 CSS에 모을 수 있기 때문입니다. 요소를 만들고 지우는 법은 jQuery로 요소 다루기 편에 있습니다.

이벤트 — on과 off, 그리고 위임

클릭이나 입력 같은 사건에 실행할 코드를 겁니다.

$("#saveBtn").on("click", function () {  // 클릭하면 실행됩니다
  console.log("저장했습니다");
});
$("#saveBtn").off("click");   // 연결을 뗍니다

// 자주 하는 실수 2: 나중에 만든 요소는 클릭이 안 됩니다
$(".item").on("click", function () { });  // 지금 있는 항목만 연결됩니다
$("#noteList").append("<li class='item'>4강</li>"); // 이 항목은 반응하지 않습니다

// 해결: 부모에 걸고 대상을 적습니다 (위임)
$("#noteList").on("click", ".item", function () {
  console.log($(this).text());  // 나중에 추가돼도 동작합니다
});

on은 연결하는 순간 있는 요소에만 이벤트를 겁니다. 목록을 나중에 채운다면 부모에 걸어야 합니다.

효과와 반복 — fadeIn, slideToggle, each

움직임을 주거나 요소를 하나씩 처리합니다.

$("#toast").fadeIn(300);          // 0.3초 동안 나타납니다 (fadeOut은 반대)
$("#faqAnswer").slideToggle(200); // 펼침·접힘 번갈아

// 자주 하는 실수 3: this를 그대로 쓰면 오류
$(".item").each(function (i) {
  // this.text();  →  $()로 감싸야 jQuery 메서드를 씁니다
  console.log(i + ": " + $(this).text());
});
// 0: 1강 변수 / 1: 2강 함수 / 2: 3강 배열

each 안의 this는 jQuery 객체가 아닌 순수 DOM 요소입니다. 효과 메서드도 자기 자신을 돌려주므로 fadeIn(300).addClass("shown")처럼 이어 씁니다.

핵심 정리

  • 읽기와 쓰기 — 인자가 없으면 읽고, 있으면 넣기
  • 체이닝 — 쓰기만 이어 쓸 수 있고 읽기에서 끊김
  • val — 입력창 값은 val()로 읽기
  • 이벤트 위임 — 나중에 만들 요소는 부모에 걸기
  • $(this) — each 안의 this는 $()로 감싸기