3월 20일 (2) JavaScript - jQuery event, effect

ready()

html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다.

$(document).ready(function() {

여기에 모든 자바스크립트 코드를 작성

});

-> 단축형태

$(function(){

여기에 모든 자바스크립트 코드를 작성

});

$(document).ready(function() {

$("#btn").click(function(){

alert("버튼을 눌렀습니다.");

});

단축

$(function() {

$("#btn").click(function(){

alert("버튼을 눌렀습니다.");

});

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서의 준비 상태</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    // const btn = $("#btn").click(function () {
    //     alert("버튼을 눌렸습니다.");
    // }); 위에 작성하면 작동되지 않는다.
    $(function() {
        $("#btn").click(function(){
            alert("버튼을 눌렀습니다.");
        });
    });
</script>
</head>

<body>
    <!-- 스크립트의 순서에 따라서 안 나올 수도 있다. -->
    <button id="btn">버튼</button>
</body>
<script>
    // const btn = $("#btn").click(function () {
    //     alert("버튼을 눌렸습니다.");
    // }); 작동한다.
</script>
</html>

jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다.

1. 마우스 이벤트

click : 클릭이벤트

dbclick : 더블 클릭 이벤트

mouseenter/hover : 요소 위에 마우스가 위치함

mouseleave : 요소 밖으로 마우스가 나감

mousedown : 마우스 버튼이 눌렸을 때

mouseup : 누른 마우스 버튼에서 손을 땔 때

2. 키보드 이벤트

keydown : 키보드의 키가 눌렸을 때

keyup : 키보드의 눌려있던 키에서 손을 땔 때

keypress : 키가 눌려있는 상태

3. Form 이벤트

submit : type이 submit인 input 태그가 눌렸을 때

change : select 같은 입력 태그의 value 값 변경

focus : 입력태그가 포커스를 가질 때

blur : 입력태그가 포커스가 해제될 때

4. 문서 이벤트

load : 문서가 화면에 보일 때

resize : 창의 크기가 변경되었을 때

scroll : 페이지가 스크롤 될 때

unload : 다른 페이지가 전화되기 직전

5. on 메소드

선택한 요소에 하나 이상의 이벤트를 처리할 때 사용, 일반적으로 동적 바인딩된 요소의 이벤트 처리에 사용

동적 바인딩 : 자바스크립트 코드로 생성된 요소와 그 요소에서 처리할 이벤트를 묶어주는 작업

바인딩은 html 요소와 자바스크립트 코드를 묶어주는 작업

예 ready()를 쓰지 않고 그냥 자바스크립트를 썼을 때 요소가 연결되지 않아서 작동하지 않음

하나의 요소에 여러 개의 이벤트를 묶어서 해야 할 때 사용 addEventLisner와 비슷하다.

jQuery effect (선택한 요소에 효과 주기)

1. hide/show, toggle : 숨김/보임

hide : 해당 요소를 사라지게 하는 기능 (display : none)

show : 해당 요소를 나타나게 하는 기능 인라인요소와 블록 요소를 따로 처리해주어야 하는데 show를 쓰면 조금 간편하다

예) $(선택자).hide(speed, callback);

toggle : 두 기능을 한 번에 처리(switch)

$(선택자).toggle(speed, easing, callback);

speed : 밀리초, slow/fast
easing : swing(가속), linear(평균, 일정함) 시차를 주어 트래지션 처리를 해주는
callback : 효과가 끝난 다음 실행할 함수, 옵션

용어상식 : callback 함수란?

함수는 일반적으로 프로그램 내부에서 호출하여 사용하는데, 시스템이 호출하는 경도 있음. 시스템이 호출하는 함수를 callback 함수라고 한다. 개발자가 작성하는 시점과 다름

예) getTime() 개발자가 원한 시점과 setInterval(getTime, 1000) callback, 이벤트는 거의 다 callback 함수이다.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hide & show</title>
    <script src="JavaScript/jquery-3.6.4.js"></script>
    <style>
        div {
            background-color: darkgoldenrod;
            width: 100px;
            padding: 10px 0;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            $("ul").hide(); //display = none; 자리까지 없어지기 때문에 가로 세로가 같이 없어지고 나온다.
            $("div").hover(function () { //hover는 함수가 2개 들어간다. 
                $("ul").show(3000); //마우스가 올라갔을 때
            }, function () {
                $("ul").hide(3000); //마우스가 내려갔을 때
            });

            //글씨가 바뀌고 난 후에 기능이 구현
            $("#onoff").click(function () {
                let view = $("p").css("display"); // p의 display 속성을 가지고 와라
                console.log(view); //block
                if (view == "none") { //view가 none이면
                    $("#onoff").text("on");//버튼을 off, p를 보여줘라
                    $("p").show(2000);
                } else { //view가 none이 아니면
                    $("#onoff").text("off");//버튼을 on, p를 숨겨라
                    $("p").hide(2000);
                }
            });


            //기능이 구현되고 난 후에 글씨가 바뀜
            $("#toggle").click(function () {
                //시간값, slow, fast / linear, swing / callback함수
                $("p").toggle(1000, "swing", function(){ 
                    if($("#toggle").text() == "토글온"){ //토글온이면
                        $("#toggle").text("토글오프"); //토글오프로 바꿔라
                    } else {
                        $("#toggle").text("토글온"); //토글온으로 바꿔라
                    }
                }); 
            });
        });

    </script>
</head>

<body>
    <div>메뉴1</div>
    <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
        <li>항목 4</li>
        <li>항목 5</li>
    </ul>
    <hr>
    <button id="onoff">OFF</button>
    <button id="toggle">토글버튼</button>
    <p>항목 1</p>
    <p>항목 2</p>
    <p>항목 3</p>
    <p>항목 4</p>
    <p>항목 5</p>
</body>

</html>

2. fadeIn/fadeOut, fadeToggle, fadeTo

fadeIn(speed, callback) : 서서히 나타나는 효과

fadeOut(speed, callback) : 서서히 사라지는 효과

faseToggle(speed, callback) : 두 기능을 한 번에 처리

fadeTo(speed, opacity, callback) : 투명도 처리

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fade in/out</title>
    <script src="JavaScript/jquery-3.6.4.js"></script>
    <style>
        div {
            width: 80px;
            height: 80px;
            display: none;
            background-color: darkmagenta;
        }
    </style>
    <script>
        $(function(){
            $("#fin").click(function(){
                $("div").fadeIn(2000);
            });
            $("#fout").click(function(){
                $("div").fadeOut(3000);
            });
            $("#ftoggle").click(function(){
                $("div").fadeToggle(5000);
            });
            $("p").hover(function(){
                $("p").fadeTo("slow", 0.15); //투명하게
            }, function(){
                $("p").fadeTo("slow", 1);
            });
        });
    </script>
</head>

<body>
<button id="fin">Fade In</button>
<button id="fout">Fade Out</button>
<button id="ftoggle">Fade Toggle</button>
<br><br>
<div></div>
<p>글씨 위치</p>
</body>

</html>

3. slideDown/slideUp, slideToggle

sildeDown : 밑으로 펼쳐지는 형태로 보임

sildeUp : 위로 밀려 올라가는 형태로 숨김

sildeToggle : 두 기능을 한번에 처리

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아코디언 메뉴2</title>
    <script src="JavaScript/jquery-3.6.4.js"></script>
    <style>
        div {
            padding: 5px;
            text-align: center;
            background-color: salmon;
            border: 1px solid gainsboro;
            cursor: pointer;
        }

        .panel {
            padding: 50px;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $("#flip").click(function () {
                let view = $("#p1").css("display");
                if (view == "none") {
                    $("#p1").slideDown("slow", function(){
                        $("#flip").text("클릭하면 메뉴가 숨겨집니다.");
                    });
                } else{
                    $("#p1").slideUp("slow", function(){
                        $("#flip").text("클릭하면 메뉴가 나타납니다.");
                    });
                }     
            });

            $("#flip2").click(function(){
                let v = $("#p2").css("display");
                    $("#p2").slideToggle("show");
            });
        });

    </script>
</head>

<body>
    <div id="flip">클릭하면 아래로 메뉴가 나타납니다.</div>
    <div class="panel" id="p1">서브메뉴입니다.</div>
    <div id="flip2">토글 메뉴입니다.</div>
    <div class="panel" id="p2">서브메뉴입니다.</div>
</body>

</html>

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 (0)	2023.03.21
3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) (0)	2023.03.21
3월 20일 (1) JavaScript - 예제, jQuery (0)	2023.03.20
3월 17일 (2) JavaScript - locatoin, history (0)	2023.03.17
3월 17일 (1) JavaScript - Screen (0)	2023.03.17

새롭게 공부시작하기

3월 20일 (2) JavaScript - jQuery event, effect

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 20일 (2) JavaScript - jQuery event, effect

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바