예순다섯 번째 수업

정혅·2024년 10월 6일

더 조은 아카데미

목록 보기

69/76

jQuery Event2

예제 1 : focus(), blur() 이벤트

포커스 이벤트는 마우스로 a, input태그를 클릭하거나 Tab키를 누르면 생성된다. >> 마우스가 없으면 키보드 만으로도 사이트를 이용할 수 있도록 만들어야 한다.
마우스 이벤트와, 키보드 이벤트를 같이 주는게 좋다.

focus() : 대상 요소로 포커스가 이동하면 이벤트를 발생
- $("이벤트 대상 선택").on("focus", function() { 자바스크립트 코드; });
focusin() : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생
- $("이벤트 대상 선택").on("focusin", function() { 자바스크립트 코드; });
focusout() : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생
- $("이벤트 대상 선택").on("focusout", function() { 자바스크립트 코드; });
blur() : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생
- $("이벤트 대상 선택").on("blur", function() { 자바스크립트 코드; });

강제로 이벤트를 발생시키고 싶다면 trigger이벤트 사용하자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $("#user_id_1, #user_pw_1").on("focus", function(){//포커스가 가면 css적용 
                    $(this).css({"background-color":"pink"});
    });
    $("#user_id_1, #user_pw_1").on("blur", function(){//포커스가 다른 요소로 이동하면 css적용 
                    $(this).css({"background-color":"#fff"});
    });

    $("#frm_2").on("focusin", function(){//입력요소에 포커스가 이동하면 css적용 
                    $(this).css({"background-color":"pink"});
    });
    $("#frm_2").on("focusout", function(){//입력 요소에서 포커스가 다른 곳으로 이동하면 css적용
                    $(this).css({"background-color":"#fff"});
    });
});
</script>
</head>
<body>
<h1>focus / blur</h1>
<form action="#">
    <p>
        <label for="user_id_1">ID</label>
        <input type="text" name="user_id_1" id="user_id_1">
    </p>
    <p>
        <label for="user_pw_1">PW</label>
        <input type="password" name="user_pw_1" id="user_pw_1">
    </p>
</form>
<h1>focusin / focusout</h1>
<form action="#" id="frm_2">
    <p>
        <label for="user_id_2">ID</label>
        <input type="text" name="user_id_2" id="user_id_2">
    </p>
    <p>
        <label for="user_pw_2">PW</label>
        <input type="password" name="user_pw_2" id="user_pw_2">
    </p>
</form>
</body>
</html>

예제 2 : 키보드로 마우스 이벤트 대응하기

.data() : jQuery에서 요소에 데이터를 연결하는데 사용한다.
- 아래 예제는 버튼에 마우스를 올리거나 포커스를 주고 .data()를 사용하여 해당 버튼에 특정한 텍스트 데이터를 연결하고, 그 데이터를 마우스 이벤트가 발생할때 사용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $("#btn1").data({"text":"javascript"})//text속성 jacascript를 추가 
    .on({
        "mouseover": overFnc, //마우스를 올리면 함수 발생 > //class txt에 text속성 값 출력
        "mouseout": outFnc // 함수 발생 > //벗어나면 위 텍스트를 빈 문자열로 줘서 사라지게 한다.
    });

    $("#btn2").data({"text":"welcome!"})
    .on({
        "mouseover focus": overFnc,
        "mouseout blur": outFnc
    });

    function overFnc() {
        $(".txt").text($(this).data("text"));//text속성 가져옴 
    }
    function outFnc() {
        $(".txt").text("");
    }
});
</script>
</head>
<body>
    <p><button id="btn1">버튼1</button></p>
    <p><button id="btn2">버튼2</button></p>
    <p class="txt"></p>
</body>
</html>

마우스 이벤트에 대한 키보드 대응 이벤트

mouseover() ::: focus()
mouseout() ::: blur()

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>

$(".btn").on("mouseover focus", function() {
    $(".txt_1").hide();
});

예제 3 : change() 이벤트

change() :선택한 폼 요소의 값(value)의 변경을 감지하고, 포커스가 다른 요소로 이동하면 이벤트를 발생

$("이벤트 대상 선택").on("change", function() { 자바스크립트 코드; });

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#rel_site").on("change", function(){
  $(".txt").text($(this).val()); //option 중 요소 값이 변하면 option의 value출력 
});
});
</script>
</head>
<body>
<select id="rel_site">
  <option value="">사이트 선택</option>
  <option value="www.google.com">구글</option>
  <option value="www.naver.com">네이버</option>
  <option value="www.daum.net">다음</option>
