[2026.04.09] TIL - 9일차 jQuery (DOM 조작과 Effect 정리)

1.Dom 탐색 메소드 정리 & hover 사용

1) 필터링
.eq(), .slice(), .first(), .last()처럼
선택된 요소들 중에서 원하는 요소만 다시 골라내는 메소드들이 들어 있다.

2) 트리 탐색
.find(), .children(), .parent(), .next()처럼
부모, 자식, 형제 관계를 따라가며 요소를 찾는 메소드들이 정리되어 있다.

3) 기타 탐색
.add()와 .is()처럼
선택한 요소를 확장하거나 조건을 확인할 때 사용하는 메소드들이 들어 있다.

 

스크립트에선

$(".menu div").css("display", "none");

를 사용해 각 메뉴 안 하위 <div> 들을 전부 숨겼다.

 

그런 다음, hover를 사용해 마우스가 메뉴 위에 올라갔을 때와 벗어났을 때를 나눠서 처리했다.

$(".menu").hover(function(){
    $(this).children("div").show();
}, function(){
    $(this).children("div").hide();
});

 

여기서 $(this)는 현재 마우스가 올라간 .menu를 의미한다.

그리고 .children("div")는 그 메뉴 안에 들어 있는 하위 <div>들만 선택하는 코드이다.

 

---

2. event

 

 

위와 같이 HTML 구조를 만들고, CSS를 이용해 요소를 배치했다.
클릭! 글자는 <a> 태그이고, 파란색 박스는 <p> 태그, 바깥쪽 빨간색 박스는 <div> 태그이다.

위와 같이 HTML 구조를 만들고, CSS를 이용해 요소를 배치했다.
클릭! 글자는 <a> 태그이고, 파란색 박스는 <p> 태그, 바깥쪽 빨간색 박스는 <div> 태그이다.

 

1)

이를 막기 위해서

e.stopPropagation(); 으로 이벤트 전파를 중지해준다.

e.preventDefault();는 a태그의 기본 이벤트(링크 이동)를 중지해 링크로 넘어가는 걸 막아준다.

 

 

위 코드는 두 번째 a 태그에 이벤트 2개를 한번에 묶어서 등록한 것이다.

bind()를 이용해 여러가지 함수를 한 번에 넣을 수 있고,

mouseenter로 마우스를 올렸을 때, mouseleave는 마우스가 나갔을 때 실행되는 함수이다.

마우스를 올렸을 때는 배경색이 분홍, 마우스가 나갔을 때는 하늘색이 된다.

 

bind() 말고 .on()으로도 가능한데

$(".menu").on({ mouseenter: function(){ $(this).children("div").show();},

    mouseleave: function(){ $(this).children("div").hide();},click: function(){ alert("클릭!");} });

으로 나타낼 수도 있다.

 

2) 이벤트 제거 .unbind(); .off();

이벤트 제거는  .unbind(); 혹은 .off();로 할 수 있다.

위 코드에서는 span 태그를 클릭했을 때 mouseleave 이벤트만 제거된다.

즉, 마우스를 올리면 분홍이 되고, 마우스가 나가면 하늘색이 되지만 마우스가 나가도 분홍으로 유지된다.

다만 아직 span 태그가 없기 때문에 span태그를 만들어서 클릭해야한다.

 

3) 새로 요소 추가하고 이벤트 적용하기

 

$("p").click(function(e){

                alert("p클릭!");

                //현재 dom에 있는 p태그들 다 찾아서 이벤트 등록

                e.stopPropagation();

            });

 

위 코드에서는 현재 p태그들을 찾아서 "p클릭!" alert를 실행한다.

따라서 버튼으로 p태그를 추가하면 alert가 실행되지 않는다.

이런 문제를 해결하기 위해서 $("body").on("click","p",function(){}); 으로 새로 추가된 요소도 이벤트로 적용한다.

 

---

3. effect

1) .show(); / .each(); / .animate();

우선, 위와 같이 HTML을 작성했다. css로는 p 태그에 display:none;으로 처음에는 안 보이게끔 설정한다.

b 태그를 눌렀을 때 보이지 않게 설정했던 p 태그를 보이게 만든다.

 $("p").each(function(i){

                    $(this).animate({top: 50 * (i + 1)},500);

                });

$("p")는 페이지 안의 모든 p태그를 선택하고,

.each는 선택한 요소들을 하나하나 반복해서 처리하는 메소드이다.

function(i)에서 i는 반복 순서 번호이다. 

