[구디아카데미] jQuery 이벤트 및 애니메이션

[구디아카데미]

✅ on 함수를 이용해서 이벤트를 등록하기

• e.target 을 사용하여 해당 이벤트 대상의 element를 가져와야한다

  <script>
    
        $(()=>{ // ready 함수
               // 기본이벤트 설정
               // jquery 이벤트처리는 ready함수에서 많이사용됨
            $("#eventTest li").on("click",e=>{  // 해당 태그 클릭시 
                $(e.target).text("이벤트발생시 문구변경");  // 그 해당되는 태그의 css내용이 모두 바뀜
            });

            //이벤트 설정시 이벤트 객체에 데이터 저장하기
            $("#eventTest li").on("mouseenter",{count:0},e=>{
                console.log(e.data);   // on 속성안에 변수값은 e.data로 접근할 수 있음
                e.data.count+=1;
            })

            $("#eventTest>h3").on({
                "click":e=>{$(e.target).css("fontSize","30px");},
                "dblclick":e=>{$(e.target).css("fontSize",(i,v)=>parseInt(v)+10+"px")},
                "mouseenter":e=>{$(e.target).css("backgroundColor","magenta")},
                "mouseleave":e=>{$(e.target).css("backgroundColor","white")}
            });
  </script>

✅ one 함수를 사용하여 한번만 실행하는 이벤트설정

    <button id="btn">한번만 클릭되는 버튼</button>
    <script>
        $("#btn").one("click",e=>{  // one
            alert("클릭함");
        });
    </script>

✅ off 함수를 사용하여 설정된 이벤트 삭제

    <button id="btn2">이벤트 삭제</button>
    <script>
        $("#btn2").on("click",{count:0},e=>{
            e.data.count += 1;
            alert(`5번만 실행되는 이벤트 : ${e.data.count}`);
            if(e.data.count==5){  // 다섯번클릭하면 해당 클릭 이벤트가 삭제됨
                //이벤트를 삭제 : off
                $(e.target).off("click");
            }
        })
    </script>

✅ 이벤트 속성별로 간편하게 이벤트등록함수 만들기

	    <div id="simpleEvent">
        <form action="">
            <input type="text" name="title" id="title"><br>
            <select name="type" id="type">
                <option value="공지">공지</option>
                <option value="자유">자유</option>
                <option value="secret">비밀</option>
            </select><br>
            <textarea name="conten" id="content" cols="100" rows="10"></textarea>
            <span>0/100</span>
            <br>
            <span></span>
            <input type="password" id="password">
        </form>
    </div>

    <script>
        $(()=>{
            $("#title").focus(e=>{ // 해당 부분에 커서 클릭했을 때
                $(e.target).css({
                    "backgroundColor":"magenta",
                    "color":"lime"
                });
            }).blur(e=>{ // 그 커서에서 벗어낫을 때
                $(e.target).css({
                    "backgroundColor":"white",
                    "color":"black"
                });
            });

            $("#type").change(e=>{  // 해당 값을 변경했을 때
                alert($(e.target).val());                
            })

            $("#content").keydown(e=>{ // 해당 텍스트부분을 입력할 때
                const length = $(e.target).val().length;
                if(length>100){
                    alert("100글자 이하로 작성하세요");
                    $(e.target).val($(e.target).val().substring(0,100));
                }
                $(e.target).next().text($(e.target).val().length+"/100");
            })

        })
    </script>

✅ animate()

    <div id="target"></div>
    <style>
        #target{
            width: 200px;
            height: 200px;
            background-color: violet;
        }
    </style>
    <script>
        $("#target").click(e=>{   // 클릭 이벤트 발생시켰을 때
            $(e.target).animate({  // 애니메이션 효과 발생  .animate()
                "position":"absolute",
                "left":"200px",
                "top":"200px",
                "width":"500px",
                "height":"500px",
                "opacity":"0.5",
                "backgroundColor":"magenta"
            },1000,()=>{alert("애니메이션 종료!")});
        });
    </script>

✅ animate()

• 슬라이딩 함수
• slideUp(진행시간(ms)) -> 올라가는 함수
• slideDown(진행시간(ms)) -> 내려가는 함수
• slideToggle(진행시간(ms)) -> 올라가있으면 내려가고 내려가있으면 올라감
• 주로 토글을 많이 사용

    <div id="menucontainer">
        <div>첫번째 메뉴</div>
    </div>
    <button id="btn">slideUp</button>
    <button id="btn2">slideDown</button>
    <button id="btn3">slideToggle</button>
    
    <style>
        div#menucontainer>div{
            width: 40%; 
            height: 300px;
            background-color: lightblue;
        }
    </style>    
    <script>
        $("#btn").click(e=>{
            $("#menucontainer>div").slideUp(500);
        });
        $("#btn2").on("click",e=>{
            $("#menucontainer>div").slideDown(1000);
        });

        $("#btn3").click(e=>{
            $("#menucontainer>div").slideToggle(1000); // 열고 닫는걸 한번에 함
        })
    </script>

