Jquery Toturial
-
Upload
khairul-filhan -
Category
Education
-
view
74 -
download
1
Transcript of Jquery Toturial
![Page 1: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/1.jpg)
![Page 2: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/2.jpg)
points & badges
How does this work?
flight time
video lessons
challenges
3:00
![Page 3: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/3.jpg)
points & badges
![Page 4: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/4.jpg)
In order to learn jQuery you need to know:
☑☑
HTML
CSS
JavaScript
content
style
behavior
![Page 5: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/5.jpg)
1level
![Page 6: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/6.jpg)
What is jQuery?
![Page 7: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/7.jpg)
What you can do with jQuery
1.1 What is jQuery?reveal interface elements
![Page 8: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/8.jpg)
What you can do with jQuery
1.1 What is jQuery?change content based on user actions
![Page 9: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/9.jpg)
What you can do with jQuery
1.1 What is jQuery?toggle CSS classes to highlight an element
![Page 10: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/10.jpg)
talk
animate
listen
change
find
jQuery makes it easy to:
1.1 What is jQuery?
elements in an HTML document
HTML content
to what a user does and react accordingly
content on the page
over the network to fetch new content
![Page 11: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/11.jpg)
HTML document
Changing content
How can we modify the text of the <h1> element?
1.1 What is jQuery?
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
find it
change it
![Page 12: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/12.jpg)
HTML document
Finding the proper HTML
How can we search through our html?
We need to understand how our browser
organizes the HTML it receives.
1.1 What is jQuery?
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
find it
![Page 13: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/13.jpg)
Document Object ModelA tree-like structure created by browsers so we can
quickly find HTML Elements using JavaScript.
1.1 What is jQuery?
“DOM”
![Page 14: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/14.jpg)
Loading HTML into the DOM
DOMbrowser
1.1 What is jQuery?
HTML document
100%0% 50%
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
![Page 15: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/15.jpg)
html
head
body
title
h1
p
jQuery Adven...
element textnode types:
The DOM
DOCUMENT
Where do...
Plan your...
Inside the DOM, HTML elements become “nodes” which have relationships with one another.
What does that DOM structure look like?
1.1 What is jQuery?
HTML document
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
![Page 16: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/16.jpg)
html
head
body
title
h1
p
jQuery Adven...
element textnode types:
The DOM
DOCUMENT
Where do...
Plan your...
How do we search through the DOM?
1.1 What is jQuery?
JavaScript
JavaScript gives developers a language to interact with the DOM.
![Page 17: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/17.jpg)
JavaScript
How do we find things using the DOM?
1.1 What is jQuery?
HTML
Web ServerRequests a Webpage
Sends the HTML
HTML
JavaScript
+ other files neededto load that page
DOMLoads into
Interacts with
Web Browser
![Page 18: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/18.jpg)
DOM
DOM
DOM
DOM
DOMJavaScript
each browser has a slightly di!erent DOM interface
Of course, there’s a catch
1.1 What is jQuery?
![Page 19: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/19.jpg)
DOMIf our JavaScript uses jQuery to interact with the DOM then it will work on most modern browsers.
DOM
DOM
DOM
DOM
jQuery to the rescue!
1.1 What is jQuery?
JavaScript
![Page 20: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/20.jpg)
Basic jQuery usage
this is the jQuery function
1.1 What is jQuery?
jQuery(<code>);
JavaScript
![Page 21: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/21.jpg)
How jQuery Accesses The DOM
1.1 What is jQuery?
jQuery(document);
The DOM
But how can we search through the DOM?
JavaScript
![Page 22: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/22.jpg)
h1 { font-size: 3em; }
CSS selectors
p { color: blue; }
1.1 What is jQuery?
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
HTML document
We need to use CSS selectors
![Page 23: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/23.jpg)
Using the jQuery function to find nodes
jQuery("h1");
jQuery("p");
1.1 What is jQuery?
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
HTML document jQuery selectors
$("h1");
$("p");=short & sweet
syntax
![Page 24: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/24.jpg)
Changing the content of an element
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
HTML document
1.1 What is jQuery?
How can we modify the text of the <h1> element?
find it
change it
![Page 25: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/25.jpg)
Selecting by HTML element name
html
head
body
title
h1
p
jQuery Adv...
DOM representation of the document
DOCUMENT
Where do...
Plan your...
1.1 What is jQuery?
<!DOCTYPE html><html><head> <title>jQuery Adventures</title></head><body> <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p></body></html>
HTML document
![Page 26: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/26.jpg)
Selecting by HTML element name
$("h1")
html
head
body
title
h1h1
p
jQuery Adv...
DOM representation of the document
DOCUMENT
Where do...
Plan your...
1.1 What is jQuery?
;
![Page 27: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/27.jpg)
"Where do you want to go"
Fetching an element’s text
1.1 What is jQuery?
html
head
body
title
h1
p
jQuery Adv...
DOM representation of the document
DOCUMENT
Plan your...
Where do...
text() is a method o!ered by jQuery
($("h1").text );
![Page 28: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/28.jpg)
Modifying an element’s text
html
head
body
title
h1
p
jQuery Adv...
DOM representation of the document
DOCUMENT
Where to?
Plan your...
1.1 What is jQuery?
text() also allows to modify the text node
$("h1").text( );"Where to?"
![Page 29: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/29.jpg)
DOM
JavaScript may execute before the DOM loads
HTML
1.1 What is jQuery?
100%0% 50%
$("h1").text( );"Where to?"
We need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery.
h1 wasn’t in the DOM yet!
![Page 30: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/30.jpg)
DOM
“I’m ready!”
Listen for “I’m ready” then run <code>
The DOM ready event
HTML
1.1 What is jQuery?
100%0% 50%
How can we listen for this signal?
![Page 31: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/31.jpg)
DOM
“I’m ready!”
Listening for document ready
1.1 What is jQuery?
jQuery(document).ready(function(){
});
Will only run this code once the DOM is “ready”
<code>
![Page 32: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/32.jpg)
Our completed code
1.1 What is jQuery?
jQuery(document).ready(function(){
});$("h1").text("Where to?");
![Page 33: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/33.jpg)
Using jQuery
![Page 34: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/34.jpg)
Getting started
<script src="jquery.min.js"></script>
<script src="application.js"></script>
1.2 Using jQuery
download jQuery
load it in your HTML document
1
2
start using it3
![Page 35: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/35.jpg)
find them
modify their text
Changing multiple elements at onceHTML document
How do we change the text of every <li> in this page?
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
1.2 Using jQuery
![Page 36: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/36.jpg)
Load HTML into the DOMHTML document
body
h1
h2
Where do...
Plan your...
1.2 Using jQuery
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul> ul
Rome
li
Paris
li
Rio
li
![Page 37: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/37.jpg)
Selecting multiple elements
$("li")
HTML documentbody
h1
li
li
li
h2
Where do...
Plan your...
1.2 Using jQuery
ul
Rome
li
Paris
li
Rio
li;
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
![Page 38: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/38.jpg)
Modifying each of their text nodesHTML document
body
h1
h2
Where do...
Plan your...
1.2 Using jQuery
ul
li
li
li.text("Orlando");$("li")
Rome
Paris
Rio
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
Orlando
Orlando
Orlando
![Page 39: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/39.jpg)
We can find elements by ID or Class
p { ... }
#container { ... }
.articles { ... }
$("p");
$("#container");
$(".articles");
1.2 Using jQuery
CSS jQuery
![Page 40: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/40.jpg)
find it using the ID
Changing multiple elements at onceHTML document
How do we specifically select the <ul>that has a “destinations” ID?
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
1.2 Using jQuery
![Page 41: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/41.jpg)
Selecting by unique ID
$("#destinations");
HTML documentbody
h1
h2
Where do...
Plan your...
1.2 Using jQuery
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul> ul
Rome
li
Paris
li
Rio
li
id="destinations"
class="promo"
ul
![Page 42: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/42.jpg)
find it using the class
Changing multiple elements at onceHTML document
How can we select just the <li> thathas a “promo” class attribute?
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
1.2 Using jQuery
![Page 43: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/43.jpg)
Selecting by Class Name
$(".promo");
HTML documentbody
h1
h2
Where do...
Plan your...
1.2 Using jQuery
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul> ul
Rome
li
Paris
li
Rio
li class="promo"
id="destinations"
li
![Page 44: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/44.jpg)
2level
![Page 45: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/45.jpg)
Searching the DOM
![Page 46: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/46.jpg)
2.1 Searching the DOM
Selecting descendantsHTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
How do we find the <li> elements that are inside of the <ul> with a “destinations” ID?
descendant selector
![Page 47: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/47.jpg)
li
li
li
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations">
<li>Paris</li> <li>Rome</li>
<li class='promo'>Rio</li></ul>
Using the descendant selector
$("#destinations li");
HTML documentbody
h1
h2
Where do...
Plan your...
ul
Rome
li
Paris
li
Rio
li
the space matters
2.1 Searching the DOMparent descendant
![Page 48: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/48.jpg)
<li>Paris</li>
<li>Rome</li>
<li class='promo'>Rio</li>
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations">
<li><ul id="france">
</ul> </li>
</ul>
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations">
HTML document
How do we find only the <li> elements that are children of the “destinations” <ul>?
descendant selector?
2.1 Searching the DOM
Selecting direct childrenHTML document
![Page 49: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/49.jpg)
ul
li
li
Paris
li
li
li
li
li
Selecting direct children
$("#destinations li");
HTML documentbody
ul
Rome
Rio
li
2.1 Searching the DOM
...
we don’t want this
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li> <ul id="france"> <li>Paris</li> </ul> </li> <li class='promo'>Rio</li></ul>
![Page 50: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/50.jpg)
How do we find only the <li> elements that are direct children of the “destinations” <ul> then?
child selector
Selecting only direct childrenHTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li> <ul id="france"> <li>Paris</li> </ul> </li> <li class='promo'>Rio</li></div>
2.1 Searching the DOM
![Page 51: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/51.jpg)
li
li
Paris
ul
li
li
li
li
body
ul
Rome
Rio
li
...
Selecting only direct children
$("#destinations > li");
HTML document
the sign matters
parent child
not selected
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li> <ul id="france"> <li>Paris</li> </ul> </li> <li class='promo'>Rio</li></ul>
![Page 52: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/52.jpg)
How do we find only elementswith either a “promo” class or a “france” ID
multiple selector
Selecting multiple elementsHTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li> <ul id="france"> <li>Paris</li> </ul> </li> <li class='promo'>Rio</li></ul>
2.1 Searching the DOM
![Page 53: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/53.jpg)
ul
lili
ul
Selecting multiple elements
$(".promo, #france");
HTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li> <ul id="france"> <li>Paris</li> </ul> </li> <li class='promo'>Rio</li></ul>
the comma matters
li
li
Paris
li
body
ul
Rome
Rio
...
![Page 54: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/54.jpg)
li
lili
li
body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
li
Rio
$("#destinations li:first");
CSS-like pseudo classes
filter
$("#destinations li:last");
2.1 Searching the DOM
![Page 55: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/55.jpg)
li
li
body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
li
Rio
li
CSS-like pseudo classes
$("#destinations li:odd");
$("#destinations li:even");
#0
#1
#2watch out, the index starts at 0⚠
2.1 Searching the DOM
li
li
![Page 56: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/56.jpg)
Traversing
![Page 57: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/57.jpg)
2.2 Traversing
Walking the DOM by traversing itHTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
Can we find all the <li> elements thatthe “destinations” list contains without using a descendant selector?
filter by traversing
![Page 58: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/58.jpg)
li
li
lili
li
li
Filtering by traversing
$("#destinations li");
$("#destinations").find("li");
It takes a bit more code, but it’s faster.
body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
Rio
2.2 Traversing
selection traversal
![Page 59: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/59.jpg)
lili
Filtering by traversing
$("li:first");
$("li").first();
body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
li
Rio
li
2.2 Traversing
![Page 60: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/60.jpg)
lili
Filtering by traversing
$("li:last");
$("li").last();
body
h1
h2
Where do...
Plan your...
ul
Rome
li
Paris
li
Rio
2.2 Traversing
![Page 61: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/61.jpg)
HTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
Walking the DOM
Can we find the middle list item, knowing there is no filter to find it unlike :first or :last?
traversing
2.2 Traversing
![Page 62: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/62.jpg)
lili
$("li").first(); body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
li
Rio
li
Walking the DOM
2.2 Traversing
![Page 63: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/63.jpg)
lili
$("li").first(); body
h1
h2
Where do...
Plan your...
ul
Rome
li
Paris
Rio
li
$("li").first().next();
Walking the DOM
li
2.2 Traversing
![Page 64: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/64.jpg)
lili
$("li").first(); body
h1
h2
Where do...
Plan your...
ul
Rome
li
Paris
Rio
li
$("li").first().next();
$("li").first().next().prev();
Walking the DOM
li
2.2 Traversing
![Page 65: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/65.jpg)
HTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <li>Paris</li> <li class='promo'>Rio</li></ul>
Walking up the DOM
If we started by selecting a child, can we figureout what element is its direct parent?
traversing up
2.2 Traversing
![Page 66: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/66.jpg)
lili
$("li").first(); body
h1
h2
Where do...
Plan your...
ul
Rome
Paris
li
Rio
li
Walking up the DOM
2.2 Traversing
![Page 67: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/67.jpg)
ul
$("li").first(); body
h1
h2
Where do...
Plan your...
ul
Rome
li
Paris
li
Rio
li
$("li").first().parent();
Walking up the DOM
li
2.2 Traversing
![Page 68: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/68.jpg)
Walking down the DOMHTML document
<h1>Where do you want to go?</h1><h2>Travel Destinations</h2><p>Plan your next adventure.</p><ul id="destinations"> <li>Rome</li> <ul id="france"> <li>Paris</li> </ul> <li class='promo'>Rio</li></ul>
With a parent that has many children who in turn have their own children, how could we find only the first generation of children?
traversing down
2.2 Traversing
![Page 69: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/69.jpg)
Walking the DOM up and down
$("#destinations").children("li");
children(), unlike find(), only selects direct children
ul
li
li
Paris
li
li
li
li
body
ul
Rome
Rio
li
...
id="destinations"
2.2 Traversing
![Page 70: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/70.jpg)
3level
![Page 71: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/71.jpg)
Working with the DOM
![Page 72: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/72.jpg)
3.1 Manipulating the DOM
![Page 73: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/73.jpg)
remove a DOM nodeli
DOM representation of the document
DOCUMENT
Hawaiian Vac...
h2
Get Price
button
p
$399.99
Appending to the DOM
class="vacation"
append a new DOM node1
2
3.1 Manipulating the DOM
![Page 74: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/74.jpg)
application.js
Appending to the DOM
DOCUMENT
h2
Get Price
button
p
$399.99
li
var price = $('<p>From $399.99</p>');
var price = "From $399.99";
var price = "<p>From $399.99</p>";
Creates a node but doesn’t add it to the DOM
Price node (not in the DOM yet)
$(document).ready(function() {// create a <p> node with the price
});
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
![Page 75: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/75.jpg)
DOCUMENT
h2
Get Price
button
li
application.js
.append(<element>)
.after(<element>) .before(<element>)
.prepend(<element>)
Appending to the DOM
ways to add this price node to the DOM
var price = $('<p>From $399.99</p>');$(document).ready(function() {
});
Price node (not in the DOM yet)
p
$399.99
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
![Page 76: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/76.jpg)
DOCUMENT
h2
Get Price
button
li
Beforeapplication.js
$('.vacation').before(price);
$(document).ready(function() {var price = $('<p>From $399.99</p>');
});
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
p
$399.99
Puts the price node before .vacation
![Page 77: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/77.jpg)
li
DOCUMENT
h2
Get Price
button
p
$399.99
Afterapplication.js
$('#vacation').before(price);
Puts the price node after .vacation
$(document).ready(function() {var price = $('<p>From $399.99</p>');
});$('.vacation').after(price);
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
button
![Page 78: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/78.jpg)
var price = $('<p>From $399.99</p>');$('.vacation').prepend(price);
application.js
Adds the node to the top of .vacation
$(document).ready(function() {
});
Prepend
li
DOCUMENT
p
$399.99
h2
Get Price
button
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
![Page 79: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/79.jpg)
application.js
3.1 Manipulating the DOM
Prepend and Append
Puts the price node at the bottom of .vacation
$('.vacation').append(price);
$(document).ready(function() {var price = $('<p>From $399.99</p>');
});
li
DOCUMENT
p
$399.99
class="vacation"
h2
Get Price
button
Hawaiian Vac...
![Page 80: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/80.jpg)
application.js
$(document).ready(function() {
3.1 Manipulating the DOM
Removing from the DOM
Removes the <button> from the DOM
$('button').remove();
var price = $('<p>From $399.99</p>');$('.vacation').append(price);
});
li
DOCUMENT
p
$399.99
class="vacation"
h2
Get Price
button
Hawaiian Vac...
![Page 81: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/81.jpg)
3.1 Manipulating the DOM
![Page 82: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/82.jpg)
DOCUMENT
h2
Get Price
button
li
.appendTo(<element>)
.insertAfter(<element>) .insertBefore(<element>)
.prependTo(<element>)
Appending to the DOM
Price node (not in the DOM yet)
p
$399.99
3.1 Manipulating the DOM
class="vacation"
Hawaiian Vac...
application.js
$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove();});
price.appendTo($('.vacation'));
Appends in the same place
![Page 83: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/83.jpg)
Acting on Interaction
![Page 84: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/84.jpg)
$(document).ready(<event handler function>);
Passing in a function
function() { // executing the function runs the code // between the braces}
The ready method takes an event handler function as argument
We create a function with the function keyword
And we pass this function as an argument to the ready method.
3.2 Acting on Interaction
$(document).ready(function() {// this function runs when the DOM is ready
});
![Page 85: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/85.jpg)
3.2 Acting on Interaction
![Page 86: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/86.jpg)
application.js
Watching for Click
DOCUMENT
Hawaiian Vacation
h2
Get Price
button
li class="vacation"
Target all buttonsWatch for any clicks
Run the code inside of this function
3.2 Acting on Interaction
$('button').on('click', function() {// runs when any button is clicked
});
$(document).ready(function() {// runs when the DOM is ready
});
.on(<event>, <event handler>)
jQuery Object Methods
![Page 87: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/87.jpg)
application.js
Removing from the DOM
DOCUMENT
Hawaiian Vacation
h2
Get Price
button
li
runs when the DOM is ready
runs when a button is clicked
3.2 Acting on Interaction
$(document).ready(function() {$('button').on('click', function() {
});
// run this function on click });
class="vacation"
![Page 88: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/88.jpg)
application.js
Removing from the DOM
3.2 Acting on Interaction
var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove();
$(document).ready(function() {$('button').on('click', function() {
});});
DOCUMENT
Hawaiian Vacation
h2
Get Price
button
p
$399.99
li class="vacation"
![Page 89: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/89.jpg)
Now the price will be shown when we click the button
![Page 90: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/90.jpg)
Refactor using Traversing
![Page 91: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/91.jpg)
What if there are multiple vacation packages?
![Page 92: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/92.jpg)
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price);
application.js
The price will be appended to both .vacation elements
3.3 Refactor Using Traversing
Working, but with Errors
ul
DOCUMENT
li
p
class="vacation"
li
p
class="vacation"
div id="vacations"
Every button will be removed
$('button').remove();});
});
button
buttonbutton
button
![Page 93: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/93.jpg)
$(this).remove();
An Introduction to $(this)application.js
ul
DOCUMENT
li
button
p
li
button
p
div
If clicked, the button will be ‘this’
this.remove();Not a jQuery object, needs to be converted
3.3 Refactor Using Traversing
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price);
$('button').remove();});
});
id="vacations"
class="vacation"
class="vacation"
![Page 94: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/94.jpg)
application.js
An Introduction to $(this)
3.3 Refactor Using Traversing
ul
DOCUMENT
li
button
p
li
button
p
div
Only removes whichever button was clicked
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price);
});});
$(this).remove();
class="vacation"
class="vacation"
id="vacations"
![Page 95: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/95.jpg)
The clicked button will now be removed
![Page 96: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/96.jpg)
application.js
Adds the <p> node after the <button>
Traversing from $(this)
ul
DOCUMENT
Hawaiian Vac...
li
h2
Get Price
button
p
$399.99
class="vacation"
3.3 Refactor Using Traversing
$(this).after(price);
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>');
$(this).remove();});
});
$('.vacation').append(price);
![Page 97: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/97.jpg)
application.js
Traversing from $(this)
3.3 Refactor Using Traversing
Add the price as a sibling after button
ul
DOCUMENT
Hawaiian Vac...
li
h2
Get Price
button
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>');
$(this).remove();});
});
$(this).after(price);class="vacation"
p
$399.99
![Page 98: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/98.jpg)
application.js
What if the button is moved?
ul
DOCUMENT
Hawaiian Vac...
li
h2
Get Price
button
p
$399.99
3.3 Refactor Using Traversing
div
If the button is moved, the price will be moved
How do we keep the price as a child of <li>?
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>');
$(this).remove();});
});
$(this).after(price);class="vacation"
![Page 99: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/99.jpg)
application.js
Using .closest(<selector>)
3.3 Refactor Using Traversing
ul
DOCUMENT
Hawaiian Vac...
li
h2
Get Price
button
div
$(this).after(price);
$(this).parents('.vacation').append(price);
$(this).parent().parent().append(price);
p
$399.99
$(this).closest('.vacation').append(price);
class="vacation"
![Page 100: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/100.jpg)
application.js
$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $(this).remove(); });});
ul
DOCUMENT
Hawaiian Vac...
li
h2
Get Price
button
p
$399.99
Our Finished Handler
Adds the <p> node at the bottom of .vacation
3.3 Refactor Using Traversing
$(this).closest('.vacation').append(price); class="vacation"
![Page 101: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/101.jpg)
The prices will be added at the right place
![Page 102: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/102.jpg)
Traversing and Filtering
![Page 103: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/103.jpg)
How do we allow vacations to have di!erent prices?
![Page 104: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/104.jpg)
<li class="vacation onsale" <h3>Hawaiian Vacation</h3> <button>Get Price</button> <ul class='comments'> <li>Amazing deal!</li> <li>Want to go!</li> </ul></li>
index.html
$('.vacation').first().data('price');
All data attributes begin with ‘data-’
"399.99"
Tackling the HTML
data-price='399.99'>
.data(<name>)
jQuery Object Methods
.data(<name>, <value>)
3.4 Traversing & Filtering
![Page 105: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/105.jpg)
var amount = $(this).closest('.vacation').data('price');
application.js
Reads from the data-price attribute
Joins two strings to create the price
Refactoring ‘Get Price’
$(document).ready(function() { $('button').on('click', function() {
var price = $('<p>From $399.99</p>'); $(this).closest('.vacation').append(price); $(this).remove(); });});
var price = $('<p>From $'+amount+'</p>');
3.4 Traversing & Filtering
![Page 106: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/106.jpg)
application.js
Refactoring ‘Get Price’
$(document).ready(function() { $('button').on('click', function() {
$(this).closest('.vacation').append(price); $(this).remove(); });}); Each vacation can have its own price
var amount = $(this).closest('.vacation').data('price');var price = $('<p>From $'+amount+'</p>');
3.4 Traversing & Filtering
![Page 107: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/107.jpg)
var amount = $(this).closest('.vacation').data('price');
$(this).closest('.vacation').append(price);
application.js
Reusing jQuery Objects
$(document).ready(function() { $('button').on('click', function() {
var vacation = $(this).closest('.vacation');var amount = vacation.data('price');vacation.append(price);
var price = $('<p>From $'+amount+'</p>');
$(this).remove(); });});
3.4 Traversing & Filtering
![Page 108: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/108.jpg)
vacation.append(price);
var amount = vacation.data('price');
application.js
Reusing jQuery Objects
var vacation = $(this).closest('.vacation');
$(document).ready(function() { $('button').on('click', function() {
var price = $('<p>From $'+amount+'</p>');
$(this).remove(); });});
We’ll only query the DOM once for this element
3.4 Traversing & Filtering
![Page 109: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/109.jpg)
Each vacation can have its dynamic own price now
![Page 110: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/110.jpg)
application.js
$('.vacation').on('click', 'button', function() {});
If we add new buttons anywhere, they will trigger this click handler
$('.vacation button').on('click', function() {});
On With a Selector
Only target a ‘button’ if it’s inside a ‘.vacation’
$(document).ready(function() {$('button').on('click', function() {
... });});
3.4 Traversing & Filtering
![Page 111: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/111.jpg)
We’ll implement our new filters next
![Page 112: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/112.jpg)
<div id='filters'> ... <button class='onsale-filter'>On Sale Now</button> <button class='expiring-filter'>Expiring</button> ...</div>
index.html
We’ll highlight vacations with these traits
Filtering HTML
We’ll write 2 event handlers for our buttons
3.4 Traversing & Filtering
![Page 113: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/113.jpg)
application.js
Filtering for Vacations On sale
div
DOCUMENT
button class="onsale-filter"
button class="expiring-filter"
// find all vacations that are on-sale // add a class to these vacations});
$('#filters').on('click', '.onsale-filter',function() { id="filters"
3.4 Traversing & Filtering
![Page 114: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/114.jpg)
Filtering for Vacations On sale
ul
DOCUMENT
li
ul
li
li
li
class="vacation onsale"
class="vacation"
class="vacation"
class="comments"
$('.vacation.onsale')
$('.vacation').filter('.onsale')
Finds elements with a class of .vacation and .onsale
application.js
// find all vacations that are on-sale // add a class to these vacations});
$('#filters').on('click', '.onsale-filter',function() {
lili
3.4 Traversing & Filtering
![Page 115: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/115.jpg)
Class Manipulation
application.js
Filtering for Vacations On sale
$('.vacation').filter('.onsale').addClass('highlighted');
.addClass(<class>) .removeClass(<class>)
$('#filters').on('click', '.onsale-filter',function() {
$('.vacation').filter('.onsale') // add a class to these vacations});
ul
DOCUMENT
li
ul
li
li
li
lili
3.4 Traversing & Filtering
class="vacation onsale"
class="vacation"
class="vacation"
class="comments"
![Page 116: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/116.jpg)
application.js
Filtering for Vacations On sale
Finds only the right vacations Adds a class of ‘highlighted’
The same can be done for our expiring filter
$('#filters').on('click', '.onsale-filter', function() {$('.vacation').filter('.onsale').addClass('highlighted');
});
$('.vacation').filter('.expiring').addClass('highlighted');});
$('#filters').on('click', '.expiring-filter', function() {
3.4 Traversing & Filtering
![Page 117: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/117.jpg)
How do we make sure not all vacations are highlighted?
![Page 118: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/118.jpg)
application.js
Unhighlighting Vacations
$('#filters').on('click', '.onsale-filter', function() {
$('.vacation').filter('.onsale').addClass('highlighted');});
$('.highlighted').removeClass('highlighted');
Remove the highlighted class before adding it back
3.4 Traversing & Filtering
![Page 119: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/119.jpg)
We clear the highlighted class on click, only highlighting the targeted vacations
![Page 120: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/120.jpg)
4level
![Page 121: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/121.jpg)
On DOM Load
![Page 122: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/122.jpg)
4.1 On DOM Load
![Page 123: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/123.jpg)
.ticket { display: none;}
index.html
Hide ticket on page load
Adding Ticket Confirmation
find the ticket
show the ticket
watch for click
Clicking this button...
...will show the ticket
<li class="confirmation"> ... <button>FLIGHT DETAILS</button> <ul class="ticket">...</ul></li>
4.1 On DOM Load
![Page 124: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/124.jpg)
application.js
$('.confirmation').on('click', 'button', function() { });
Using slideDown to Show Elementsindex.html jQuery Object Methods
.slideDown()
.slideUp()
.slideToggle()
$(this).closest('.confirmation').find('.ticket').slideDown();
<li class="confirmation"> ...
<ul class="ticket">...</ul></li>
<button>FLIGHT DETAILS</button>
4.1 On DOM Load
Searches up through ancestors Searches down through children
![Page 125: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/125.jpg)
Why doesn’t the button work?
![Page 126: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/126.jpg)
alert('Hello');
Alert and Length
4.1 On DOM Load
$('li').length;
3
To query how many nodes are on a page.
![Page 127: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/127.jpg)
$('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown();});
application.js
alert($('button').length);
The alert dialog
Debugging with Alert
4.1 On DOM Load
![Page 128: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/128.jpg)
application.js
$(document).ready(function() {
});
The button is found after the DOM has loaded
We Forgot $(document).ready() already
alert($('button').length); $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });
4.1 On DOM Load
![Page 129: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/129.jpg)
Now that the DOM has loaded, jQuery can find our button
![Page 130: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/130.jpg)
Expanding on on()
![Page 131: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/131.jpg)
What if we also want to show the ticket when theyhover over the <h3> tag?
![Page 132: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/132.jpg)
application.js
$(document).ready(function() { $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });
});What event should we watch for?
Deciding on an Event
$('.confirmation').on('?', 'h3', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });
Fires when the mouse is first positioned over the element
click
Mouse Events
dblclick
focusin
focusout
mouseover
mouseup mouseout mouseleave
mousemove mouseentermousedown
4.2 Expanding on on()
![Page 133: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/133.jpg)
application.js
$(document).ready(function() { $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); }); $('.confirmation').on( , 'h3', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });});
Mouse Events
Show the ticket when the mouse is positioned over the h3
'mouseenter'
4.2 Expanding on on()
![Page 134: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/134.jpg)
We have two ways of showing the ticket now
![Page 135: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/135.jpg)
application.js
$(document).ready(function() { $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); }); $('.confirmation').on('mouseenter', 'h3', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });});
Extract out and name our event handler
Refactoring Handler Functions
This code is duplicated, how can we refactor this?
showTicket () {function $(this).closest('.confirmation').find('.ticket').slideDown();}
4.2 Expanding on on()
![Page 136: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/136.jpg)
application.js
$(document).ready(function() { $('.confirmation').on('click', 'button', showTicket); $('.confirmation').on('mouseenter', 'h3', showTicket);});
Don’t add () at the end - that would execute the function immediately
Refactoring Handler Functions
showTicket () {function $(this).closest('.confirmation').find('.ticket').slideDown();}
4.2 Expanding on on()
![Page 137: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/137.jpg)
Now the exact same code is run for both events
![Page 138: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/138.jpg)
Keyboard Events
![Page 139: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/139.jpg)
Changing this “Tickets” input field should recalculate the total
![Page 140: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/140.jpg)
<div class="vacation" data-price='399.99'> <h3>Hawaiian Vacation</h3> <p>$399.99 per ticket</p> <p> Tickets: <input type='number' class='quantity' value='1' /> </p></div><p>Total Price: $<span id='total'>399.99</span></p>
index.html
...we’ll update the calculated price here
When this updates...
Trip Planner Page
4.3 Keyboard Events
![Page 141: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/141.jpg)
Keyboard Events Form Events
$(document).ready(function() { $('.vacation').on('?', '.quantity', function() { });});
application.js
http://api.jquery.com/category/events/keyboard-events/
http://api.jquery.com/category/events/form-events/
Which event should we use?
keydown
keypress
keyup
blur change
focus
select
submit
Keyboard and Form Events
4.3 Keyboard Events
![Page 142: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/142.jpg)
$(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() {
});});
application.js
Writing our Event HandlerDOCUMENT
li .vacation
span
p
input
#total
var price = $(this).closest('.vacation').data('price');
Returns price as a string
Use + to convert the string to a number
// Get the price for this vacation
.quantity
p
'399.99'
399.99
// Get the quantity entered// Set the total to price * quantity
4.3 Keyboard Events
var price = +$(this).closest('.vacation').data('price');
![Page 143: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/143.jpg)
application.js
Getting the Quantity of TicketsDOCUMENT
li .vacation
span
p
input .quantity
p
#total
jQuery Object Methods
.val()
.val(<new value>)
Sets quantity to a number
var quantity = this.val(); Errors - not a jQuery object
var quantity = $(this).val(); Sets quantity to a string
var price = +$(this).closest('.vacation').data('price');
$(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() {
});});
// Get the quantity entered// Set the total to price * quantity
var quantity = +$(this).val();2
'2'
![Page 144: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/144.jpg)
application.js
Setting the Total PriceDOCUMENT
li .vacation
span
p
input .quantity
p
#total
You can pass a number or a string to the .text() method
$('#total').text(price * quantity);
4.3 Keyboard Events
$(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() {
});});
// Set the total to price * quantity
var price = +$(this).closest('.vacation').data('price');var quantity = +$(this).val();
![Page 145: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/145.jpg)
application.js
The Completed Event HandlerDOCUMENT
li .vacation
span
p
input .quantity
p
#totalWhenever the quantity is changed, the total will be updated
4.3 Keyboard Events
$(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() {
});});
var price = +$(this).closest('.vacation').data('price');var quantity = +$(this).val();$('#total').text(price * quantity);
![Page 146: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/146.jpg)
The total changes immediately as we wanted
![Page 147: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/147.jpg)
Link Layover
![Page 148: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/148.jpg)
Clicking Show Comments will cause them to fade in
![Page 149: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/149.jpg)
Clicking this link...
Preparing for Flight
ul
DOCUMENT
Show Comments
li
a
li
ul
li
...will show the comments
.vacation
.expand
.comments
.comments { display: none;}
application.css
application.js
We need to write the event handler
// Find the comments ul// Show the comments ul
$(document).ready(function() { $('.vacation').on('click', '.expand', function() {
});});
4.4 Link Layover
![Page 150: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/150.jpg)
Preparing for Flight
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
Find the .comments ul using traversing
$(this).closest('.vacation').find('.comments')
application.js
// Find the comments ul// Show the comments ul
$(document).ready(function() { $('.vacation').on('click', '.expand', function() {
});});
4.4 Link Layover
![Page 151: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/151.jpg)
jQuery Object Methods
Preparing for Flight
.fadeToggle().fadeIn() .fadeOut()
These are similar to the slide methods
$(document).ready(function() { $('.vacation').on('click', '.expand', function() {
$(this).closest('.vacation').find('.comments')
// Show the comments ul });});
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
application.js
4.4 Link Layover
![Page 152: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/152.jpg)
$(document).ready(function() { $('.vacation').on('click', '.expand', function() { $(this).closest('.vacation') .find('.comments')
});});
ul
DOCUMENT
Show Comments
li
a
li
ul
li
fadeIn() .comments on first click,fadeOut() .comments on next click.
Handling the Click
.vacation
.expand
.comments
4.4 Link Layover
application.js
.fadeToggle();
![Page 153: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/153.jpg)
Why does the page jump to the top?
![Page 154: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/154.jpg)
<a href='#' class='expand'>Show Comments</a>
index.html
How the Browser Handles the Click
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
The click event will “bubble up” to each parent node
4.4 Link Layover
Follows the link!(goes to the top of the page)
![Page 155: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/155.jpg)
});
The Event Object
Add the event parameter
application.js DOM TREE
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { $(this).closest('.vacation')
.find('.comments')
.fadeToggle();});
4.4 Link Layover
![Page 156: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/156.jpg)
event.stopPropagation()
DOM TREE
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
The browser will still handle the click event but will prevent it from “bubbling up” to each parent node.
$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { event.stopPropagation(); $(this).closest('.vacation')
.find('.comments')
.fadeToggle();
});});
4.4 Link Layover
application.js
![Page 157: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/157.jpg)
$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { $(this).closest('.vacation') .find('.comments') .fadeToggle(); } );});
The click event will “bubble up” but the browser won’t handle it
event.preventDefault()
DOM TREE
ul
DOCUMENT
Show Comments
li
a
li
ul
li
.vacation
.expand
.comments
event.preventDefault();
4.4 Link Layover
application.js
![Page 158: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/158.jpg)
We’re preventing the default action of the browser now.
![Page 159: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/159.jpg)
5level
![Page 160: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/160.jpg)
Taming CSS
![Page 161: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/161.jpg)
HTML
CSS
JavaScript
content
style
behavior
Separation of Concerns
5.1 Taming CSS
To style something based on user interaction, which would we use?
![Page 162: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/162.jpg)
5.1 Taming CSS
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
...and allow people to click on the <li> element
Changing our Style
p .price
Let’s make all .vacation elements clickable...
![Page 163: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/163.jpg)
5.1 Taming CSS
application.js
Changing the Style
$(this).css('background-color', '#252b30') .css('border-color', '1px solid #967');
$(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'});
Passing in a JavaScript Object as an argument is a common jQuery pattern
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p
jQuery Object Methods
.css(<attr>, <value>)
.css(<attr>)
.css(<object>)
.price
$(this).css('background-color', '#252b30'); $(this).css('border-color', '1px solid #967'); });});
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() {
![Page 164: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/164.jpg)
5.1 Taming CSS
Showing the Price
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p
application.js
jQuery Object Methods
.show()
.hide()
$(this).find('.price').css('display', 'block');
.price
$(this).find('.price').show();
Same as CSS syntax, but easier to read and understand
});});
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() {
$(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'});
![Page 165: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/165.jpg)
5.1 Taming CSS
Showing the Price
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p
application.js
.price
Highlights the Vacation Package and shows the price
});});
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() {
$(this).find('.price').show();
$(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'});
![Page 166: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/166.jpg)
Our .vacation elements are highlighted when we click on them
![Page 167: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/167.jpg)
5.1 Taming CSS
Moving Styles to External CSS
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p
application.js
});});
.price
Can we move these to a CSS stylesheet?application.css
border-color: 1px solid #967;}.highlighted .price { display: block;}
$(this).css({'background-color': '#563', 'border-color': '1px solid #967'}); $(this).find('.price').show();
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() {
#563;.highlighted { background-color:
$(this).addClass('highlighted');
![Page 168: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/168.jpg)
5.1 Taming CSS
Moving Styles to External CSSapplication.js
});});
It’s now much easier to manipulate with external CSS styles
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() {
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .priceapplication.css
border-color: 1px solid #967;}.highlighted .price { display: block;}
#563;.highlighted { background-color:
$(this).addClass('highlighted');
![Page 169: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/169.jpg)
5.1 Taming CSS
Moving Styles to External CSS
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p
application.js
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).addClass('highlighted'); });});
.priceWe can only show price, but how would we hide price?
$(this).toggleClass('highlighted');jQuery Object Methods
.toggleClass()
.addClass(<class>)
.removeClass(<class>)
Adds the class if $(this) doesn’t have it, removes it if $(this) already has it
![Page 170: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/170.jpg)
Our refactored page still works, and will be much easier to maintain
![Page 171: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/171.jpg)
Challenges
5.1 Taming CSS
![Page 172: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/172.jpg)
Animation
![Page 173: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/173.jpg)
What can we do to add a bit more movement to this?
![Page 174: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/174.jpg)
Takes in a JavaScript object similar to the .css() method
Adding Movement
jQuery Object Methods
.animate(<object>)
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
$(this).css({'top': '-10px'});
The box will jump up 10 px
$(this).animate({'top': '-10px'});
5.2 Animation
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); });});
![Page 175: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/175.jpg)
Adding Movement
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
Will adjust a CSS property pixel by pixel in order to animate it
5.2 Animation
$(this).animate({'top': '-10px'});
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
});});
![Page 176: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/176.jpg)
Our animation can slide up but not slide down
![Page 177: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/177.jpg)
Moving Back Down
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
How do we set ‘top’ to ‘0px’ if a second click occurs?
“If statements” allow your code to make decisions at runtime
5.2 Animation
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
});});
$(this).animate({'top': '-10px'});
} else {// animate the vacation up
}// animate the vacation back down
if(<vacation has the class highlighted>) {
![Page 178: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/178.jpg)
Moving Back Down
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
jQuery Object Methods
.hasClass(<class>)$(this).hasClass('highlighted')
Returns true or false
5.2 Animation
true;
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
});});
$(this).animate({'top': '-10px'});
$(this).animate({'top': '0px'});} else {
}
if(<vacation has the class highlighted>) {
![Page 179: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/179.jpg)
Moving Back Downapplication.js
Our vacation package will move up and down
5.2 Animation
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
$(this).hasClass('highlighted')
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
});});
$(this).animate({'top': '-10px'});
$(this).animate({'top': '0px'});} else {
}
if( ) {
![Page 180: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/180.jpg)
Could we speed this up a little? Our customers don’t have all day.
![Page 181: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/181.jpg)
Changing the Speed
$(this).animate({'top': '-10px'});
$(this).animate({'top': '-10px'}, 400);
We can optionally pass in the speed as a second argument to animate()
$(this).animate({'top': '-10px'}, 'fast');
$(this).animate({'top': '-10px'}, 200);
$(this).animate({'top': '-10px'}, 'slow');
$(this).animate({'top': '-10px'}, 600);
E!ects methods like animate(), slideToggle() and fadeToggle() can also be given a specific speed as a String or in milliseconds
5.2 Animation
![Page 182: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/182.jpg)
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if($(this).hasClass('highlighted')) { } else { } });});
Moving Back Down
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
And with this we now have specific speeds for our animation
5.2 Animation
$(this).animate({'top': '-10px'}, 'fast');
$(this).animate({'top': '0px'}, 'fast');
![Page 183: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/183.jpg)
Our jQuery animation is now using a ‘fast’ speed
![Page 184: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/184.jpg)
The Next Step with CSS Animations
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
application.js
if($(this).hasClass('highlighted')) { $(this).animate({'top': '-10px'}, 'fast'); } else { $(this).animate({'top': '0px'}, 'fast'); }
5.2 Animation
Isn’t this still styling? Shouldn’t it be inside of a stylesheet?
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
});});
![Page 185: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/185.jpg)
Animation Durationapplication.js
5.2 Animation
transition: top 0.2s;}.highlighted { top: -10px;}
Will only work with browsers that implement CSS transitions
.vacation {
application.css
});});
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted');
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
![Page 186: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/186.jpg)
Working with Modern Browsers
5.2 Animation
application.css
-moz-transition: top 0.2s; -o-transition: top 0.2s; -webkit-transition: top 0.2s;
Unlike jQuery, with CSS we have to account for specific browsers
.vacation {
application.js
$(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); });});
ul
DOM representation
DOCUMENT
li .vacation
div #vacations
p .price
transition: top 0.2s;}.highlighted { top: -10px;}
![Page 187: Jquery Toturial](https://reader037.fdocuments.in/reader037/viewer/2022103019/55c37131bb61ebae498b4604/html5/thumbnails/187.jpg)
CSS Animations are a huge topic, but worth looking into