</select>
<p class="txt"></p>
</body>
</html>

예제 4 : 키보드 이벤트 keydown() / keyup() / keypress()

keydown() : 모든 키(한글 키 제외)를 누르는 순간 이벤트를 발생 > 여러 키 감지 가능
- $("이벤트 대상 선택").on("keydown", function() { 자바스크립트 코드; });
keyup() : 자판의 키를 눌렀다 키에서 손을 때면 이벤트를 발생 > 누르고 놓는 순간에 한 번 발생 > 추가적인 타이핑에 대해 이벤트 발생 x
- $("이벤트 대상 선택").on("keyup", function() { 자바스크립트 코드;});
keypress() : 기능키(F1~F12, Alt, Ctrl, Shift, ↑, Backspace, Caps Lock, 한/영, Tab 등)에 대해서는 이벤트를 발생시키지 않는다. <> keydown()과 유사 >> 문자 키를 누를 때 발생
- $("이벤트 대상 선택").on("keypress", function() { 자바스크립트 코드; });

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(document).on("keydown", keyEventFnc);
    function keyEventFnc(e) {
        console.log(e.keyCode); // e.key를 쓸것, e.keyCode 대신
    var direct = "";

    switch(e.keyCode){
        case 37: direct = "LEFT";
        break;
        case 38: direct = "TOP";
        break;
        case 39: direct = "RIGHT";
        break;
        case 40: direct = "BOTTOM";
        break;
    }

    if(direct) $("#user_id").val(direct); //누르는 화살표의 value값을 #user_id에 출력
    }
});
</script>
</head>
<body>
    <p><input type="text" name="user_id" id="user_id"></p>
</body>
</html>

key : 실제 눌린 키의 이름을 나타내는 속성이다. 이 속성은 키의 의미를 나타내기 위해 사용된다. 예를 들어, "a" 키는 "a"로 표시되고, "Shift" 키는 "Shift"로 표시된다. 문자 키는 대소문자를 구분하지 않습니다. 따라서 "a"와 "A"는 모두 "a"로 표시된다.
keyCode : 눌린 키의 키 코드를 나타내는 속성입니다. 키 코드는 키보드의 각 키에 대해 고유한 정수 값으로 정의된다. 예를 들어, "a" 키의 키 코드는 65이고, "Enter" 키의 키 코드는 13이다. > deprecated됐으므로, key를 이용

예제 5 : 이벤트가 발생한 요소 추적하기 this

this 선택자 : 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다.

index() : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환

  $("이벤트 대상 선택").on("이벤트 종류", function() {
  $("이벤트 대상 선택").index(this);
});

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".menuWrap_1 a").on("click", function(e){
        e.preventDefault();
        $(".menuWrap_1 a").css("backgroundColor", "#fff");
        $(this).css("backgroundColor", "#ff0");
    });
    $(".menuWrap_2 a").on("click", function(e){
        e.preventDefault();
        $(".menuWrap_2 a").css("backgroundColor", "#fff");
        let idx = $(".menuWrap_2 a").index(this);
        $(".menuWrap_2 a").eq(idx).css("backgroundColor", "#0ff");//eq()로 해당 인덱스에 css적용 
        $(".idxNum").text(idx);
    });
});
</script>
</head>
<body>
<h2>$(this)</h2>
<ul class="menuWrap_1">
                <li><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
                <li><a href="#">메뉴3</a></li>
</ul>
<h2>Index( )</h2>   
<ul class="menuWrap_2">
                <li><a href="#">메뉴4</a></li>
                <li><a href="#">메뉴5</a></li>
                <li><a href="#">메뉴6</a></li>
</ul>
<p class="idxNum"></p>
</body>
</html>

예제 6 : 그룹 이벤트 등록 및 삭제하기 on()

