Scribd
Upload
274 views

Codeschool Try Jquery

The document provides an introduction to jQuery and how it can be used to modify HTML content. It discusses how jQuery allows JavaScript to interact with the Document Object Model (DOM) in a cross-browser compatible way. It demonstrates how jQuery can be used to select elements, modify their content, and respond to user actions. Key points covered include loading jQuery, selecting elements by tag name, ID, and class, and changing element content with methods like text().

Uploaded by

Diana Alejandra Bonilla
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
274 views

Codeschool Try Jquery

The document provides an introduction to jQuery and how it can be used to modify HTML content. It discusses how jQuery allows JavaScript to interact with the Document Object Model (DOM) in a cross-browser compatible way. It demonstrates how jQuery can be used to select elements, modify their content, and respond to user actions. Key points covered include loading jQuery, selecting elements by tag name, ID, and class, and changing element content with methods like text().

Uploaded by

Diana Alejandra Bonilla
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 187

How does this work?

ight time video lessons challenges points & badges 3:00

points & badges

In order to learn jQuery you need to know:

! HTML content ! CSS style


JavaScript
behavior

level

What is jQuery?

What you can do with jQuery

reveal interface elements

1.1 What is jQuery?

What you can do with jQuery

change content based on user actions

1.1 What is jQuery?

What you can do with jQuery

toggle CSS classes to highlight an element

1.1 What is jQuery?

jQuery makes it easy to:


nd change listen animate talk

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

1.1 What is jQuery?

Changing content
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>

How can we modify the text of the <h1> element?


nd it change it

1.1 What is jQuery?

Finding the proper HTML


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>

nd it

How can we search through our html?

We need to understand how our browser organizes the HTML it receives.

1.1 What is jQuery?

Document Object Model


A tree-like structure created by browsers so we can quickly nd HTML Elements using JavaScript.

DOM
1.1 What is jQuery?

Loading HTML into the DOM


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>

browser
0% 50% 100%

DOM

1.1 What is jQuery?

What does that DOM structure look like?


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>

The DOM DOCUMENT html head title jQuery Adven... body h1 Where do... p Plan your...

Inside the DOM, HTML elements become nodes which have relationships with one another.
node types:

element

text

1.1 What is jQuery?

How do we search through the DOM?


The DOM DOCUMENT html head title jQuery Adven... body h1 Where do... p Plan your...

JavaScript

JavaScript gives developers a language to interact with the DOM.

node types:

element

text

1.1 What is jQuery?

How do we nd things using the DOM?


Web Server

Requests a Webpage

Web Browser

Loads into Sends the HTML


HTML

DOM

+ other les needed to load that page

HTML

a r e t In
JavaScript

s t c

th i w

JavaScript

1.1 What is jQuery?

Of course, theres a catch DOM DOM DOM


JavaScript

each browser has a slightly different DOM interface

DOM DOM

1.1 What is jQuery?

jQuery to the rescue! DOM DOM DOM


JavaScript

DOM DOM

If our JavaScript uses jQuery to interact with the DOM then it will work on most modern browsers.

1.1 What is jQuery?

Basic jQuery usage


this is the jQuery function

jQuery(<code>);
JavaScript

1.1 What is jQuery?

How jQuery Accesses The DOM


The DOM

jQuery(document);
JavaScript

But how can we search through the DOM?

1.1 What is jQuery?

We need to use CSS selectors


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>

CSS selectors h1 { font-size: 3em; } p { color: blue; }

1.1 What is jQuery?

Using the jQuery function to nd nodes


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>

jQuery selectors

jQuery("h1"); jQuery("p");

$("h1"); $("p");
short & sweet syntax

1.1 What is jQuery?

Changing the content of an element


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>

How can we modify the text of the <h1> element?


nd it change it

1.1 What is jQuery?

Selecting by HTML element name


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>

DOM representation of the document DOCUMENT html head title jQuery Adv... body h1 Where do... p Plan your...

1.1 What is jQuery?

Selecting by HTML element name

DOM representation of the document DOCUMENT html

$("h1") ;

head title jQuery Adv... body h1 Where do... p Plan your...

1.1 What is jQuery?

Fetching an elements text


