JQueryPractice/index3_event.html at main · EduKeyPath/JQueryPractice · GitHub

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
<!DOCTYPE html>
<html>
<head>
<title>Jquery Practice</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style>
.btn{background: #ececec; color: #000; padding: 5px 8px 6px 8px; text-decoration: none; border: solid 1px #ccc;display: inline-block; margin:3px 0; font-size: 11px;}
nav { background-color:#ccc; position:fixed; top:0; width:100%; left:0; padding:3px;}
</style>
</head>
<body>
<nav class="menu">
    <a class="btn" style="float:right;" href="javascript:void(0);" id="finishWork">Close Work</a>
    <a class="btn" style="float:right;" href="javascript:void(0);" onClick="window.location.reload()">Reload</a>

    <a class="btn" href="javascript:void(0);" id="clickBtn">Click</a>
    <a class="btn" href="javascript:void(0);" id="dblClickBtn">Dobule Click</a>
    <a class="btn" href="javascript:void(0);" id="mouseEnterBtn">Mouse Enter</a>
    <a class="btn" href="javascript:void(0);" id="hoverBtn">Hover</a>
    <a class="btn" href="javascript:void(0);" id="onBtn">On</a>
    <a class="btn" href="javascript:void(0);" id="onEventBtn">On Event</a>
    <a class="btn" href="javascript:void(0);" id="keyPress">Key Press</a>

</nav>

<br/><br/>
<section>
	<div class="keyPress" style="display:none;">
        <input type="text" />
        <p class="count">Count : <span>0</span></p>
    </div>
    <p class="test">$(document).ready(function(){}</p>
</section>

<br/><br/><br/>
<br/><br/><br/>

<script>
	$(document).ready(function(){
    	$('#clickBtn').click( function(){
        	alert('Hi!!! this click Event');
        });
		$('#dblClickBtn').dblclick(function(){
			alert('Hey! This is your Dobule Click on this button');
		});
		$('#mouseEnterBtn').mouseenter(function(){
			$('a[id="mouseEnterBtn"]').css('background-color','yellow');
		});
		$('#hoverBtn').hover(function(){
			$('a[id="hoverBtn"]').css('background-color','yellow');
			},
			function(){
				$('a[id="hoverBtn"]').css('background-color','#ececec');
		});
		$('#keyPress').click(function(){
			var keyPressCount = 0;
			$('.keyPress').show(400).keypress(function(){
				$('.keyPress input').css('background','yellow');
				$('.count span').text(keyPressCount += 1);
				$('.keyPress input').keydown(function(){
					$('.keyPress input').css('background','red');
				});
				$('.keyPress input').keyup(function(){
					$('.keyPress input').css('background','green');
				})
			});
		});
		$('#onBtn').on('click', function(){
			alert('you are click on btn');
		});
		$('.test').on({
			mouseleave : function(){
				$(this).css('background-color', 'yellow');
			},
			mouseenter : function(){
				$(this).css('background-color', 'red');
			},
			click : function(){
				$(this).css('background-color', 'green');
			}
		});


    });
</script>
</body>
</html>