태그 내 문장 삽입 & effect 효과

1. 태그 내 문장 삽입

• $("셀렉터").html()
  : 셀렉터 태그 내에 존재하는 자식 태그를 통째로 읽어올 떄 사용되는 함수 (태그를 동적으로 추가할 때 주로 사용)
• $("셀렉터").text()
  : 셀렉터 태그 내에 존재하는 자식 태그들 중에 html 태그는 모두 제외한 채 문자열만 출력하고자 할 때 사용하는 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>.off()</h1>
    <button id="btn">버튼 클릭 가능</button>
    <button id="btnBind">버튼 클릭을 가능하게 합니다.</button>
    <button id="btnUnbind">버튼 클릭을 불가능하게 합니다.</button>
    <div></div>
    <script>
        function action() {
        $('div').append("버튼 이벤트<br>");
        }
        $("#btn").on('click', function(){
            action();
        });
        $("#btnUnbind").on('click', function(){
            $("#btn").off("click").text("버튼 클릭 불가능");
        });
        // btnBind 클릭 시, btn 버튼 click 이벤트, "버튼 클릭 가능"
        $("#btnBind").on('click', function(){
            $("#btn").on("click").text("버튼 클릭 가능");
        });

        // $("#btnBind").on('click', function(){
        //   $("#btn").on("click", function(){
        //      action(); 
        //     }).text("버튼 클릭 가능");
        //  });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>.one()</h1>
    <p>아래 버튼은 한번만 실행됩니다.</p>
    <button>버튼을 클랙해주세요</button>
    <div></div>
    <script>
        $("button").one('click', function(){
            $("div").append("이제 클릭되지 않습니다.<br>");
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <input type="text"> 입력란에 키보드로 내용을 입력하세요.
    <h1>jquery .keypress()</h1>
    <p id="text"></p>
    <h1>jquery .keydown()</h1>
    <p id="text2"></p>

    <script>
        let i = 0;
        $("input").keypress(function(){
            $("#text").text((++i) + "빈 키보드가 눌렸습니다.");
        });
        let j = 0;
        $("input").keydown(function(){
            $("#text2").text((++j) + "빈 키보드가 눌렸습니다.");
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="listener" 
        placeholder="여기에 입력하세요."/>
    <div>
        <p>keycode = <span id="result1">0</span></p>
        <p>enter press = <span id="result2">none</span></p>
    </div>
    <script>
        $("#listener").keyup(function(e){
            $("#result1").html(e.keyCode);

            if( e.keyCode == 13 ){
                $("#result2").html("엔터키가 눌러졌습니다.");
            } else {
                $("#result2").html("none");
            }
        });
    </script>
</body>
</html>

2. effect 효과

• show() : 선택한 요소를 나타나게 함
• hide() : 선택한 요소를 사라지게 함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>.hind(), .show() 사용</h1>
    <p>
        <button id="btnHide">문장 숨기기</button>
        <button id="btnShow">문장 표시하시</button>
    </p>
    <div>안녕하세요. jQuery입니다.</div>
    <script>
        $("#btnHide").on('click', function(){
            $("div").hide(1000);
        });
        $("#btnShow").on('click', function(){
            $("div").show("fast");
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
</head>
<body>
    <h1>.toggle()</h1>
    <p>
        <button id="btnToggle">문장 토글</button>
    </p>
    <div>안녕하세요. jQuery입니다</div>
    <script>
        $("#btnToggle").on('click', function(){
            $("div").toggle(1000);
        });
    </script>
</body>
</html>