jquery - jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

<!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>
 
<style type="text/css">
p {
    background-color: red;
}
h1 {
    background-color: blue;
}
</style>
 
</head>
<body>
 
    <!-- 
    클릭하면 이미지 변경
    mouseover시 애니메이션 효과주기
    동적으로 변경 
    -->
 
    <p id="test">p tag id test</p>
 
    <p>p tag 1</p>
 
    <p>p tag 2</p>
 
    <div>
        <p>div 안의 p tag</p>
    </div>
 
    <h1 class="cls" onmouseover="_mOverFunc()">h1 class cls</h1>
 
    <h1 class="cls1">h1 class cls1</h1>
 
    <script type="text/javascript">
        // 간단한 방법
        $(function() {
            //    alert("jquery");
        });
 
        // 정석으로 jQuery 준비
        $(document).ready(function() {
            //    alert("jquery");
 
            $('#test').click(function() {
                //    alert("p tag demo click");
            });
 
            $("p").click(function() {
                //    alert("p tag click");
                //    alert( $("p").text() );        // p태그 안에 있는 전체 문자열을 취득
                //    alert( $(this).text() );        // 클릭한 p태그의 문자열만 취득
            });
 
            // div안의 p태그 클릭시
            $("div p").click(function() {
                //    alert("div p tag click");
            });
 
            // mouseover시 알람
            $("h1.cls1").mouseover(function() {
                $('#test').text("마우스 커서가 영역에 들어 왔음");
            });
 
            $("h1.cls1").mouseout(function() {
                $('#test').text("마우스 커서가 영역에 벗어났음");
            });
        });
 
        function _mOverFunc() {
            $('#test').text("마우스 커서가 영역에 들어 왔음");
        }
    </script>
 
</body>
</html>

jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

단축키

Articles