on() : 이벤트 대상 요소에 2개 이상의 이벤트를 등록 >> 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용
```
$([document | "이벤트 대상의 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function(){
  자바스크립트 코드;
});
```

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(document).on("mouseover focus", ".btn_1.on", function(){//마우스가 올라가거나 포커스가 가면 class가 btn_1이면서 on인애를 의미 (붙어있을 때 >> 떨어져있으면 후손의미
        alert("HELLO!");
    });

    $(".btn_1").addClass("on"); //.btn_1에 on클래스 생성 

    $(document).on("mouseover focus", ".btn_2.on", function(){
        alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
});
</script>
</head>
<body>
    <div id="wrap">
        <p><button class="btn_1">버튼1</button></p>
        <p><button class="btn_2">버튼2</button></p>
    </div>
</body>
</html>

예제 7 : one() 이벤트

one() : 한 번만 이벤트를 처리할 때 사용된다. 한 번만 실행되고, 그 후에는 자동으로 삭제된다. >> 한 번 클릭된 후에는 더 이상 이벤트가 발생하지 않는다.

//one() 기본 이벤트 등록 방식
$("이벤트 대상 선택").one("이벤트 종류", function(){
    자바스크립트 코드;
});

// one() 라이브 이벤트 등록 방식
$([document | "이벤트 대상의 상위 요소 선택").one("이벤트 종류", "이벤트 대상 요소 선택", function(){
    자바스크립트 코드;
});

delegate() : 선택한 요소의 하위 요소에 이벤트를 등록하는 메서드는 deprecated됌

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    // $(".btn_wrap").delegate(".btn_1.on",     // deprecated
    // "mouseover focus", function() {
    //     alert("HELLO!");
    // });
    // $(".btn_1").addClass("on");

    $(document).one("mouseover focus", //이벤트가 한번만 발생되고, 그 이후는 발생되지 않음
    ".btn_2.on", function() {
        alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
});
</script>
</head>
<body>
<div id="wrap">
    <p class="btn_wrap">
        <button class="btn_1">버튼1</button>
    </p>
    <p><button class="btn_2">버튼2</button></p>
</div>
</body>
</html>

예제 8 : 이벤트 해제 메서드 off()

off() : on() 메서드로 등록한 이벤트를 호출되지 않도록 막는것이다.
- $("이벤트 대상 요소 선택").off("이벤트 종류"); : 기본 이벤트 제거 방식
- $([document | "이벤트 대상 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택"); : 라이브 이벤트 제거 방식

이벤트 핸들러를 다시 활성화 시키려면 다시 .on() 메서드를 사용하여 이벤트 핸들러를 추가해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".btn_1").on("mouseover", function(){
        alert("HELLO!");
    });
      //동적으로 이벤트 발생시킬때 document나 상위요소 넣는다
    $(document).on("mouseover", ".btn_2", function() {
        alert("WELCOME!");
    });       
                                      //html요소의 클래스 이름을 추가할 때 역슬래시 사용해야함 
    $("#wrap").append("<p><button class=\"btn_2\">버튼2</button></p>");//#wrap의 마지막에 추가 
    $(".del_1").on("click", function(){
        $(".btn_1").off("mouseover");
    });
    $(".del_2").on("click", function(){
        $(document).off("mouseover",".btn_2");
    });
});
</script>
</head>
<body>
<div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
</div>
<p>
    <button class="del_1">버튼1 이벤트 해지</button> 
    <button class="del_2">버튼2 이벤트 해지</button>
</p>
</body>
</html>

이벤트 문제 : 버튼 누르면 글꼴 크기 변경

내가 푼 풀이

100% 여기도 text가 바뀌어야 하는 줄 알고.. 그냥 10으로 지정해서 했는데 저걸 눌렀을 때 다시 원래대로 돌아와야하는 형태였다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font: 14px Malgun Gothic, "맑은고딕", sans-serif;
    }

    .zoomBtnZone {
      font-size: 14px;
    }
  </style>
  <script src="js/jquery.js"></script>
  <script>
    $(function () {
      var baseFontSize = 14;
      var originSize = 100;
      $(".zoomOutBtn").on("click", function () {
        baseFontSize -= 1;
        originSize -= 10;
        $("#wrap").css("font-size", baseFontSize);  //폰트 사이즈 변경
        $(".fontSize").text(baseFontSize + "px");
        $(".originBtn").text(originSize + "%")
      });
      $(".zoomInBtn").on("click", function () {
        baseFontSize += 1;
        originSize += 10;
        $("#wrap").css("font-size", baseFontSize);
        $(".fontSize").text(baseFontSize + "px");
        $(".originBtn").text(originSize + "%");
      })
    });
  </script>
</head>