따라서 첫 번째 p -> i=0 / 두 번째 p -> i=1 / 세 번째 p -> i=2 ... 이렇게 된다.

this는 현재 반복중인 p 태그를 의미하고 .animate()로 p태그의 위치를 바궈준다.

위 코드에서 첫 번째 p는 top:50, 두 번째 p는 top : 100 이렇게 정렬해주며, 0.5초동안 animation이 실행된다.

 

2) .siblings(); / .hide(); / .show(); / .toggle();

내가 방금 누른 p태그를 ele라 부른다.

클릭한 p 태그는 배경색을 핫핑크로 바꾼다.

.siblings("p");로 같은 부모를 가진 형제 p태그들은 배경색을 흰색으로 바꾼다.

 

위 코드를 통해 클릭한 p태그만 핫핑크로 보이게 할 수 있다.

 

조건문을 통해

p:contains('hide')

p 태그 안에 hide라는 글자가 포함되어있는지 확인 후,

hide를 눌렀을 때는 이미지를 숨기고, show를 클릭하면 이미지를 보여준다. toggle은 이미지가 보였다가 숨겨지게 할 수 있다.

 

즉, hide()는 숨기기, show()는 보이기, toggle()은 상태를 번갈아 바꾸는 메소드라고 정리할 수 있다.

 

3) .slideUp(); / .slideDown(); / .slideToggle();

 

 

 

위와 같이 .slideUp(), .slideDown(), .slideToggle()도 추가했다.
이 메소드들은 요소를 위아래로 접히는 효과와 함께 숨기거나 보여줄 때 사용한다.

 

4) .fadeOut(); / .fadeIn(); / .fadeTo(); / fadeToggle();

 

이 메소드들은 요소를 서서히 사라지게 하거나 다시 보이게 할 때 사용한다.

.hide()와 .show()가 바로 상태를 바꾸는 방식이라면,

fade 계열 메소드는 투명도(opacity)가 바뀌는 효과와 함께 화면에 반영된다는 점이 특징이다.

 

• .fadeOut() : 요소를 서서히 사라지게 한다
• .fadeIn() : 숨겨진 요소를 서서히 나타나게 한다
• .fadeTo() : 요소를 원하는 투명도까지 서서히 바꾼다

fadeTo(2000, 0.3);는 요소를 2초 동안 서서히 투명도 0.3 상태로 바꾸는 메소드이다.

완전히 사라지게 하는 것이 아니라 반투명하게 만드는 효과를 줄 때 사용한다.

• .fadeToggle() : 현재 상태에 따라 나타나기 / 사라지기를 번갈아 실행한다

다른 메소드들과 같이 괄호를 붙이지 않으면 코드에서는 fadeToggle을 실행하려고 해도 p:contains(fadeTo)가 있기 때문에 fadeTo가 실행된다. 따라서 fadeTo는 fadeTo() 이렇게 괄호까지 붙여서 사용하면 fadeToggle도 실행이 잘 된다.

 

fade 계열 메소드는 요소를 단순히 숨기고 보여주는 것보다 조금 더 부드러운 시각 효과를 주고 싶을 때 사용한다고 보면 된다.

 

 

5) .animate();

 

• .animate({...}, 2000)
  선택된 이미지의 CSS 값을 2초 동안 부드럽게 변경한다.

변경되는 값은 { } 안의 width, left, top 이다.

---

4. effect2 - 클릭한 메뉴만 열리도록 만들기

 

 

위와 같이 코드를 작성해 화면을 만든다.

 

id가 sub_menu2인 것을 찾아 display:none;으로 평소에는 안 보이게 하고 숨겨져 있는 태그를 slideDown()으로 보여지게 하고, 클릭한 메뉴를 제외하고 나머지 메뉴는 숨겨지게 해볼 것이다.

현재 HTML 구조를 보면

<b> 태그 바로 다음에 서브메뉴 역할을 하는 <ul> 태그가 나오기 때문에,

$(this).next().slideDown();를 사용하면 클릭한 메뉴의 바로 아래 서브메뉴를 펼칠 수 있다.

$(this).siblings("ul").slideDown(); 으로도 가능하다. 어차피 구조상 클릭할 태그 다음 ul 태그가 오기 때문에 둘 중 어느 것을 쓰더라도 상관없다.

 

$(this).parent().siblings().find("ul").slideUp();

 

이 코드는 현재 클릭한 메뉴를 제외한 나머지 메뉴들의 <ul> 태그를 찾아 전부 다시 닫는 역할을 한다.

 

