jQuery event 공략하기(특강)

jQuery

<aside> 💡 html : 문서의 구조(뼈대) CSS : 디자인

 javascript : 웹페이지의 동적인 작업 + 상호작용 가능
 jQuery : js를 사용하기 편하게 개발자들이 만든 플러그인

 * 영어
 S(주어) + V(동사) -> 문장

 * JQuery
 선택자(주어, 타겟) + 메서드(동사, 명령어) -> 함수식

 '무엇을?' : 선택자, 주어, 타겟
 '어떻게 할래?' : 메서드, 동사, 명령어

</aside>

<aside> 💡 * jQuery를 사용하는 방법 1. 초기 플러그인 장착 *** 2. jQuery 시동 구문 3. 함수식 작성

 * jQuery 시동 구문

 $() : jQuery 를 시작하겠다.

     1. $(document).ready(function(){})
         타겟인 document가 준비되면 function(함수식)을 실행하겠다.
     
     2. $(function(){})
         컴퓨터가 이 구문을 읽으면 function을 실행

</aside>

<!DOCTYPE html>
<html lang="en">
<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>jQuery</title>
    <script src="js/jquery-3.6.4.min.js"></script>
    <script>

        /* css method : 선택자(타겟)의 css를 변경 */
        /* $('선택자').css('속성명', '속성값') */ 

        $(document).ready(function(){
            // 선택자명은 문자로 감싸준다.
            $('.item1').css('background-color', 'pink');
            $('.item2').css('background-color', 'lightgreen');
            $('.item3').css('background-color', 'skyblue');
            $('.item4').css('background-color', '#c281eb');

        })

        /* animate method : 선택자(타겟)에게 animate 부여 */
        /* $('선택자').animate({after style}, speed) */
        $(function(){
            $('.box1').animate({
                'margin-left' : '400px'
            }, 1000)

            $('#box2').animate({
                'margin-left' : '400px',
                'opacity': '0.5',
                'border-radius' : '50px'
            }, 2000)
        })

    </script>
    <style>
        li {
            margin: 20px;
            font-size: 30px;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background: #333;
            margin: 50px;
            color: #ffffff;
            text-align: center;
            line-height: 100px;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background: #333;
            margin: 50px;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <ul id="container">
    <!-- unlist ordered -->
        <li class="item1">list1</li>
        <li class="item2">list2</li>
        <li class="item3">list3</li>
        <li class="item4">list4</li>
    </ul>

    <div class="box1">box1</div>
    <div id="box2">box2</div>

    <!-- 이 위치에 sript 태그를 작성해도 무관함 -->
</body>
</html>

event

<aside> 💡 이벤트 단독으로 사용되지 않고 반드시 함수식을 수반한다. 사용자의 특정한 '행동'

‘언제?' '무엇을?': $('선택자') '어떻게 할래?' : 메서드

</aside>

<!DOCTYPE html>
<html lang="en">
<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>event</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 50px;
            text-align: center;
            line-height: 100px;
            cursor: pointer
        }

        body {
            height: 2000px;
        }
    </style>
    <script src="js/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function(){

            /* event */
            $('.box1').click(function(){
                
                $('.box1').css('background', 'salmon');
                $('.box1').animate({
                    'margin-left' : '300px'
                }, 1000)

            })

            $('.box2').mouseenter(function(){

                $('.box2').css('background', 'cadetblue');
                $('.box2').animate({
                    'margin-left' : '200px'
                }, 1000)

            })

            $('.box3').mouseleave(function(){

                $('.box3').css('background', 'gold');
                $('.box3').animate({
                    'margin-left' : '100px'
                }, 1000)

            })

            /* hover ( mouseenter + mouseleave ) */
            $('.box4').hover(function(){

                $('.box4').css('background', 'violet');
                $('.box4').animate({
                    'border-radius' : '50px'
                }, 1000)

            }, function(){

                $('.box4').css('background', '#fff');
                $('.box4').animate({
                    'border-radius' : '0px'
                }, 1000)

            })

            $(window).scroll(function(){
                $('.box5').css('background', 'darkred')
            })
        })
        

    </script>
</head>
<body>
    <div class="box1">click</div>
    <div class="box2">mouseenter</div>
    <div class="box3">mouseleave</div>
    <div class="box4">hover</div>
    <div class="box5">scroll</div>
</body>
</html>