<body>
  <p class="zoomBtnZone">
    <button class="zoomOutBtn">-</button>
    <button class="originBtn">100%</button>
    <button class="zoomInBtn">+</button>
  </p>
  <p class="fontSize">14px</p>
  <div id="wrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat consectetur nibh, ut luctus urna placerat
    non. Phasellus consectetur nunc nec mi feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam
    odio nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum ipsum quis feugiat. Nunc non
    pellentesque diam, nec tempor nibh. Ut consequat sem sit amet ullamcorper sodales.
  </div>
</body>

</html>

선생님 풀이

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title> 이벤트 </title>
    <style>
        body {
            font: 14px Malgun Gothic, "맑은고딕", sans-serif;
        }

        .zoomBtnZone {
            font-size: 14px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var baseFontSize = 14;
            $(".zoomBtnZone button").on("click", zoomInOut);
            function zoomInOut() {
                if ($(this).hasClass("zoomOutBtn")) {
                    if (baseFontSize <= 8) return false;
                    baseFontSize--;
                } else if ($(this).hasClass("zoomInBtn")) {
                    if (baseFontSize >= 20) return false;
                    baseFontSize++;
                } else {
                    baseFontSize = 14;
                }
                $(".fontSize").text(baseFontSize + "px");
                $("body").css({ fontSize: baseFontSize + "px" });
            }
        });
    </script>
</head>

<body>
    <p class="zoomBtnZone">
        <button class="zoomOutBtn">-</button>
        <button class="originBtn">100%</button>
        <button class="zoomInBtn">+</button>
    </p>
    <p class="fontSize">14px</p>
    <div id="wrap">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat consectetur nibh, ut luctus urna
        placerat non. Phasellus consectetur nunc nec mi feugiat egestas. Pellentesque et consectetur mauris, sed rutrum
        est. Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum ipsum quis
        feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat sem sit amet ullamcorper sodales.
    </div>
</body>

</html>

선생님 코드는 100%인 버튼을 누르면 다시 14px로 돌아가는 형식이다. <> 나는 같이 변경되야하는줄..

이벤트 문제 2 : 포커스 문제

다음 이벤트의 종류를 올바르게 연결해 보세요.
입력 요소의 값이 바뀌거나 포커스가 이동하면 발생하는 이벤트는 ( ) 이고 포커스가 다른 요소로 이동하면 발생하는 이벤트는 ( ) 입니다.
① focus, focusout
② focus, focusin
③ blur, focus
④ change, blur
⑤ blur, change

4번

다음을 구현하시오.
① 메뉴 목록 a에 마우스 포인터를 올리거나 포커스를 이동하면 이벤트가 발생합니다.
② 이벤트가 발생한 a의 배경색을 #0ff로 합니다.
③ 마우스 포인터가 class 값이 "gnb"인 요소를 벗어나면 원래의 색으로 바꿉니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트</title>
<style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{padding:20px;}
    li{list-style:none;}
    a{text-decoration: none;color: #000;}
    .gnb{width:400px;text-align: center;overflow: hidden;}
    .gnb li{width:25%;float: left;padding:5px;}
    .gnb li a{border: 1px solid #000;display: block;padding:5px 0;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function() {
    var beforeMenu = null;
    $().on(, function() {
        if(beforeMenu) beforeMenu.css({background:"none"});
        $(this).css({"background-color":"#0ff"});
        beforeMenu = $(this);
    });
    $(".gnb").on(, function() {
        if(beforeMenu) beforeMenu.css({background:"none"});
    });
});
</script>
</head>
<body>
    <ul class="gnb">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
    </ul>
</body>
</html>

선생님 풀이

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트</title>
<style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{padding:20px;}
    li{list-style:none;}
    a{text-decoration: none;color: #000;}
    .gnb{width:400px;text-align: center;overflow: hidden;}
    .gnb li{width:25%;float: left;padding:5px;}
    .gnb li a{border: 1px solid #000;display: block;padding:5px 0;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function() {
    var beforeMenu = null;
    $(".gnb > li > a").on("mouseover focus", function() {
        if(beforeMenu) beforeMenu.css({background:"none"});
        $(this).css({"background-color":"#0ff"});
        beforeMenu = $(this);
    });
    $(".gnb").on("mouseleave", function() {
        if(beforeMenu) beforeMenu.css({background:"none"});
    });
});
</script>
</head>
<body>
    <ul class="gnb">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
    </ul>