순서대로 보면,

• $(this).parent() → 클릭한 <b>의 부모인 <li>를 선택
• .siblings() → 그 <li>를 제외한 나머지 형제 <li>들을 선택
• .find("ul") → 그 안에 있는 서브메뉴 <ul>을 찾음
• .slideUp() → 서브메뉴를 위로 접으면서 숨김

 

즉, 이 코드는 클릭한 메뉴는 열고, 나머지 메뉴는 닫히게 만드는 구조이다.

 

결과적으로 한 번에 하나의 서브메뉴만 열리게 되기 때문에, 아코디언 메뉴처럼 동작한다고 볼 수 있다.

---

 

5. effect3

 

 

위와 같이 HTML 작성, css 작성했다.

 

 

1) toggleClass()로 이미지 on/off

버튼을 클릭하면

$("img").toggleClass("onoff");가 실행되어 모든 이미지에 onoff 클래스를 붙였다가 다시 제거한다.

 

toggleClass()는 클래스가 없으면 추가하고, 있으면 제거하는 메소드이다.

 

여기서는 CSS에서 .onoff { display:none; }로 설정해두었기 때문에, 버튼을 누를 때마다 이미지 전체가 숨겨졌다가 다시 보이게 된다.

 

 

2)  hasClass(),  addClass(),  removeClass()로 이미지 크기 변경

 

이미지를 클릭하면 현재 클릭한 이미지에 changeSize 클래스가 있는지 먼저 확인한다.

 

$(this).hasClass("changeSize")는 클릭한 이미지가 이미 커진 상태인지 검사하는 코드이다.

 

클래스가 있으면 removeClass("changeSize")로 제거해서 원래 크기로 되돌리고,

 

클래스가 없으면 addClass("changeSize")로 추가해서 이미지를 크게 만든다.

 

여기서는 CSS에서 .changeSize { width:300px; }로 설정해두었기 때문에,

클릭한 이미지 하나만 커졌다가 다시 원래 크기로 돌아오게 된다.

 

---

6. replace(with, all)

 

위와 같이 실행하면 첫번째 버튼을 눌렀을 때 <p> 태그가 <b>태그에 씌어진 "replaceWith" 으로 글자가 변경된다.

replaceAll("p")는 p 태그를 찾아서 전부 새 요소로 대체하는 방식이다.

 

즉, 기존 요소를 기준으로 바꾸는 replaceWith()와 반대로, 새로 만들 요소를 먼저 작성한 뒤

그 요소로 기존 요소들을 전부 바꾼다고 이해하면 된다.

 

---

 

7. insertion - prepend(), append(), html(), text()

 

1) prepend()

 

• $("div").prepend("<b>prepend()로 추가</b>");

이 코드는 div 안의 가장 앞부분에 <b> 태그를 추가하는 코드이다.

 

• $("div").prepend($("<p>").addClass("pre").text("prepend()") );

이 코드는 새로운 <p> 태그를 만들고, pre 클래스를 추가한 뒤, 텍스트를 "prepend()"로 넣어서 마찬가지로 div의 맨 앞에 추가하는 코드이다

 

 

 

 

결과는 왼쪽과 같이 나온다.

 

 

2) append()

 

append()도 마찬가지로 작성할 수 있는데

 

append()가 요소의 맨 뒤에 추가되는 방식이라면,

prepend()는 요소의 맨 앞에 추가된다.

 

 

3) html()

html()은 선택한 요소 안의 HTML 내용을 통째로 바꾸는 메소드이다.

 

이번 코드에서는 세 번째 버튼을 클릭했을 때 div 안의 기존 내용을 모두 지우고,

<b>html 요소를 바꾼다.</b>를 새로 넣도록 만들었다.

 

또 html()은 문자열 안의 태그를 실제 HTML 태그로 인식하기 때문에,

<b> 태그가 그대로 글자로 보이는 것이 아니라 굵게 적용된 상태로 화면에 나타난다.

 

4) text()

text()는 선택한 요소 안의 텍스트 내용만 바꾸는 메소드이다.

 

이번 코드에서는 네 번째 버튼을 클릭했을 때 div 안의 내용을 "<b>text 요소를 바꾼다.</b>"로 바꾸도록 작성했다.

 

하지만 text()는 문자열 안의 태그를 HTML로 해석하지 않고 그냥 글자 그대로 처리한다.

 