text() is a method offered by jQuery

DOM representation of the document DOCUMENT html

$("h1").text();
"Where do you want to go"

head title jQuery Adv... body h1 Where do... p Plan your...

1.1 What is jQuery?

Modifying an elements text


text() also allows to modify the text node

DOM representation of the document DOCUMENT html

$("h1").text( "Where to?");

head title jQuery Adv... body h1 Where to? p Plan your...

1.1 What is jQuery?

JavaScript may execute before the DOM loads

HTML

0%

50%

100%

DOM

h1 wasnt in the DOM yet!

$("h1").text( "Where to?");

We need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery.

1.1 What is jQuery?

The DOM ready event

HTML

0%

50%

100%

DOM
Im ready!

How can we listen for this signal?


Listen for Im ready then run <code>

1.1 What is jQuery?

Listening for document ready


jQuery(document).ready(function(){ <code> }) ;

DOM
Im ready!

Will only run this code once the DOM is ready

1.1 What is jQuery?

Our completed code


jQuery(document).ready(function(){ $("h1").text("Where to?"); }) ;

1.1 What is jQuery?

Using jQuery

Getting started
1 2
download jQuery load it in your HTML document
<script src="jquery.min.js"></script>

start using it
<script src="application.js"></script>

1.2 Using jQuery

Changing multiple elements at once


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>

How do we change the text of every <li> in this page? nd them modify their text

1.2 Using jQuery

Load HTML into the DOM


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>

body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

1.2 Using jQuery

Selecting multiple elements


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>

body h1 Where do... h2 Plan your... ul li Rome li Paris

$("li") ;

li Rio

1.2 Using jQuery

Modifying each of their text nodes


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>

body h1 Where do... h2 Plan your... ul li Rome Orlando li Paris Orlando

$("li").text("Orlando");

li Orlando Rio

1.2 Using jQuery

We can nd elements by ID or Class


CSS
p { ... } #container { ... } .articles { ... }

jQuery
$("p"); $("#container"); $(".articles");

1.2 Using jQuery

Changing multiple elements at once


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>

How do we specically select the <ul> that has a destinations ID? nd it using the ID

1.2 Using jQuery

Selecting by unique ID
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>

body h1 Where do... h2 Plan your... ul id="destinations" li Rome li Paris

$("#destinations");

li

class="promo" Rio

1.2 Using jQuery

Changing multiple elements at once


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>

How can we select just the <li> that has a promo class attribute? nd it using the class

1.2 Using jQuery

Selecting by Class Name


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>

body h1 Where do... h2 Plan your... ul id="destinations" li Rome li Paris

$(".promo");

li

class="promo" Rio

1.2 Using jQuery

level

Searching the DOM

Selecting descendants
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>

How do we nd the <li> elements that are inside of the <ul> with a destinations ID?
descendant selector

2.1 Searching the DOM

Using the descendant selector


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>

body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

the space matters


$("#destinations li");

parent

descendant

2.1 Searching the DOM

Selecting direct children


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>

How do we nd only the <li> elements that are children of the destinations <ul>?
descendant selector?

2.1 Searching the DOM

Selecting direct children


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>

body ... ul li Rome li ul li li Rio Paris

we dont want this

$("#destinations li");

2.1 Searching the DOM

Selecting only direct children


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> </div>

How do we nd only the <li> elements that are direct children of the destinations <ul> then?
child selector

2.1 Searching the DOM

Selecting only direct children


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>

body ... ul li Rome li ul li li Rio Paris

not selected

the sign matters


$("#destinations > li");

parent

child

Selecting multiple elements


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>

How do we nd only elements with either a promo class or a france ID


multiple selector

2.1 Searching the DOM

Selecting multiple elements


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>

body ... ul li Rome li ul li li Rio Paris

the comma matters


$(".promo, #france");

CSS-like pseudo classes


$("#destinations li:first"); $("#destinations li:last");
body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

lter

2.1 Searching the DOM

CSS-like pseudo classes


$("#destinations li:odd"); $("#destinations li:even");
h2 Plan your... ul li Rome body h1 Where do...

#0 #1 #2

li Paris

watch out, the index starts at 0