</body>
</html>

jQuery effect

예제 1 : 움직이는 효과 메서드 slideUp(), fadeTo()

효과 메서드

slideDown(): 요소를 아래쪽에서 위쪽으로 슬라이딩하여 나타내는 효과를 제공
fadeIn(): 요소를 서서히 나타나게 하는 효과를 제공
fadeOut(): 요소를 서서히 사라지게 하는 효과를 제공
animate(): CSS 속성을 이용하여 요소의 스타일을 서서히 변경하거나 애니메이션을 적용
show(): 요소를 보이게 합니다. slideDown()과 fadeIn()의 조합으로 이루어져 있다.
hide(): 요소를 숨깁니다. slideUp()과 fadeOut()의 조합으로 이루어져 있다.
toggle(): 요소의 가시성을 토글합니다. show()와 hide()의 조합으로 이루어져 있다.

효과 메서드의 기본형

$("요소 선택").효과메서드(효과 소요 시간, 가속도, 콜백 함수);

효과 소요 시간 : 요소를 숨기거나 노출할 때 소요되는 시간
- "slow", "normal", "fast"
- 1000(1초), 500(0.5초)
가속도 : 숨기거나 노출하는 동안의 가속도를 설정
- "swing" : 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다.(기본값)
- "linear" : 일정한 속도로 움직인다.
콜백 함수 : 노출과 숨김 효과가 끝난 후에 실행할 함수 (생략 가능)
- $("#box").slideUp(2000, "linear", function() {alert("hello"); });
- id가 box인 요소를 2초간 위로 올려 숨기고, 요소가숨겨지면, 콜백함수로 hello메시지를 나타낸다.

fadeTo() 메서드

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);
투명도는 0~1까지의 값을 입력할 수 있고, 1에 가까울 수록 선명하게 보인다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
    $(".btn2").hide();

    $(".btn1").on("click", function( ) {
        $(".box").slideUp(1000, "linear", 
        function( ) {
            $(".btn1").hide( );
            $(".btn2").show( );
        });
    });

    $(".btn2").on("click", function( ) {
        $(".box").fadeIn(1000, "swing", 
        function( ) {
            $(".btn2").hide( );
            $(".btn1").show( );
        });
    });

    $(".btn3").on("click", function( ) {
        $(".box").slideToggle(1000, "linear");
    });

    $(".btn4").on("click", function( ) {
        $(".box").fadeTo("fast", 0.3);
    });

    $(".btn5").on("click", function( ) {
        $(".box").fadeTo("fast", 1);
    });

});
</script>
<style>
    .content{
        width:400px;
        background-color: #eee;
    }
</style>
</head>
<body>
    <p>
        <button class="btn1">slideUp</button>
        <button class="btn2">fadeIn</button>
    </p>
    <p>
        <button class="btn3">toggleSide</button>
    </p> 
    <p>
        <button class="btn4">fadeTo(0.3)</button>
        <button class="btn5">fadeTo(1)</button>
    </p>   
    <div class="box">
        <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat sem sit amet ullamcorper sodales.
        </div>
    </div>
</body>
</html>

예제 2 : 애니메이션 메서드 animate()

animate() : 선택한 요소에 다양한 동작(Motion) 효과를 적용 >> 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용
- $("요소선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수)
- 스타일 속성 : 애니메이션으로 적용할 스타일 속성
- 적용 시간 : 동작에 반응하는 데 소요되는 시간

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".btn1").on("click", function( ) {
        $(".txt1").animate({
            marginLeft:"500px",
            fontSize:"30px"
        },
        2000, "linear", function( ) {
            alert("모션 완료!"); 
        });
    });

    $(".btn2").on("click", function( ) {
        $(".txt2").animate({
            marginLeft:"+=50px"
        },1000);
    }); 
});
</script>
<style>
    .txt1{background-color: aqua;}
    .txt2{background-color: pink;}
</style>
</head>
<body>
    <p><button class="btn1">버튼1</button></p>
    <span class="txt1">"500px" 이동</span>
    <p><button class="btn2">버튼2</button></p>
    <span class="txt2">"50px"씩 이동</span>
</body>
</html>

예제 3 : 애니메이션 효과 제어 메서드 stop(), delay()등등

애니메이션 효과 제어 메서드란 '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드다.

queue에 저장되기 때문에 FIFO형식이다.

