jQuery 시험용 주석 요약

jQuery 시험용 주석 요약

🔍 기본 선택자

 

 

javascript

// 아이디 선택자 - 고유한 요소 하나 선택
$("#id1").css("color", "red");

// 클래스 선택자 - 같은 클래스를 가진 모든 요소
$(".className").css("background", "yellow");

// 태그 선택자 - 해당 태그의 모든 요소
$("p").css("color", "blue");

// 여러 선택자 - 콤마로 구분
$("p, pre, div").css("background", "pink");

// 후손 선택자 - 공백으로 구분 (모든 후손)
$("div li").css("background", "white");

// 자식 선택자 - > 기호 (직계 자식만)
$("div > ul > li").css("color", "skyblue");

🎯 속성 선택자

 

 

javascript

// 속성값 완전 일치
$("input[type=text]").val("안녕");

// 속성값 포함 (~= 공백으로 구분된 단어)
$("input[class~=test3]").val(1234);

// 속성값으로 시작 (^=)
$("input[type^=ra]").attr("checked", true);

// 속성값으로 끝남 ($=)
$("input[type$=ox]").attr("checked", true);

// 속성값 포함 (*= 어디든지)
$("input[class*=st2]").css("width", "50px");

// 특정 속성을 가진 모든 요소
$("input[class]").css("background", "lightblue");

📝 입력양식 선택자

 

 

javascript

// input 타입별 선택
$(":text").css("background", "crimson");    // type="text"
$(":button").css("width", "200px");         // type="button"
$(":password").val();                       // type="password"
$(":file").css("background", "yellowgreen"); // type="file"
$(":reset").click(function(){...});         // type="reset"

⭐ 상태 선택자

 

 

javascript

// 체크된 요소 (radio, checkbox)
$(":checked").css("width", "50px");

// 선택된 option 요소
$("option:selected").html();

// 활성화/비활성화 상태
$(":enabled").css("background", "yellowgreen");
$(":disabled").css("background", "greenyellow");

🔧 필터링 메서드

 

 

javascript

// 첫 번째/마지막 요소
$("tr:first").css("color", "red");    // CSS 필터
$("h4").first().css("font-size", "20px");  // 메서드

// 짝수/홀수 (0부터 시작)
$("tr:even").css("background", "gray");    // 0,2,4...
$("tr:odd").css("background", "green");    // 1,3,5...

// 조건 필터링
$("h4").filter(".test").html("통과");      // 조건 만족
$("h4").not(".test").css("color", "blue"); // 조건 불만족

// 인덱스로 선택 (0부터)
$("h4").eq(3).html("3번째 선택됨");

🌳 탐색 메서드

 

 

javascript

// 부모/조상 요소
$("span").parent();              // 바로 위 부모
$("span").parents();             // 모든 상위요소
$("span").parentsUntil("div");   // 지정 요소까지

// 자식/후손 요소
$("#wrap").children();           // 모든 직계 자식
$("#wrap").children("ul");       // 특정 자식만
$("#wrap").find("span");         // 모든 후손 중 span

// 형제 요소
$("h2").siblings();              // 모든 형제
$("h2").next();                  // 다음 형제
$("h2").nextAll();               // 다음 모든 형제
$("h2").prev();                  // 이전 형제
$("h2").prevAll();               // 이전 모든 형제

💫 DOM 조작 메서드

 

 

javascript

// 내용 변경 (.html()은 태그 인식, .text()는 텍스트만)
$("#test1").html("<b>굵은글씨</b>");
$("#test2").text("일반텍스트");

// 값 설정/조회 (setter/getter 겸용)
$("input").val("새로운값");    // 설정
let value = $("input").val();  // 조회

// 속성 설정/조회
$("img").attr("src", "new.jpg");      // 일반 속성
$("input").prop("checked", true);     // 상태 속성

➕ 요소 추가 메서드

 

 

javascript

// A를 기준으로 B 추가
$(A).append(B);        // A 내부 끝에 B 추가 (자식)
$(A).prepend(B);       // A 내부 시작에 B 추가 (자식)
$(A).after(B);         // A 뒤에 B 추가 (형제)
$(A).before(B);        // A 앞에 B 추가 (형제)

// B를 기준으로 A에 추가
$(B).appendTo(A);      // B를 A 내부 끝에 추가
$(B).prependTo(A);     // B를 A 내부 시작에 추가
$(B).insertAfter(A);   // B를 A 뒤에 추가
$(B).insertBefore(A);  // B를 A 앞에 추가

// 요소 생성 방법
let el1 = "<p>문자열로 생성</p>";
let el2 = $("<p></p>").text("jQuery로 생성");

🗑️ 요소 제거 메서드

 

 

javascript