li Rio

2.1 Searching the DOM

Traversing

Walking the DOM by traversing it


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>

Can we nd all the <li> elements that the destinations list contains without using a descendant selector?
lter by traversing

2.2 Traversing

Filtering by traversing
$("#destinations li");
body h1 Where do...

$("#destinations").find("li");

h2 Plan your... ul li Rome li Paris

selection

traversal

It takes a bit more code, but its faster.

li Rio

2.2 Traversing

Filtering by traversing
$("li:first");
body h1 Where do...

$("li").first();

h2 Plan your... ul li Rome li Paris li Rio

2.2 Traversing

Filtering by traversing
$("li:last");
body h1 Where do...

$("li").last();

h2 Plan your... ul li Rome li Paris li Rio

2.2 Traversing

Walking the DOM


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>

Can we nd the middle list item, knowing there is no lter to nd it unlike :rst or :last?
traversing

2.2 Traversing

Walking the DOM


$("li").first();
body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

2.2 Traversing

Walking the DOM


$("li").first();
body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

$("li").first().next();

2.2 Traversing

Walking the DOM


$("li").first();
body h1 Where do... h2 Plan your...

$("li").first().next();

$("li").first().next().prev();

ul li Rome li Paris li Rio

2.2 Traversing

Walking up the DOM


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>

If we started by selecting a child, can we gure out what element is its direct parent?
traversing up

2.2 Traversing

Walking up the DOM


$("li").first();
body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

2.2 Traversing

Walking up the DOM


$("li").first();
body h1 Where do... h2 Plan your... ul li Rome li Paris li Rio

$("li").first().parent();

2.2 Traversing

Walking down the DOM


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> <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 nd only the rst generation of children?
traversing down

2.2 Traversing

Walking the DOM up and down


$("#destinations").children("li");
body ... ul id="destinations" li Rome li ul li li Rio Paris

children(), unlike nd(), only selects direct children

2.2 Traversing

level

Working with the DOM

3.1 Manipulating the DOM

Appending to the DOM


1 2
append a new DOM node remove a DOM node

DOM representation of the document DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

3.1 Manipulating the DOM

Appending to the DOM


application.js

$(document).ready(function() { // create a <p> node with the price });

DOCUMENT li class="vacation" h2 Hawaiian Vac... button

var price = "From $399.99"; var price = "<p>From $399.99</p>"; var price = $('<p>From $399.99</p>'); Creates a node but doesnt add it to the DOM

Get Price Price node (not in the DOM yet) p $399.99

3.1 Manipulating the DOM

Appending to the DOM


application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); }); ways to add this price node to the DOM

DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price

.append(<element>) .after(<element>)

.prepend(<element>)
Price node (not in the DOM yet)

.before(<element>)

p $399.99

3.1 Manipulating the DOM

Before
application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').before(price); });

DOCUMENT p $399.99 li class="vacation" h2 Hawaiian Vac... button Get Price

Puts the price node before .vacation

3.1 Manipulating the DOM

After
application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('#vacation').before(price); $('.vacation').after(price); });

DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

Puts the price node after .vacation

3.1 Manipulating the DOM

Prepend
application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').prepend(price); });

DOCUMENT li p $399.99 h2 Hawaiian Vac... button Get Price class="vacation"

Adds the node to the top of .vacation

3.1 Manipulating the DOM

Prepend and Append


application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); });

DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

Puts the price node at the bottom of .vacation

3.1 Manipulating the DOM

Removing from the DOM


application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove(); }); Removes the <button> from the DOM

DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

3.1 Manipulating the DOM

3.1 Manipulating the DOM

Appending to the DOM


application.js

$(document).ready(function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove(); }); Appends in the same place
.appendTo(<element>) .insertAfter(<element>) .prependTo(<element>) .insertBefore(<element>)

DOCUMENT li class="vacation" h2 Hawaiian Vac... button Get Price Price node (not in the DOM yet) p $399.99

price.appendTo($('.vacation'));

3.1 Manipulating the DOM

Acting on Interaction