즉, html()처럼 <b> 태그가 굵게 적용되는 것이 아니라, <b>text 요소를 바꾼다.</b>가 그대로 화면에 문자처럼 출력된다.

 

---

8. insertion2 - setInterval()로 이미지 자동 회전 만들기

 

이번 예제에서는 위와 같이 이미지 세 개를 버튼을 눌렀을 때 이동시키는 방법을 배웠다.

 

우선 왼쪽과 같이 스크립트를 작성해준다.

버튼을 누르면 함수를 실행한다.

$("img").toggleClass("active");는

active 클래스가 있으면 추가, 없으면 제거한다.

 

즉, 버튼을 한 번 누르면 이미지들에 active 클래스가 붙고,

다시 누르면 active 클래스가 사라진다.

 

그 후, 조건문으로 start 버튼을 누르면 stop으로, stop이면 start로 만들어준다.

 

 

그 후, setInterval()을 통해 일정 시간마다 함수를 반복 실행한다.

 

앞에서 toggleClass()를 사용해 모든 이미지에 active 클래스를 부여했고,

이 상태에서

$(".active").first().appendTo(div);

 

를 실행하면 active 클래스가 붙어 있는 이미지들 중 첫 번째 이미지를 선택해서 #menu의 맨 뒤로 이동시키게 된다.

 

즉, 처음에는 첫 번째 이미지가 뒤로 가고, 1초 뒤에는 그다음 이미지가 다시 뒤로 가는 식으로

이미지들이 순서대로 계속 뒤로 이동하게 된다.

 

결과적으로 화면에서는 이미지 목록이 한 칸씩 밀리듯이 순환하는 것처럼 보이게 된다.

 

여기서 appendTo(div)는 선택한 요소를 div 안의 마지막 위치로 옮기는 메소드이고,

setInterval(..., 1000)은 이 동작을 1초마다 반복하도록 만드는 코드이다.

 

만약 반대로 돌리고 싶다면

$(".active").last().prependTo(div);

last()와 prependTo()를 사용하면 된다.

 

---

 

9. insert3 - after() / before()

 

 

<div id="base">

<p>외부 삽입</p>

</div>

위와 같이 HTML을 입력한다음

 

1) after()

 

위와 같이 작성 후 실행하면 id=base인 div 태그 뒤에 입력된다.

 

.after() 외에도 .insertAfter()를 사용할 수 있다.

 

2. before()

마찬가지로 id=base인 div 태그 전에 삽입되고

before() 외에도 .insertBefore()로 사용할 수도 있다.

---

10. insert4

 

 

우선 위와 같이 코드를 작성해준다.

 

 

화면상으로 inline-block;을 해줬기 때문에 블록 형태로 나란히 보여지게 된다.

 

언제나 그렇듯

$(function(){}으로 window.onload()와 같이 페이지가 다 로드된 뒤 함수를 실행한다.

 

1-1) 

let $box = $("<div>").addClass("box");

$("<div>") → 새로운 <div> 태그를 만든다.(아직 화면에 붙은 건 x)

.addClass("box"); → 방금 만든 <div> 태그에 box 클래스를 붙인다.

즉, box 클래스 붙은 div 태그를 변수 $box에 저장한다.

 

1-2) 

$(".sub_menu:first").wrap($box);

sub_menu 중 첫 번째를 찾아 $box로 감싼다. → 아침메뉴에 빨간 박스가 붙게 된다.

<div class="box">
    <div class="sub_menu">아침메뉴</div>
</div>

 

1-3)

$(".sub_menu").on("click", function(){ ... })

모든 sub_menu에 클릭 이벤트를 건다.

즉, 아침메뉴, 점심메뉴, 저녁메뉴, 야식메뉴를 클릭하면 함수가 실행되도록 한다.

 

1-4)

$(".sub_menu").each(function(){ ... })

첫번째부터 마지막 sub_menu를 돌면서 하나하나 검사한다.

여기서 this는 지금 클릭한 sub_menu 하나를 뜻한다.

if($(this).parent().is(".box"))

현재 돌고 있는 sub_menu의 부모가 box인가? 를 묻는다.

2)에서 볼 수 있듯 박스로 감싸져 있으면 현재 sub_menu의 부모는 class가 box가 맞다.

$(this).unwrap(".box");

box를 해제하는 코드이다.

즉, each를 활용해 box를 전부 벗긴다.

 

1-5)

$(this).wrap($box);

지금 클릭한 sub_menu를 다시 박스로 감싼다.

 

