Skip to content

Commit 5f0eed4

Browse files
hannabeasiamhannabeasiam
authored
Merge pull request #1 from hannabeasiam/lesson12
lesson12 jquery added
2 parents c09b1f7 + 5de9622 commit 5f0eed4

12 files changed

+204
-0
lines changed

‎lesson12/css/images/ui-icons_444444_256x240.png‎

6.84 KB
Loading

‎lesson12/css/images/ui-icons_555555_256x240.png‎

6.91 KB
Loading

‎lesson12/css/images/ui-icons_777620_256x240.png‎

4.57 KB
Loading

‎lesson12/css/images/ui-icons_777777_256x240.png‎

6.85 KB
Loading

‎lesson12/css/images/ui-icons_cc0000_256x240.png‎

4.52 KB
Loading

‎lesson12/css/images/ui-icons_ffffff_256x240.png‎

6.17 KB
Loading

‎lesson12/css/jquery-ui.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lesson12/jQuery.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery</title>
6+
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
7+
<script type="text/javascript">
8+
//ready = load will execute when page is loaded
9+
jQuery(document).ready(function() { //open anonymous function
10+
jQuery('strong').css('color','orange');
11+
$('p span').css('color','red');
12+
//on function add event and event handler
13+
$('#mainhead').on('click',function(){
14+
//this: what was previousely selected, add class 'Setselector when #mainhead clicked
15+
$(this).addClass('setselector');
16+
});
17+
//support animation too.
18+
$('section').hide();
19+
$('section').fadeIn(3000); //number of mili sec as parameter
20+
});
21+
</script>
22+
<style>
23+
.setselector {
24+
background-color: red;
25+
color: yellow;
26+
font-size: 2.5em;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<h2>CIW JavaScript Specialist</h2>
32+
<h3 id="mainhead">jQuery</h3>
33+
<p>This is some text. jQuery requires specifying a <strong>CSS</strong><span> selector</span>.</p>
34+
<section>
35+
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind
36+
texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A
37+
small river named Duden
38+
</section>
39+
</body>
40+
</html>

‎lesson12/jQueryAutocomplete.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI</title>
6+
<link href="css/jquery-ui.min.css" rel="stylesheet">
7+
<style>
8+
#dialog-link {
9+
padding: .4em 1em .4em 20px;
10+
text-decoration: none;
11+
position: relative;
12+
}
13+
#dialog-link span.ui-icon {
14+
margin: 0 5px 0 0;
15+
position: absolute;
16+
left: .2em;
17+
top: 50%;
18+
margin-top: -8px;
19+
}
20+
#icons span.ui-icon {
21+
float: left;
22+
margin: 0 4px;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<h1>jQuery UI</h1>
28+
<h2>Autocomplete</h2>
29+
<div>
30+
<input id="autocomplete" title="type &quot;a&quot;">
31+
</div>
32+
<h2>Dialog</h2>
33+
<p>
34+
<a href="#"><span></span>Info</a>
35+
</p>
36+
<div id="dialog" title="Do you need information?">
37+
<p>Press "Yes" to get information, "No"/X/Escape to close the dialog.</p>
38+
</div>
39+
<h2>Menu</h2>
40+
<ul style="width:100px;" id="menu">
41+
<li>Meat</li>
42+
<li>Vegetable</li>
43+
<li>Fruit
44+
<ul>
45+
<li>Strawberry</li>
46+
<li>Orange</li>
47+
<li>Apple</li>
48+
<li>Banana</li>
49+
<li>Peach</li>
50+
</ul>
51+
</li>
52+
<li>Dairy</li>
53+
<li>Breads</li>
54+
</ul>
55+
<h2>Tooltip</h2>
56+
<p>
57+
<span title="First Tooltip">Hover over me</span>
58+
to see the a tooltip and <span title="Second Tooltip">also over me</span>.
59+
</p>
60+
<h2>Highlight/Error</h2>
61+
<p>
62+
<strong></strong>This is highlighed!
63+
</p>
64+
<p>
65+
<strong></strong>This is disabled!
66+
</p>
67+
<p>
68+
<b></b> This is an error!
69+
</p>
70+
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
71+
<script src="js/jquery-ui.min.js"></script>
72+
<script type="text/javascript">
73+
$(document).ready(function() {
74+
var availableTags = [
75+
"ActionScript",
76+
"AppleScript",
77+
"Asp",
78+
"BASIC",
79+
"C",
80+
"C++",
81+
"Clojure",
82+
"COBOL",
83+
"ColdFusion",
84+
"Erlang",
85+
"Fortran",
86+
"Groovy",
87+
"Haskell",
88+
"Java",
89+
"JavaScript",
90+
"Lisp",
91+
"Perl",
92+
"PHP",
93+
"Python",
94+
"Ruby",
95+
"Scala",
96+
"Scheme"
97+
];
98+
$('#autocomplete').autocomplete({
99+
source: availableTags
100+
});
101+
});
102+
</script>
103+
</body>
104+
</html>

‎lesson12/jQueryTraversal.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery Traversal</title>
6+
<!--add jquery library as external js file-->
7+
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
8+
<script type="text/javascript">
9+
//add ready object under document
10+
$(document).ready(function() {
11+
//on the button object add onclick event
12+
$('button').on('click',function() {
13+
//each function is simple version of for loop in jquery
14+
$('li').each(function(){
15+
//this refer li elements, find 'Vegitables'
16+
//html funciton without argument returns: current html value
17+
if ($(this).html() == 'Vegetables') {
18+
//use html function with passing argument then change current value to passed argument
19+
$(this).html('Dairy');
20+
}
21+
});
22+
});
23+
});
24+
</script>
25+
</head>
26+
<body>
27+
<h2>CIW JavaScript Specialist</h2>
28+
<h3>jQuery Traversal</h3>
29+
<ul>
30+
<li>Meat</li>
31+
<li>Fruit</li>
32+
<li>Vegetables</li>
33+
</ul>
34+
<p><button id="change">Change</button></p>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)