Passing in a function
$(document).ready(<event handler function>); The ready method takes an event handler function as argument function() { // executing the function runs the code // between the braces } We create a function with the function keyword $(document).ready(function() { // this function runs when the DOM is ready }); And we pass this function as an argument to the ready method.

3.2 Acting on Interaction

3.2 Acting on Interaction

Watching for Click


application.js DOCUMENT li class="vacation" h2 Hawaiian Vacation

$(document).ready(function() { // runs when the DOM is ready }); Target all buttons

Watch for any clicks

button Get Price

$('button').on('click', function() { // runs when any button is clicked }); Run the code inside of this function

jQuery Object Methods


.on(<event>, <event handler>)

3.2 Acting on Interaction

Removing from the DOM


application.js

runs when the DOM is ready

DOCUMENT li class="vacation" h2 Hawaiian Vacation button Get Price

$(document).ready(function() { $('button').on('click', function() { // run this function on click }); }); runs when a button is clicked

3.2 Acting on Interaction

Removing from the DOM


application.js DOCUMENT li class="vacation" h2 Hawaiian Vacation button Get Price p $399.99

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove(); }); });

3.2 Acting on Interaction

Now the price will be shown when we click the button

Refactor using Traversing

What if there are multiple vacation packages?

Working, but with Errors


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove(); }); }); Every button will be removed The price will be appended to both .vacation elements

DOCUMENT div ul li class="vacation" button p li class="vacation" button p id="vacations"

3.3 Refactor Using Traversing

An Introduction to $(this)
application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $('button').remove(); }); If clicked, the button will be this }); this.remove();
Not a jQuery object, needs to be converted

DOCUMENT div ul li class="vacation" button p li class="vacation" button p id="vacations"

$(this).remove();

3.3 Refactor Using Traversing

An Introduction to $(this)
application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $(this).remove(); }); }); Only removes whichever button was clicked

DOCUMENT div ul li class="vacation" button p li class="vacation" button p id="vacations"

3.3 Refactor Using Traversing

The clicked button will now be removed

Traversing from $(this)


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $('.vacation').append(price); $(this).remove(); }); }); $(this).after(price);
Adds the <p> node after the <button>

DOCUMENT ul li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

3.3 Refactor Using Traversing

Traversing from $(this)


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $(this).after(price); $(this).remove(); }); }); Add the price as a sibling after button

DOCUMENT ul li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

3.3 Refactor Using Traversing

What if the button is moved?


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $(this).after(price); $(this).remove(); }); }); If the button is moved, the price will be moved How do we keep the price as a child of <li>?

DOCUMENT ul li class="vacation" h2 Hawaiian Vac... div button Get Price p $399.99

3.3 Refactor Using Traversing

Using .closest(<selector>)
application.js

$(this).after(price); $(this).parent().parent().append(price); $(this).parents('.vacation').append(price); $(this).closest('.vacation').append(price);

DOCUMENT ul li class="vacation" h2 Hawaiian Vac... div button Get Price p $399.99

3.3 Refactor Using Traversing

Our Finished Handler


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $(this).closest('.vacation').append(price); $(this).remove(); }); });

DOCUMENT ul li class="vacation" h2 Hawaiian Vac... button Get Price p $399.99

Adds the <p> node at the bottom of .vacation

3.3 Refactor Using Traversing

The prices will be added at the right place

Traversing and Filtering

How do we allow vacations to have different prices?

Tackling the HTML


index.html

<li class="vacation onsale" data-price='399.99'> <h3>Hawaiian Vacation</h3> <button>Get Price</button> <ul class='comments'> <li>Amazing deal!</li> <li>Want to go!</li> </ul> All data attributes begin with data- </li>

$('.vacation').first().data('price'); "399.99"

jQuery Object Methods


.data(<name>) .data(<name>, <value>)

3.4 Traversing & Filtering

Refactoring Get Price


application.js

$(document).ready(function() { $('button').on('click', function() { var price = $('<p>From $399.99</p>'); $(this).closest('.vacation').append(price); $(this).remove(); }); });

Reads from the data-price attribute


var amount = $(this).closest('.vacation').data('price'); var price = $('<p>From $'+amount+'</p>');

Joins two strings to create the price

3.4 Traversing & Filtering

Refactoring Get Price


application.js