stop() : 현재 실행 중인 효과를 모두 정지시킨다.
- $("요소 선택").stop(); : 진행 중인 첫번째 애니메이션만 정지 >> 뒤에 대기중인 애니메이션은 계속해서 실행
- $("요소 선택").stop(clearQueue, finish); : true, false값을 입력할 수 있다.
  - clearQueue가 true면 큐에 대기 중인 애니메이션을 모두 제거한다.
  - finish가 true면 진행 중인 애니메이션을 강제 종료한다.
delay() : 요소에 적용한 애니메이션을 지정한 시간만큼 지연시킨다.
- $("요소선택").delay(지연 시간).애니메이션 효과 메서드();
clearQueue() : 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거한다.
finish() : 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

// 진행 중인 애니메이션만 정지시키는 경우 - stop()
$(".txt").animate({opacity:0.5}, 1000).animate({marginLeft:"500px"}, 1000);
$(".txt").stop();

//대기 중인 애니메이션은 제거하고 진행 중인 애니메이션은 강제로 종료하는 경우
$(".txt2").animate({opacity:0.5}, 1000).animate({marginLeft:"500px"}, 1000);
$(".txt2").stop(true, true);

//애니메이션 함수 앞에 delay(3000) 메서드를 적용하면 3초 후에 애니메이션이 적용 - delay()
  $(".txt1").delay(3000).animate({marginLeft:"500px"}, 1000);

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".txt1")
    .animate({marginLeft:"300px"},1000);

    $(".txt2").delay(3000)
    .animate({marginLeft:"300px"},1000);

    $(".btn1").on("click", moveElement);

    function moveElement( ) {
        $(".txt3")
        .animate({marginLeft:"+=50px"},800);
/*
[버튼1]을 누를 때마다 class 값이 "txt3"인 요소가 0.8초간
50px씩 이동합니다.
*/
        $(".txt4")
        .animate({marginLeft:"+=50px"},800);
        $(".txt4").stop()
/*
stop()이 실행되면 [버튼1]을 눌러도 애니메이션이 동작하지
않습니다.
*/
        $(".txt5")
        .animate({marginLeft:"+=50px"},800);
        $(".txt5").stop(true, true)
/*
stop(true, true)가 실행되면 [버튼1]을 눌러도 애니메이션이
바로 종료 시점으로 이동합니다. 그래서 애니메이션 없이
css() 메서드를 적용한 것처럼 50px씩 이동합니다.
*/        
    }
});
</script>
<style>
    p{width: 110px;text-align: center;}
    .txt1{background-color: aqua;}
    .txt2{background-color: pink;}
    .txt3{background-color: orange;}
    .txt4{background-color: green;}
    .txt5{background-color: gold;}
</style>
</head>
<body>
    <p class="txt1">효과1</p>
    <p class="txt2">효과2<br> delay(3000)</p>

    <p><button class="btn1">50px 전진</button></p>
    <p class="txt3">효과3</p>
    <p class="txt4">효과4<br>stop( )</p>
    <p class="txt5">효과5<br>stop(true, true)</p>
</body>
</html>

예제 4 : queue() / dequeue() 메서드

queue() : 큐(queue)에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.
- 메서드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.
dequeue() : queue() 메서드실행 이후에 적용된 애니메이션 메서드가 제거되는 것을 막을 수 있다.

//큐(Queue)의 함수 반환
$("요소 선택").queue();

// 큐(Queue)에 함수 추가
$("요소 선택").queue(function() { 자바스크립트 코드 } );

// dequeue() 메서드
$("요소 선택").dequeue();

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
    $(".txt1")
    .animate({marginLeft:"200px"},1000)//1초 동안 오른쪽으로 200px이동
    .animate({marginTop:"200px"},1000)//1초 동안 아래로 200px 이동
    .queue(function() { //이동 후에 css적용
            $(this).css({background:"red"});
            $(this).dequeue();//queue()에 애니메이션 취소를 막고
    })
    .animate({marginLeft:0},1000) //왼쪽으로 1초동안 이동
    .animate({marginTop:0},1000); //위쪽으로 1초동안 이동
});
</script>
<style>
    *{margin:0;}
    .txt1{width:50px;text-align: 
    center;background-color: aqua;}
</style>
</head>
<body>
    <p class="txt1">내용1</p>
</body>
</html>

예제 5 : clearQueue()

