-
Notifications
You must be signed in to change notification settings - Fork 1
/
7-changingelements.html
61 lines (53 loc) · 1.32 KB
/
7-changingelements.html
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
<html>
<head>
<title>changing elements demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
.example1, .example2, .example3 {
width: 100%;
margin-bottom: 40px;
}
img {
width: 60px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h3>Example 1</h3>
<div class="example1">
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</div>
<h3>Example 2</h3>
<div class="example2">
<div style="width: 500px">pizza</div>
</div>
<h3>Example 3</h3>
<div class="example3">
<div style="background-color:orange;"></div>
</div>
<script>
/* global $ */
// Example one: disappear boxes on mouseover
$( ".example1 div" ).mouseover(function() {
$( this ).hide();
});
// Example two: change text inside box on click
$( ".example2 div" ).click(function() {
$( this ).html( "soda" );
});
// Example three: prepend on click
$( ".example3 div" ).click(function() {
$( this ).prepend( "<img src='http://icons.iconarchive.com/icons/sonya/swarm/128/Pizza-icon.png'>" );
});
</script>
</body>
</html>