$(document).ready(function() { $('button').on('click', function() { var amount = $(this).closest('.vacation').data('price'); var price = $('<p>From $'+amount+'</p>'); $(this).closest('.vacation').append(price); $(this).remove(); }); }); Each vacation can have its own price

3.4 Traversing & Filtering

Reusing jQuery Objects


application.js

$(document).ready(function() { $('button').on('click', function() { var amount = $(this).closest('.vacation').data('price'); var price = $('<p>From $'+amount+'</p>'); $(this).closest('.vacation').append(price); $(this).remove(); }); });

var vacation = $(this).closest('.vacation'); var amount = vacation.data('price'); vacation.append(price);

3.4 Traversing & Filtering

Reusing jQuery Objects


application.js

$(document).ready(function() { $('button').on('click', function() { var vacation = $(this).closest('.vacation'); var amount = vacation.data('price'); var price = $('<p>From $'+amount+'</p>'); vacation.append(price); $(this).remove(); }); });

Well only query the DOM once for this element

3.4 Traversing & Filtering

Each vacation can have its dynamic own price now

On With a Selector
application.js

$(document).ready(function() { $('button').on('click', function() { ... }); });

If we add new buttons anywhere, they will trigger this click handler

$('.vacation button').on('click', function() {}); $('.vacation').on('click', 'button', function() {}); Only target a button if its inside a .vacation

3.4 Traversing & Filtering

Well implement our new lters next

Filtering HTML
index.html

<div id='filters'> ... <button class='onsale-filter'>On Sale Now</button> <button class='expiring-filter'>Expiring</button> ... </div>

Well write 2 event handlers for our buttons Well highlight vacations with these traits

3.4 Traversing & Filtering

Filtering for Vacations On sale


application.js DOCUMENT div
id="filters" class="onsale-filter"

$('#filters').on('click', '.onsale-filter', function() { // find all vacations that are on-sale // add a class to these vacations });

button

button class="expiring-filter"

3.4 Traversing & Filtering

Filtering for Vacations On sale


application.js DOCUMENT ul li class="vacation onsale" ul
class="comments"

$('#filters').on('click', '.onsale-filter', function() { // find all vacations that are on-sale // add a class to these vacations });

li li

$('.vacation.onsale')

li li

class="vacation" class="vacation"

$('.vacation').filter('.onsale')

Finds elements with a class of .vacation and .onsale

3.4 Traversing & Filtering

Filtering for Vacations On sale


application.js DOCUMENT ul li class="vacation onsale" ul
class="comments"

$('#filters').on('click', '.onsale-filter', function() { $('.vacation').filter('.onsale') // add a class to these vacations });

li li

Class Manipulation
.addClass(<class>) .removeClass(<class>)
li li

class="vacation" class="vacation"

$('.vacation').filter('.onsale').addClass('highlighted');

3.4 Traversing & Filtering

Filtering for Vacations On sale


application.js

$('#filters').on('click', '.onsale-filter', function() { $('.vacation').filter('.onsale').addClass('highlighted'); });

Finds only the right vacations

Adds a class of highlighted

The same can be done for our expiring lter


$('#filters').on('click', '.expiring-filter', function() { $('.vacation').filter('.expiring').addClass('highlighted'); });

3.4 Traversing & Filtering

How do we make sure not all vacations are highlighted?

Unhighlighting Vacations
application.js

$('#filters').on('click', '.onsale-filter', function() { $('.highlighted').removeClass('highlighted'); $('.vacation').filter('.onsale').addClass('highlighted'); });

Remove the highlighted class before adding it back

3.4 Traversing & Filtering

We clear the highlighted class on click, only highlighting the targeted vacations

level

On DOM Load

4.1 On DOM Load

Adding Ticket Conrmation


index.html

<li class="confirmation"> Clicking this button... ... <button>FLIGHT DETAILS</button> <ul class="ticket">...</ul> </li> ...will show the ticket

.ticket { display: none; } Hide ticket on page load

watch for click nd the ticket show the ticket

4.1 On DOM Load

Using slideDown to Show Elements


index.html

jQuery Object Methods


.slideDown() .slideUp() .slideToggle()

<li class="confirmation"> ... <button>FLIGHT DETAILS</button> <ul class="ticket">...</ul> </li>

application.js

$('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); }); Searches up through ancestors Searches down through children

4.1 On DOM Load

Why doesnt the button work?

Alert and Length


alert('Hello');

$('li').length;

To query how many nodes are on a page.

4.1 On DOM Load

Debugging with Alert


application.js

alert($('button').length); $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); });

The alert dialog

4.1 On DOM Load

We Forgot $(document).ready() already


application.js

$(document).ready(function() { alert($('button').length); $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); }); });

The button is found after the DOM has loaded

4.1 On DOM Load

Now that the DOM has loaded, jQuery can nd our button

Expanding on on()

What if we also want to show the ticket when they hover over the <h3> tag?

Deciding on an Event
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(); }); What event should we watch for? });