clearQueue() : 진행 중인(첫 번째) 애니메이션을 제외하고 큐에서 대기하는
모든 애니메이션 함수를 제거한다.
- $("요소 선택").clearQueue();

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function() {
    $(".txt1")
    .animate({marginLeft:"100px"},1000)
    .animate({marginLeft:"300px"},1000)
    .animate({marginLeft:"400px"},1000);

    $(".txt2")
    .animate({marginLeft:"100px"},1000)
    .animate({marginLeft:"300px"},1000)
    .animate({marginLeft:"400px"},1000);
    $(".txt2").clearQueue();
/*
clearQueue()를 실행하면 현재 진행 중인 애니메이션을 제외하고 대기 중인 애니메이션은 모두 제거됩니다.
*/    
});
</script>
<style>
    .txt1, .txt2{width:50px; text-align: 
    center; background-color: aqua;}
    .txt2{background-color:orange;}
</style>
</head>
<body>
    <p class="txt1">내용1</p>
    <p class="txt2">내용2</p>
</body>
</html>

내용 2는 첫번째 애니메이션만 진행되고 cleaQueue()에 의해 대기중인 애니메이션이 제거되어, 100px이후로 움직이지 않는다.

jquery effect 문제

다음을 애니메이션 효과를 주자.
go 버튼을 누르면 "내용1"이 오른 쪽으로 일정간격 이동하게.
back 버튼을 누르면 "내용1"이 왼 쪽으로 일정간격 이동하게.

내 풀이

나는 시작점을 안정해서 처음에 back 을 누르면 틀을 벗어난다.

  <!DOCTYPE html>
  <html lang="ko">

<head>
  <meta charset="UTF-8">
  <title> 효과와 애니메이션 </title>
  <script src="js/jquery.js"></script>
  <script>
    $(function () {
      var move = 0;
      $(".btnWrap").on("click", ".backBtn", function () {
        move -= 20;
        $(".txt1").animate({ marginLeft: move }, "slow");
      });
      $(".btnWrap").on("click", ".goBtn", function () {
        move += 20;
        $(".txt1").animate({ marginLeft: move }, "slow");
      });
    });
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 20px;
    }

    .btnWrap {
      margin-bottom: 10px;
    }

    .wrap {
      max-width: 600px;
      border: 1px solid #000;
    }

    .txt1 {
      width: 10%;
      text-align: center;
      background-color: aqua;
      position: relative;
    }

  </style>

</head>

<body>
  <p class="btnWrap">
    <button class="backBtn">Back</button>
    <button class="goBtn">Go</button>
  </p>
  <div class="wrap">
    <p class="txt1">내용1</p>
  </div>
</body>

</html>

선생님 풀이

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function() {
    var txt1 = $(".txt1");
    var count = 1;
    $(".btnWrap button").on("click", function() {
        if(!txt1.is(":animated")) {
            if($(this).hasClass("backBtn")) {
                count--;
                if(count < 1) {
                    count = 1;
                    return false;
                } 
                txt1.animate({marginLeft:"-=10%"},300);
            } else {
                count++;
                if(count > 10) {
                    count = 10;
                    return false;
                }             
                txt1.animate({marginLeft:"+=10%"},300);
            }
        }
    });
});
</script>
<style>
    *{margin:0;padding:0;}
    body{padding:20px;}
    .btnWrap{margin-bottom: 10px;}
    .wrap{
        max-width:600px;
        border: 1px solid #000; 
    }
    .txt1{width:10%; text-align:center;
    background-color: aqua;}
</style>
</head>
<body>
    <p class="btnWrap">
        <button class="backBtn">Back</button>
        <button class="goBtn">Go</button>
    </p>
    <div class="wrap">
        <p class="txt1">내용1</p>
    </div>
</body>
</html>

<!--
셀렉터 :animated가 있다.
이는 애니메이션중인 요소를 찾는다. 이를 is와 결합해서
$('selector').is(':animated'); 를 사용한다.
애니메이션중이면 true, 아니면 false를 반환한다.
-->

버튼을 눌렀을 때 효과(Effect) 메서드를 이용하여 h1이 점점 투명해지면서 사라지도록 만들어 보세요. 단, 사라지는 속도는 1초로 설정하세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(function(){



});

</script>
</head>
<body>
 <button id="btn">버튼</button>
 <h1>내용</h1>