// 복제 (이벤트 복사 여부 선택)
let $copy = $(".item").clone(true);   // 이벤트도 복사
let $copy2 = $(".item").clone(false); // 요소만 복사

// 제거
$("#area").empty();        // 자식 요소들만 제거
let $removed = $("#item").remove();  // 요소 제거 (이벤트 삭제)
let $detached = $("#item").detach(); // 요소 제거 (이벤트 보존)

🎭 이벤트 처리

 

 

javascript

// 방법1: 이벤트 메서드
$("#btn").click(function(){ alert("클릭!"); });
$("#btn").dblclick(function(){ alert("더블클릭!"); });

// 방법2: on 메서드 (객체 형태)
$("#test").on({
    mouseenter: function(){ $(this).css("color", "red"); },
    mouseout: function(){ $(this).css("color", "black"); },
    click: function(){ $(this).off("mouseenter"); }  // 이벤트 제거
});

// 방법3: 동적 요소용 (이벤트 위임)
$("#wrap").on("click", "h4", function(){
    alert("동적 요소도 이벤트 작동!");
});

// 일회성 이벤트
$("#btn").one("click", function(){ alert("한번만!"); });

// 키보드 이벤트
$("#input").keydown(function(e){ console.log("키 눌림"); });
$("#input").keyup(function(e){ console.log(e.target.value); });

🎨 스타일 & 클래스 조작

 

 

javascript

// CSS 스타일 설정
$("p").css("color", "red");                    // 단일 속성
$("p").css({"color": "red", "background": "yellow"}); // 다중 속성

// 클래스 조작
$(this).addClass("yellow");      // 클래스 추가
$(this).removeClass("yellow");   // 클래스 제거
$(this).toggleClass("active");   // 클래스 토글
$(this).hasClass("active");      // 클래스 존재 확인

🔄 반복 처리 (each)

 

 

javascript

// 배열 반복
let fruits = ["사과", "바나나", "체리"];
$.each(fruits, function(index, value){
    console.log(`인덱스: ${index}, 값: ${value}`);
});

// 객체 반복
let obj = {name: "홍길동", age: 30};
$.each(obj, function(key, value){
    console.log(`키: ${key}, 값: ${value}`);
});

// DOM 요소 반복
$("li").each(function(i, element){
    $(this).text(`항목 ${i+1}`);  // this 사용
    // element.textContent = `항목 ${i+1}`; // 순수 JS
});

🎬 시각 효과

 

 

javascript

// 보이기/숨기기
$("#img").show(3000);      // 3초에 걸쳐 보이기
$("#img").hide(3000);      // 3초에 걸쳐 숨기기
$("#img").toggle(1000);    // 1초에 걸쳐 토글

// 페이드 효과
$("#img").fadeIn(2000);    // 서서히 나타나기
$("#img").fadeOut(2000);   // 서서히 사라지기
$("#img").fadeToggle(1000); // 페이드 토글

📚 jQuery 기본 구조

 

 

javascript

// 문서 준비 완료 후 실행 (3가지 방법)
jQuery(document).ready(function(){ /* 실행내용 */ });
$(document).ready(function(){ /* 실행내용 */ });
$(function(){ /* 실행내용 */ });  // 가장 많이 사용

// 메서드 체이닝 가능
$("#btn").css("color", "red").html("버튼").click(function(){
    alert("체이닝!");
});

⚠️ 주의사항

• jQuery는 0-based 인덱스 사용
• :even은 0,2,4... / :odd는 1,3,5...
• .val()은 setter/getter 겸용 (인자 있으면 설정, 없으면 조회)
• this는 순수 DOM 객체이므로 jQuery 메서드 사용시 $(this) 필요
• 동적 요소에는 이벤트 위임(3번째 방법) 사용 필수

 

완료! jQuery 관련 코드들을 중요한 포인트들로 정리해서 시험용 주석을 만들었습니다.

다음과 같은 주요 영역별로 정리했어요:

• 기본 선택자 (아이디, 클래스, 태그, 후손/자식 선택자)
• 속성 선택자 (=, ~=, ^=, $=, *= 등)
• 입력양식/상태 선택자 (:text, :checked, :selected 등)
• 필터링 메서드 (first, last, even, odd, eq 등)
• 탐색 메서드 (parent, children, siblings 등)
• DOM 조작 (html, text, val, attr 등)
• 요소 추가/제거 (append, remove, clone 등)
• 이벤트 처리 (click, on, keyup 등)
• 스타일/클래스 조작 (css, addClass 등)
• 반복 처리 (each 메서드)
• 시각 효과 (show, hide, fade 등)

각 메소드마다 실제 사용 예제와 주의사항도 포함했으니 시험 공부하실 때 도움이 될 거예요!