Mouse Events
click dblclick

Fires when the mouse is rst positioned over the element


focusin focusout mousedown mouseup mousemove mouseout mouseover mouseleave mouseenter

4.2 Expanding on on()

Mouse Events
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(); }); Show the ticket when the mouse }); is positioned over the h3

4.2 Expanding on on()

We have two ways of showing the ticket now

Refactoring Handler Functions


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(); }); This code is duplicated, how can we refactor this? });

Extract out and name our event handler


function showTicket () { $(this).closest('.confirmation').find('.ticket').slideDown(); }

4.2 Expanding on on()

Refactoring Handler Functions


application.js

function showTicket () { $(this).closest('.confirmation').find('.ticket').slideDown(); } $(document).ready(function() { $('.confirmation').on('click', 'button', showTicket); $('.confirmation').on('mouseenter', 'h3', showTicket); });

Dont add () at the end - that would execute the function immediately

4.2 Expanding on on()

Now the exact same code is run for both events

Keyboard Events

Changing this Tickets input eld should recalculate the total

Trip Planner Page


index.html

<div class="vacation" data-price='399.99'> <h3>Hawaiian Vacation</h3> <p>$399.99 per ticket</p> <p> When this updates... Tickets: <input type='number' class='quantity' value='1' /> </p> </div> <p>Total Price: $<span id='total'>399.99</span></p> ...well update the calculated price here

4.3 Keyboard Events

Keyboard and Form Events


application.js

$(document).ready(function() { $('.vacation').on('?', '.quantity', function() { }); Which event should we use? });

Keyboard Events
keypress keydown keyup

Form Events
blur focus select submit change

http://api.jquery.com/category/events/keyboard-events/ http://api.jquery.com/category/events/form-events/

4.3 Keyboard Events

Writing our Event Handler


