jquery - jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
</head>
<body>
 
    Name:
    <input type="text" name="firstname">
    <br>
    <br> Email:
    <input type="text" name="email">
    <br>
    <br>
    <br>
 
    <p>p Tag</p>
 
    <button id="hideBtn">감추기</button>
    <button id="showBtn">보여주기</button>
    <br>
    <!-- 감췄다가 보여주는 토글 -->
    <button id="toggleBtn">toggle</button>
 
    <script type="text/javascript">
        $(function() {
 
            $("input").focus(function() {
                // focus오면 (key값, value)
                $(this).css("background-color", "#ffff00");
            });
            $("input").blur(function() {
                $(this).css("background-color", "#ffffff");
            });
 
            $("#hideBtn").click(function() {
                $('p').hide(1000);
            });
            $("#showBtn").click(function() {
                $('p').show(3000);
            });
            $("#toggleBtn").click(function() {
                $('p').toggle(2000);
            });
 
            /* 
            p태그 클릭 시 사라짐
            $("p").click(function () {
                $(this).hide();
            }); 
            */
 
            // p태그 더블 클릭하면 사라짐
            $("p").dblclick(function() {
                $(this).hide();
            });
 
        });
    </script>
 
    <br>
    <br>
    <div align="center">
        <div id="test"
            style="background-color: red; width: 50%; height: 100px; text-align: center;">
            여기가 div tag입니다</div>
    </div>
 
    <script type="text/javascript">
        $(function() {
 
            /* 
            $("#test").mouseenter(function() {
                alert("div영역에 들어옴");
            });
            $("#test").mouseleave(function() {
                alert("div영역을 벗어남");
            });
            */
            
            // 영역에 들어오고 나가는 것 한번에
            $("#test").hover(function() {
                alert("hover 동작");
            });
 
            /*
            $("#test").mousedown(function() {
                alert("div 클릭");
            }); 
            $("#test").mouseup(function() {
                alert("div 놓음");
            });
            */
        });
    </script>
 
</body>
</html>
jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

단축키

Articles