4번과 5번을 통해 클릭한 것만 박스로 감싸지고, 클릭하지 않은 건 실시간으로 박스가 해제되게 된다.

 

 

---

11. wrapInner()와 wrapAll() 로 요소 감싸기

 

이번에는 wrapInner()와 wrapAll()을 이용해서

요소 안쪽 내용을 감싸는 방법과,

여러 요소를 한 번에 하나의 태그로 묶는 방법을 확인했다.

 

 

우선 왼쪽 사진과 같이 HTML을 작성했다.

<pre> 태그 안에 a,b,c가 있고 d는 <span>, e는 다시 <pre> 태그 안에 있다.

 

 

 

 

 

 

1) wrapInner()

$("a").wrapInner("<span>");

이 코드는 모든 <a>태그 안쪽에 <span> 태그로 감싸는 것이다.

예를 들어, 점심메뉴가 <a> 태그로 감싸져 있었다면

<a href="#">점심메뉴</a>  → <a href="#"><span>점심메뉴</span></a>

 

이렇게 바뀌게 된다.

 

2) wrapAll()

$("pre").wrapAll("<b>");

 

이 코드는 선택된 모든 <pre> 태그들을 하나의 <b> 태그로 한꺼번에 감싸는 코드이다.

 

여기서 중요한 점은 pre 태그 하나하나를 각각 감싸는 것이 아니라,

선택된 pre 태그들을 전체 묶음으로 보고 바깥에 <b>를 한 번만 씌운다는 것이다.

 

즉, 여러 개의 요소를 따로 감싸는 것이 아니라

전체를 하나로 묶어 감싸는 방식이다.

 

따라서 결과가 a b c d e 순서로 작성했지만

아래 사진과 같이 출력된다.

 

 

하나는 요소 내부를 감싸고,
다른 하나는 여러 요소 전체를 한 번에 감싼다는 차이가 있다.

 

---

12) 정리 및 느낀점

오늘은 jQuery를 이용한 DOM 조작과 효과 처리 위주로 정리했다.

선택자를 이용해 원하는 요소를 찾고, css(), attr(), html(), text()처럼 내용을 바꾸는 메소드와 hide(), show(), toggle(), slide, fade 계열 효과도 같이 살펴봤다.

 

또 wrap(), unwrap(), wrapInner(), wrapAll()처럼 요소를 감싸거나 벗기는 방식도 정리했고,

append(), prepend(), replaceWith(), replaceAll()처럼 요소를 추가하거나 바꾸는 메소드가 어떻게 다른지도 다시 보게 됐다.

 

특히 오늘은 단순히 “이 메소드는 이런 뜻이다” 정도로 끝난 게 아니라, 실제로 어떤 HTML 구조에서 왜 siblings("ul")을 써야 하는지,

왜 $(this).slideDown()이 아니라 $(this).next().slideDown()이나 siblings("ul")이 필요한지처럼 구조를 보고 이해하려고 한 점이 더 중요했던 것 같다.

 

또 클래스 조작도 인상적이었다. 직접 CSS 값을 하나씩 바꾸는 방식보다 toggleClass(), addClass(), removeClass(), hasClass()를 이용해서 상태를 바꾸는 방식이 훨씬 깔끔하게 느껴졌다. 버튼을 누르면 이미지가 숨겨지거나 다시 보이고, 이미지를 클릭하면 특정 클래스가 붙어서 크기가 바뀌는 흐름이 조금씩 익숙해지는 느낌이었다.

 

헷갈리는 부분도 많았다. 특히 this, e.target, siblings(), parent(), find()처럼 현재 선택한 요소를 기준으로 어디를 찾아가는지 처음에는 바로 안 잡혔다. 사실 지금도 바로 잡히진 않는다.

그래도 하나씩 구조를 따라가면서 보니까

결국은 “지금 내가 클릭한 요소가 어디에 있고, 그 주변에 어떤 태그가 있는지”를 이해하는 게 핵심이라는 걸 느꼈다.

 

매일 진도 나가는 양이 많다보니 하루하루 놓치면 정말 뒤쳐질 거 같다. 매일 TIL 정리는 하고 있는데 남들이 보기엔 너무 방대하다고 생각할 지 모르겠다.

조금 더 체계적으로 정리하고 싶지만

더 열심히 정리하려다보면 하루종일 해도 안 될 거 같고

그냥 나만의 방식으로 오늘 배운 순서대로 내가 봤을 때 기억하기 쉽게 정리한다. ㅎ..