application.js $(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() { // Get the price for this vacation // Get the quantity entered // Set the total to price * quantity }); }); var price = $(this).closest('.vacation').data('price'); '399.99' DOCUMENT li p input .quantity p span #total
.vacation

Returns price as a string


var price = +$(this).closest('.vacation').data('price'); 399.99

Use + to convert the string to a number

4.3 Keyboard Events

Getting the Quantity of Tickets


application.js $(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() { var price = +$(this).closest('.vacation').data('price'); // Get the quantity entered // Set the total to price * quantity }); }); var quantity = this.val(); var quantity = $(this).val(); '2' var quantity = +$(this).val(); 2 DOCUMENT li p input .quantity p span #total
.vacation

Errors - not a jQuery object Sets quantity to a string

jQuery Object Methods


.val(<new value>)

Sets quantity to a number

.val()

Setting the Total Price


application.js $(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() { var price = +$(this).closest('.vacation').data('price'); var quantity = +$(this).val(); // Set the total to price * quantity }); }); $('#total').text(price * quantity); DOCUMENT li p input .quantity p span #total
.vacation

You can pass a number or a string to the .text() method

4.3 Keyboard Events

The Completed Event Handler


application.js $(document).ready(function() { $('.vacation').on('keyup', '.quantity', function() { var price = +$(this).closest('.vacation').data('price'); var quantity = +$(this).val(); $('#total').text(price * quantity); }); }); DOCUMENT li p input .quantity p span #total
.vacation

Whenever the quantity is changed, the total will be updated

4.3 Keyboard Events

The total changes immediately as we wanted

Link Layover

Clicking Show Comments will cause them to fade in

Preparing for Flight


application.css .comments { display: none; } DOCUMENT ul li application.js $(document).ready(function() { $('.vacation').on('click', '.expand', function() { // Find the comments ul // Show the comments ul }); });

Clicking this link...


.vacation

.expand

Show Comments ul
.comments

li li

We need to write the event handler

...will show the comments

4.4 Link Layover

Preparing for Flight


application.js $(document).ready(function() { $('.vacation').on('click', '.expand', function() { // Find the comments ul // Show the comments ul }); }); DOCUMENT ul li
.vacation

.expand

Show Comments $(this).closest('.vacation').find('.comments') ul


.comments

Find the .comments ul using traversing

li li

4.4 Link Layover

Preparing for Flight


application.js $(document).ready(function() { $('.vacation').on('click', '.expand', function() { $(this).closest('.vacation') .find('.comments') // Show the comments ul }); }); DOCUMENT ul li
.vacation

.expand

Show Comments ul
.comments

jQuery Object Methods


.fadeIn() .fadeOut() .fadeToggle()

li li

These are similar to the slide methods

4.4 Link Layover

Handling the Click


application.js $(document).ready(function() { $('.vacation').on('click', '.expand', function() { $(this).closest('.vacation') .find('.comments') .fadeToggle(); }); }); DOCUMENT ul li
.vacation

.expand

Show Comments ul
.comments

fadeIn() .comments on rst click, fadeOut() .comments on next click.

li li

4.4 Link Layover

Why does the page jump to the top?

How the Browser Handles the Click


index.html DOCUMENT ul li
.vacation

<a href='#' class='expand'>Show Comments</a>

Follows the link! (goes to the top of the page)

The click event will bubble up to each parent node

.expand

Show Comments ul
.comments

li li

4.4 Link Layover

The Event Object


application.js DOCUMENT ul li
.vacation

DOM TREE

$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { $(this).closest('.vacation') .find('.comments') .fadeToggle(); }); });

.expand

Show Comments ul
.comments

li

Add the event parameter

li

4.4 Link Layover

event.stopPropagation()
application.js DOCUMENT ul li
.vacation

DOM TREE

$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { event.stopPropagation(); $(this).closest('.vacation') .find('.comments') .fadeToggle(); }); });

.expand

Show Comments ul
.comments

li li

The browser will still handle the click event but will prevent it from bubbling up to each parent node.

4.4 Link Layover

event.preventDefault()
application.js DOCUMENT ul li
.vacation

DOM TREE

$(document).ready(function() { $('.vacation').on('click', '.expand', function(event) { event.preventDefault(); $(this).closest('.vacation') .find('.comments') .fadeToggle(); } ); });

.expand

Show Comments ul
.comments

li li

The click event will bubble up but the browser wont handle it

4.4 Link Layover

Were preventing the default action of the browser now.

level

Taming CSS

Separation of Concerns

HTML content CSS


style

To style something based on user interaction, which would we use?

JavaScript
behavior

5.1 Taming CSS

Changing our Style

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

...and allow people to click on the <li> element

Lets make all .vacation elements clickable...

5.1 Taming CSS

Changing the Style


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).css('background-color', '#252b30'); $(this).css('border-color', '1px solid #967'); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price $(this).css('background-color', '#252b30') .css('border-color', '1px solid #967'); $(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'});

jQuery Object Methods


.css(<attr>, <value>) .css(<attr>) .css(<object>)

Passing in a JavaScript Object as an argument is a common jQuery pattern

5.1 Taming CSS

Showing the Price


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'}); }); }); $(this).find('.price').css('display', 'block');

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

jQuery Object Methods


$(this).find('.price').show(); .show() .hide()

Same as CSS syntax, but easier to read and understand

5.1 Taming CSS

Showing the Price


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).css({'background-color': '#252b30', 'border-color': '1px solid #967'}); $(this).find('.price').show(); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Highlights the Vacation Package and shows the price

5.1 Taming CSS

Our .vacation elements are highlighted when we click on them

Moving Styles to External CSS


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).css({'background-color': '#563', 'border-color': '1px solid #967'}); $(this).find('.price').show(); }); }); application.css

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Can we move these to a CSS stylesheet?


$(this).addClass('highlighted');

.highlighted { background-color: #563; border-color: 1px solid #967; } .highlighted .price { display: block; }

5.1 Taming CSS

Moving Styles to External CSS


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).addClass('highlighted'); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

Its now much easier to manipulate with external CSS styles


application.css
.highlighted { background-color: #563; border-color: 1px solid #967; } .highlighted .price { display: block; }

p .price

5.1 Taming CSS

Moving Styles to External CSS


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).addClass('highlighted'); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

We can only show price, but how would we hide price? $(this).toggleClass('highlighted'); Adds the class if $(this) doesnt have it, removes it if $(this) already has it

p .price

jQuery Object Methods


.toggleClass() .addClass(<class>) .removeClass(<class>)

5.1 Taming CSS

Our refactored page still works, and will be much easier to maintain

Challenges
5.1 Taming CSS

Animation

What can we do to add a bit more movement to this?

Adding Movement
application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

$(this).css({'top': '-10px'});

p .price

The box will jump up 10 px


$(this).animate({'top': '-10px'});

jQuery Object Methods


.animate(<object>)

Takes in a JavaScript object similar to the .css() method

5.2 Animation

Adding Movement
application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); $(this).animate({'top': '-10px'}); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

Will adjust a CSS property pixel by pixel in order to animate it

p .price

5.2 Animation

Our animation can slide up but not slide down

Moving Back Down


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); $(this).animate({'top': '-10px'}); }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

How do we set top to 0px if a second click occurs?


if(<vacation has the class highlighted>) { // animate the vacation up } else { // animate the vacation back down }

p .price

If statements allow your code to make decisions at runtime

5.2 Animation

Moving Back Down


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if(<vacation has the class highlighted>) { $(this).animate({'top': '-10px'}); } else { $(this).animate({'top': '0px'}); } }); }); $(this).hasClass('highlighted'); true

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