✅ fade()

• 점점희미해지거나 점점 진해지는 느낌 주는 것
• fadeIn() -> 진해지는 것
• fadeOut() -> 희미해지는 것
• fadeTo() -> 투명도를 설정 가능
• fadeToggle() -> IN OUT 반대로 작동
• fade 또한 매개변수 안에 딜레이 시간을 넣을 수 있음

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_1zmVWal3B1Co6mSICcYfUKPHXxiAuKwBsA&usqp=CAU" 
    alt="" width="200" height="200" id="jooyoung">
    <br>
    <button onclick="fadeInTest();">fadeIn</button>
    <button onclick="fadeOutTest();">fadeOut</button>
    <button onclick="fadeToTest();">fadeTo</button>
    <button onclick="fadeToggleTest();">fadeToggle</button>
    <br><br><br><br><br>
    <style>
        #jooyoung{
            opacity: 0.3;
        }
    </style>

    <script>
        const fadeInTest=e=>{
            $("#jooyoung").fadeIn(1000);
        }

        const fadeOutTest=e=>{
            $("#jooyoung").fadeOut(1000);
        }

        const fadeToggleTest=e=>{ // 버튼하나로 fade in, fade out 할수있음
            $("#jooyoung").fadeToggle(1000);
        }

        const fadeToTest=e=>{   // 투명도를 설정할 수 있음 fadeTo
            $("#jooyoung").fadeTo(1000,0.3);  // 투명도 0.3
        }

        $("#jooyoung").hover(
            e=>{
                $(e.target).fadeTo(1000,1);  // 마우스를 올렸을때
            },
            e=>{
                $(e.target).fadeTo(1000,0.3); // 마우스 뗐을때
            })
    </script>

✅ show(), hide()

• slide와 비슷한 효과가 있으며, 생기고 사라지는 효과임

        <h1 id="jqueryEnd">이거까지하면 프론트끝!!</h1>
        <button onclick="showTest();">show</button>
        <button onclick="hideTest();">hide</button>
        <script>
            const showTest=()=>{ // show , hide 함수도 딜레이를 넣을 수 있음
                $("#jqueryEnd").show(1000);
            }
            const hideTest=()=>{
                $("#jqueryEnd").hide(1000); 
            }
        </script>

✅ 공지사항에 글 토글 만들기

        <div id="testMenu">
            <div>첫번째 메뉴</div>
            <p>첫번째 메뉴 내용</p>
            <div>두번째 메뉴</div>
            <p>두번째 메뉴 내용</p>
            <div>세번째 메뉴</div>
            <p>세번째 메뉴 내용</p>
            <div>네번째 메뉴</div>
            <p>네번째 메뉴 내용</p>
        </div>
        <style>
            #testMenu>div{
                font-size: 26px;
                font-weight: bolder;
            }

            #testMenu>p{
                display: none;
                height: 40px;
                background-color: lightgray;
                margin-left: 20px;
            };
        </style>
        <script>
            $("#testMenu>div").click(e=>{
                $("#testMenu>p").slideUp();
                $(e.target).next().slideToggle(1000);
            });
        </script>