Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

moozi

jquery 이벤트 본문

TIS_2016/HTML5_2기

jquery 이벤트

moozi 2016. 6. 13. 10:22

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery 연습</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        $(document).ready(function(){

            $("#btn1").click(function(){

                $("h1").css("color","red");

            });

            $("#btn2").on("click",function(){

                $("h1").css("color","blue");

            });

            $("#header").on("mouseenter",function(){

                $(this).addClass("reverse");

            });

            $("#header").on("mouseleave",function(){

                $(this).removeClass("reverse");

            });

            $("#header2").on({

                mouseenter:function(){  

                    $(this).addClass("reverse");

                },

                mouseleave:function(){

                    $(this).removeClass("reverse");

                }

            });

        });

    </script>

    <style type="text/css">

        .reverse{

            color:red;

            cursor:pointer;

        }

    </style>

</head>

<body>

    <h1 id="header">Jquery</h1>

    <button id="btn1">클릭</button>

    <button id="btn2">클릭2</button>

    <h1 id="header2">Jquery</h1>

</body>

</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

jquery연습문제03  (0) 2016.06.13
jquery연습문제02 풀이  (0) 2016.06.13
layout06  (0) 2016.06.13
jquery연습문제02  (0) 2016.06.10
숫자야구게임 설명  (0) 2016.06.10
'TIS_2016/HTML5_2기' Related Articles more
Comments