jQuery Object Methods


.hasClass(<class>)

Returns true or false

5.2 Animation

Moving Back Down


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if( $(this).hasClass('highlighted') ) { $(this).animate({'top': '-10px'}); } else { $(this).animate({'top': '0px'}); } }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Our vacation package will move up and down

5.2 Animation

Could we speed this up a little? Our customers dont have all day.

Changing the Speed


$(this).animate({'top': '-10px'}); $(this).animate({'top': '-10px'}, 400); $(this).animate({'top': '-10px'}, 'fast'); $(this).animate({'top': '-10px'}, 200); $(this).animate({'top': '-10px'}, 'slow'); $(this).animate({'top': '-10px'}, 600);

We can optionally pass in the speed as a second argument to animate()

Effects methods like animate(), slideToggle() and fadeToggle() can also be given a specic speed as a String or in milliseconds

5.2 Animation

Moving Back Down


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if($(this).hasClass('highlighted')) { $(this).animate({'top': '-10px'}, 'fast'); } else { $(this).animate({'top': '0px'}, 'fast'); } }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

And with this we now have specic speeds for our animation

5.2 Animation

Our jQuery animation is now using a fast speed

The Next Step with CSS Animations


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if($(this).hasClass('highlighted')) { $(this).animate({'top': '-10px'}, 'fast'); } else { $(this).animate({'top': '0px'}, 'fast'); } }); });

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Isnt this still styling? Shouldnt it be inside of a stylesheet?

5.2 Animation

Animation Duration
application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); }); }); application.css .vacation { transition: top 0.2s; } .highlighted { top: -10px; }

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Will only work with browsers that implement CSS transitions

5.2 Animation

Working with Modern Browsers


application.js $(document).ready(function() { $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); }); }); application.css .vacation { -moz-transition: top 0.2s; -o-transition: top 0.2s; -webkit-transition: top 0.2s; transition: top 0.2s; } .highlighted { top: -10px; }

DOM representation DOCUMENT div


#vacations

ul li
.vacation

p .price

Unlike jQuery, with CSS we have to account for specic browsers

5.2 Animation

CSS Animations are a huge topic, but worth looking into

You might also like