JQueryPractice/demo5.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
<!DOCTYPE html>
<html>
<head>
<title>Jquery Practice</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<button id="fJw" style="float:right;">Finish for today</button>
<h1 class="txtChng" id="textChange">Jquery Practice </h1>
<small class="sml" style="font-size:15px;">Want change all text color</small>
<h3 id="h3">Click Me for hide with function</h3>
<h4 onclick="$(this).hide('5000');">Click Me for hide with onclick</h4>
<h5 class="chngColor">Click me for change color</h5>

<div id="jq_box" style="border:solid 1px #000; width:250px; min-height:50px;">
	<p>
    	When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):
    </p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
</div>
<br/>
<button id="rbc">Remove Box Content</button>
<button id="rb">Remove Box</button>
<button onclick="bgChange();">Give Some Color</button>
<button id="btnHide">Hide Button</button>


<script>
$('document').ready(function(){
	$('#fJw').click(function(){
		$('*').remove();
	});
	$('#textChange').click(function(){
		$(this).text('Here Is new jequery');
	});
	$('.sml').click(function(){
		$('*').css('color', 'red');
	});
	$('#h3').click(function(){
		$(this).hide('slow');
	});
	$('.chngColor').click(function(){
		$(this).css('color', 'red');
	});
	$('#rbc').click(function(){
		$('#jq_box').empty();
	});
	$('#rb').click(function(){
		$('#jq_box').remove();
	});
	$('#btnHide').click(function(){
		$(':button').not('#fJw').hide('8000');
	});
});
function bgChange(){
	$('#jq_box').css({
		'background-color' : 'red',
		'color' : 'yellow'
	});
}
</script>
</body>
</html>