jQ_3강

삼색이삼랑해 2022. 10. 29. 23:56

jQuery Effect

1. 기본 effect

hide/show : 요소 숨김(display: none)/보임
fade : 서서히 나타나거나 사라지게 하는 효과
slide : 아래에서 위로 사라지거나 위에서 아래로 나타나게 하는 효과
animate : 사용자 정의 애니메이션 효과를 요소에 추가
stop : 동작 중인 effect를 중지시킴

=> 모든 effect에는 시간을 설정할 수 있음(밀리초 단위)

=> callback(콜백) 함수 : 작업 처리 후 호출하는 함수로, effect 함수는 모두 callback 함수를 정의해 effect 처리가 종료되는 시점에서 또다른 작업을 처리하도록 작성할 수 있음

2. Fade In & Out

fadeIn(speed, callback) : 서서히 나타나는 효과
fadeOut(speed, callback) : 서서히 사라지는 효과
fadeToggle(speed, callback) : In, Out을 합쳐놓은 효과
fadeTo(speed, opacity, callback) : 투명도 조정
+) speed : slow, fast 또는 밀리초

3. Slide Up & Down

slideDown(speed, callback) : 요소가 위에서 아래로 커지며 나타남
slideUp(speed, callback) : 요소가 아래에서 위로 작아지며 사라짐
slideToggle(speed, callback) : up & down 토글

4. Animate

animate({params}, speed, callback) => params는 CSS의 다양한 속성(크기, 위치 등)

예제)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Effect</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script>
        $(function (){
            $("#vs").click(function (){
                $("div").first().fadeIn("slow", function(){
                    $(this).next("div").fadeIn("slow", function (){
                        $(this).next("div").fadeIn("slow");
                    });
                });
            });

            $("#iv").click(function (){
                $("div").first().fadeOut("slow", function(){
                    $(this).next("div").fadeOut("slow", function (){
                        $(this).next("div").fadeOut("slow");
                    });
                });
            });

            $("#to").click(function (){
                $("div").first().fadeToggle("slow", function(){
                    $(this).next("div").fadeToggle("slow", function (){
                        $(this).next("div").fadeToggle("slow");
                    });
                });
            });

            $("#ft").click(function (){
                $("#d1").fadeTo("slow", 0.15);
                $("#d2").fadeTo("slow", 0.4);
                $("#d3").fadeTo("slow", 0.7);
            });

            $("#flip1").click(function (){
                //$(this).next().slideDown("slow");
                $(this).next().slideToggle("slow");
            });
            $("#flip2").click(function (){
                $(this).prev().slideUp("slow");
            });

            // animate
            $("#ani").click(function (){
                $("#ad").animate({left: "250px",
                    opacity: "0.5",
                    height: "150px",
                    width: "150px"
                }, "slow", function (){
                    alert("애니메이션 완료");
                });
            });
        });
    </script>
    <style>
        생략
    </style>
</head>
<body>
<a href="baseball">야구로 이동</a>
<a href="attr">속성으로 이동</a>
<h2>Fade 효과</h2>
<button id="vs">Fade In</button>
<button id="iv">Fade Out</button>
<button id="to">Fade Toggle</button>
<button id="ft">Fade To</button>
<div id="d1" style="background-color: red"></div>
<div id="d2" style="background-color: green"></div>
<div id="d3" style="background-color: blue"></div>
<hr>
<h2>Slide 효과</h2>
<div id="flip1">여기를 눌러 주세요(토글)</div>
<div id="panel">여기에 서브 메뉴가 있어요~</div>
<div id="flip2">여기를 눌러 주세요(닫힘)</div>
<hr>
<h2>Animate 효과</h2>
<button id="ani">Animate</button>
<div id="ad"></div>
</body>
</html>

Method Chaining 기법

Method Chaining 기법이란 기능들이 연결된 것처럼 물고 물려서 연속적으로 일어나는 형태를 말한다.

- jQuery의 Method Chaining

$(selector).css("color", "red").slideUp(2000).slideDown(2000);

- Js에서의 코드

const sel = $(selector);
sel.css("color", "red");
sel.slideUp("2000");
sel.slideDown("2000");

요소의 속성값 읽어오기 및 지정(변경)하기

attr()	선택한 요소의 속성을 처리하기 위한 메소드
	읽어오기	let s = $(selector).attr("attribute");
	지정하기	$(selector).attr("attribute", "변경값");
val()	input 태그의 입력값을 처리하기 위한 메소드
	읽어오기	let s = $(selector).val();
	지정하기	$(selector).val("값");
text()	innerText와 같은 메소드
	읽어오기	let s = $(selector).text();
	지정하기	$(selector).text("값");
html()	innerHTML과 같은 메소드
	읽어오기	let s = $(selector).html();
	지정하기	$(selector).html("값");

예제)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script>
        $(function (){
            let txt = $("p").text();
            let html = $("p").html();
            console.log(txt);
            console.log(html);
            $("#text").text("<h2>text와 html의 차이</h2>");
            $("#html").html("<h2>text와 html의 차이</h2>");

            let type = $("#intag").attr("type");
            console.log(type);

            $("#inbtn").click(function (){
                let indata = $("#intag").val();
                console.log(indata);
            });
            $("#chbtn").click(function (){
                $("#intag").attr("type", "button");
            });

            // 범위 입력 처리
            let i = $("#point").val();
            // $("#point").change(function (){
            $("#point").on("input", function (){
                // 두 가지 이상의 동작을 동시에 할 때 on을 사용
                let val = $(this).val();
                i = val;
                console.log(i);
                $("#msg").text(val);
            }, "click", function (){

            });

            // 증가 버튼
            $("#inc").click(function (){
                i ++;
                $("#point").val(i);
                $("#msg").html(i);
            });

            // 감소 버튼
            $("#decbtn").click(function (){
                i --;
                $("#point").val(i);
                $("#msg").html(i);
            });
        });
    </script>
</head>
<body>
<h2>속성 읽기(내용은 콘솔에서 확인)</h2>
<p>문자가 쓰여진 <b>강조된</b> 영역</p>
<span id="text"></span><br>
<span id="html"></span><br>
<input id="intag" type="text" value="text">
<button id="inbtn">값 읽기</button>
<button id="chbtn">속성 변경</button>
<hr>
<fieldset>
    <legend>숫자 입력</legend>
    범위(1~100) :
    <input id="point" type="range"
           min="0" maxlength="100" value="30" step="1">
    현재 값 : <span id="msg"></span><br>
    <button id="inc">증가</button>
    <button id="decbtn">감소</button>
</fieldset>
</body>
</html>