</body>
</html>

내 풀이

버튼 누르면 1초동안 사라짐

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title> new document </title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">

    $(function () {
      $("#btn").on("click", function () {
        $("h1").fadeTo(1000, 0)
      })
    });

  </script>
</head>

<body>
  <button id="btn">버튼</button>
  <h1>내용</h1>
</body>

</html>

선생님 풀이 fadeOut() 사용

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function() {
  $("#btn").on("click",function(){
    $("h1").fadeOut(1000);
  });
});
</script>
</head>
<body>
 <button id="btn">버튼</button>
 <h1>내용</h1>
</body>
</html>

버튼을 누를 때마다 애니메이션 메서드를 이용하여
태그가 50px 단위로 오른쪽으로 이동되도록 만들어 보세요. 단, 이동 속도는 0.5초로 설정하세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(function(){



});

</script>
<style type="text/css">
*{margin:0; padding:0;}
#ctx{width:50px; height:50px; background:yellow;}
</style>
<body>
 <button id="btn">버튼</button>
 <p id="ctx">내용</p>
</body>
</html>

선생님 풀이

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
  $("#btn").on("click",function(){
      $("#ctx").animate({marginLeft:"+=50px"},500)
  })
});
</script>
<style type="text/css">
  *{margin:0; padding:0;}
  #ctx{width:50px; height:50px; background:yellow;}
</style>
</head>
<body>
 <button id="btn">버튼</button>
 <p id="ctx">내용</p>
</body>
</html>

jQuery와 javascript 비교

예제 1 : p태그 하나의 내용 변경

javascript

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.addEventListener("DOMContentLoaded",()=>{
      document.getElementsByTagName("p")[0].innerHTML = "Change the page";
    });
  </script>
</head>
<body>
  <p>안녕하세요1</p>
  <p>안녕하세요2</p>
  <p>안녕하세요3</p>
  <p>안녕하세요4</p>
  <p>안녕하세요5</p>
</body>
</html>

JQuery

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("p").eq(0).html("Change the page.");
    });
  </script>
</head>
<body>
  <p>안녕하세요1</p>
  <p>안녕하세요2</p>
  <p>안녕하세요3</p>
  <p>안녕하세요4</p>
  <p>안녕하세요5</p>
</body>
</html>

예제 2 : 모든 p태그 내용 변경

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script>
    document.addEventListener("DOMContentLoaded",()=>{
      for(let i=0;i<5;i++){
        document.getElementsByTagName("p")[i].innerHTML = "Change the page";
      }//getElement부분을 변수에 저장해서 넣는게 더 효율
    });
  </script>
</head>
<body>
  <p>안녕하세요1</p>
  <p>안녕하세요2</p>
  <p>안녕하세요3</p>
  <p>안녕하세요4</p>
  <p>안녕하세요5</p>
</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("p").html("Change the page.");
    });
  </script>
</head>
<body>
  <p>안녕하세요1</p>
  <p>안녕하세요2</p>
  <p>안녕하세요3</p>
  <p>안녕하세요4</p>
  <p>안녕하세요5</p>
</body>
</html>

정혅

이전 포스트

예순 네 번째 수업

다음 포스트

예순다섯 번째 수업

더 조은 아카데미

jQuery Event2

예제 1 : focus(), blur() 이벤트

예제 2 : 키보드로 마우스 이벤트 대응하기

예제 3 : change() 이벤트

예제 4 : 키보드 이벤트 keydown() / keyup() / keypress()

예제 5 : 이벤트가 발생한 요소 추적하기 this

예제 6 : 그룹 이벤트 등록 및 삭제하기 on()

예제 7 : one() 이벤트

예제 8 : 이벤트 해제 메서드 off()

이벤트 문제 : 버튼 누르면 글꼴 크기 변경

이벤트 문제 2 : 포커스 문제

jQuery effect

예제 1 : 움직이는 효과 메서드 slideUp(), fadeTo()

예제 2 : 애니메이션 메서드 animate()

예제 3 : 애니메이션 효과 제어 메서드 stop(), delay()등등

예제 4 : queue() / dequeue() 메서드

예제 5 : clearQueue()

jquery effect 문제

jQuery와 javascript 비교

예제 1 : p태그 하나의 내용 변경

예제 2 : 모든 p태그 내용 변경

예순 네 번째 수업

예순여섯 번째 수업

0개의 댓글