IT Study/Web

[JQuery] 기본 문법 - 마우스 이벤트 처리

도뿌리 2018. 8. 6. 15:38

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="./jquery/jquery.min.js"></script>    
</head>
<body>
 
Name:<input type="text" name="firstname"><br><br>
 
Email:<input type="text" name="email" o><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 () {
        $(this).css("background-color","olive");
    });
    
    $("input").blur(function (){
        $(this).css("background-color","white");
    });
    
    $("#hideBtn").click(function () {
        $("p").hide(1000);
    });
    
    $("#showBtn").click(function () {
        $("p").show(1000);
    });
 
    $("#toggleBtn").click(function () {
        $("p").toggle(2000);
    });
    /* 
    $("p").click(function () {
        $(this).hide();
    });
     */
    $("p").dblclick(function () {
        $(this).hide();
    });
});
 
</script>
<br><br>
<div align="center">
    <div id="test" style="background-color: red; width:50%; height:200px; text-align: center">
        여기가 div tag입니다.
    </div>
</div>
 
 
<script type="text/javascript">
 
$(function () {
    
/*     $("#test").mouseenter(function () {
        alert("div 영역에 들어옴");
    });
    $("#test").mouseleave(function () {
        alert("div 영역을 벗어남");
    });
    
    $("#test").mousedown(function () {
        alert("div 영역을 클릭");
    });
    
    $("#test").mouseup(function () {
        alert("div upup");
    }); */
    
    $("#test").hover(function () {    //enter or leave 동작
        alert("hover 동작");
    });
});
 
 
</script>
</body>
</html>
cs


저작자표시 비영리 동일조건