Jquery Air Slides

jQuery Air
- FIRST FLIGHT -
Fuel Up
- Foundations for jQuery -
Back in 1995
JavaScript is Born
VBScript Mocha LiveScript JAVAscript
LEVEL 1
Foundations for jQuery
Ja ascript Today v
Explosive Growth
LEVEL 1
Why jQuery?
An Abstraction Layer
Use jQuery because... ...its easy! ...browsers suck! ...users have old browsers!
LEVEL 1
JQUERY IS NOT PERFECT

Right Tool for the Job
You still need JavaScript jQuery is heavy & slow! Build now, perfect later.
LEVEL 1
Just Enough Ja ascript v

- THE BASICS -
Creating V ariables
Giving Names to Data
var message = Hello, World!;
var keyword Name for the variable, normally in snake_case Data or function on the right side Line ends in semicolon
LEVEL 1
VARIABLES AND DATA

JavaScript Types are Dynamic
var alpha = 42;
var bravo = Fifty Two;
var charlie = 5.2;
var delta = true;
LEVEL 1
JS Global FUNCTIONS
Alert
alert(Hello, World!);
Pop up a message box with the Parameter Text and an OK button
LEVEL 1
JS Global FUNCTIONS
Con rm
var answer = confirm(Start Engines?);
Confirmation dialog with the message, returns true or false
LEVEL 1
JS Global FUNCTIONS
Prompt
var count = prompt(Passenger Count:);
Take in data from the user, returns the v alue they enter as a String
LEVEL 1
Object Functions
Use Dot Notation and Parentheses
First Flight; Flight.toLowerCase();
first flight
First Flight.toLowerCase;
function toLowerCase() {[native code]}
LEVEL 1
A Few String Functions

Hello, World!.toLowerCase(); Hello, World!.toUpperCase(); Hello, World!.charAt(7); Hello!.replace(!,World!); Hello, World!.split(, ); hello, world! HELLO, WORLD! W HelloWorld! [Hello,World!]
LEVEL 1
Number-related Operations
16 + 26; 16 / 2; parseInt(42 people); 42.toString(); 42 8 42 42
LEVEL 1
ARRAYS
Ordered Sets of Data
var x = [zero,one,two]; x[2]; x.length; x.reverse();
Create an array in v ariable X

two
Returns postion 2 Returns array length Returns reversed list
3 [two,one,zero]
LEVEL 1
https://developer.mozilla.org/en/JavaScript/Reference/
T ake OFF
- WRITING YOUR FIRST JQUERY -
http://jquery.com
Fastest
Human Readable
http://docs.jquery.com/Downloading_jQuery
MINIFIED Ja ascript v
Better Performance, Sacri cing Readability
function sum(input_1, input_2) { return input_1 + input_2; } sum(16, 32);
75 Characters
function s(i,j){return i+j;} s(16,32);
38 Characters
LEVEL 2
Writing Your First jQuery
LOADING JQUERY
Local File System
<script type="text/javascript" src="jquery.js"></script>
LEVEL 2
LOADING JQUERY
Googles Content Delivery Network
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>
LEVEL 2
LOADING JQUERY
During This Tutorial
Use the evaluator window Weve already loaded jQuery Your code will run in a safe sandbox
LEVEL 2
KICK THE TIRES

Is jQuery Loaded?
jQuery;
jQuery is not loaded!

ReferenceError: jQuery is not defined
jQuery;
Ready to go!
function (j,s){return new b.fn.init(j,s)}
$;
Still jQuery!
function (j,s){return new b.fn.init(j,s)}
LEVEL 2
Take Off
Part 1: Elementary Selectors
The DOM
Document Object Model
<html> <head> <title>jQuery First Flight</title> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>
LEVEL 2
The DOM
Document Object Model
html head title body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing... jQuery First Flight
LEVEL 2
jQuery Selection
JQUERY
$(h1);
Element Name
DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
jQuery Selection
JQUERY
$(p);
Element Name
DOM
LEVEL 2
jQuery Selection
JQUERY
$(p.plan);
Element + . + class Name
DOM
LEVEL 2
jQuery Selection
JQUERY
$(p#final);
Element + # + ID Name
DOM
LEVEL 2
Take Off
Part 2: Selection Results
Selection Results
JQUERY
$(p);
DOM
p.plan p#final Before you can takeoff... Then, before landing...
Ja ascript Results v
[<p class=plan>Before you can takeoff...</p>, <p class=final>Then, before landing...</p>]
LEVEL 2
Non-match Results
JQUERY
$(h2);
DOM
There were no H2s in the DOM
[]
Watch out, Im truthy

LEVEL 2
Selection Results
JQUERY
$(h1, p.plan);
This wont work!

$(h1,p.plan);
DOM
h1 p#final Welcome to jQuery Air Then, before landing...
[<h1>Welcome to jQuery Air</h1>, <p class=final>Then, before landing...</p>]
LEVEL 2
Understanding Whitespace
JQUERY
$(p#final);
This matches paragraphs with ID final
DOM
document body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
Understanding Whitespace
JQUERY
$(p #final);
This matches any element with class final within a paragraph
DOM
document body h1 p.plan p#final
No Match in this Dom

Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
The Art of Selecting

$(#final); $(.errors);
Dont use anonymous Class/ID Selectors
$(p#final); $(h3.errors); $(h3.errors, p.errors);
Do use Class/ID with ELEMENT TYPES Even with Multiple Elements
LEVEL 2
Take Off
Part 3: Pseudo-Classes and Direct Descendants
PSEUDO-Classes
JQUERY
$(p:first);
This is not the same!

$(p.first);
DOM
body p.plan p#final Before you can takeoff... Then, before landing...
[<p class=plan>Before you can takeoff</p>]
LEVEL 2
Direct Descendants
JQUERY
$(body span);
Any span within body
DOM
body p.plan Before you can takeoff... span.highlight p span WARNING
Then, before landing... seatbelt
LEVEL 2
Direct Descendants
JQUERY
$(body > span);
Only spans directly under body
DOM
body p.plan
No Matches
Before you can takeoff... span.highlight p span WARNING
LEVEL 2
Direct Descendants
JQUERY
$(p.plan > span);
Only spans directly under Plan
DOM
body p.plan Before you can takeoff... span span.highlight p span WARNING
LEVEL 2
View from 30,000 Feet

- MANIPULATING STYLE -
Querying CSS
$(p).css; $(p).css(); $(p).css(font-size);
function(a,c){if(arguments... TypeError: Cannot call method 16px
LEVEL 3
VIEW FROM 30,000 FEET
SETTING CSS Explicitly

JQUERY
$(p).css(font-size); $(p).css(font-size,24px);
16px [<p>...
Rendered DOM Welcome to jQuery Air!

p.plan p#final Before you can takeoff... Before you can takeoff... Then, before landing... Then, before landing...
LEVEL 3
SETTING CSS Relatively

JQUERY
var original = $(p).css(font-size); $(p).css(font-size, original + 8 );
16px [<p>...
No actual change!
Rendered DOM
Doesnt work because of string
Welcome to jQuery Air!

p.plan p#final Before you can takeoff... Before you can takeoff... Then, before landing... Then, before landing...
LEVEL 3
SETTING CSS Relatively

JQUERY
var original = parseInt($(p).css(font-size)); $(p).css(font-size, original + 8 + px);
16 16px [<p>...
Rendered DOM
Works!
Welcome to jQuery Air!

p.plan p#final
Before you can takeoff... Then, before landing...

LEVEL 3
Setting Multiple Attributes

Using Method Chaining
$(p).css(font-size,24px). css(font-weight,bold). css(line-height,32px);
Using a Map
$(p).css({font-size:24px, font-weight:bold, line-height:32px});
LEVEL 3
Ja ascript Maps v
Just Enough JavaScript
{ font-size:24px, font-weight:bold, line-height:32px }
Wrapped in {} Pairs are one key and one value Key and value separated by : Pairs separated by ,
LEVEL 3
Wait, Wait, w ait!

HTML
content presentation
CSS
JavaScript
interaction
LEVEL 3
The CSS Interface

DOM and CSS communicate via IDs and Classes Use .css() with reservation Manipulate IDs and Classes More reliable and maintainable
LEVEL 3
Querying CSS Class

JQUERY
$(p:first).hasClass(plan);
true

p:first Before you can takeoff... Then, before landing...
LEVEL 3
ADDING A CSS Class

JQUERY
$(p:first).addClass(bigger);
[<p class="plan bigger"> Before you can takeoff...</p>]

p:first Before you can takeoff... Before you can takeoff... Then, before landing...
LEVEL 3
REMOVING A CSS Class

JQUERY
$(p:first).removeClass(bigger);
[<p class="plan"> Before you can takeoff...</p>]

LEVEL 3
REMOVING All CSS Classes

JQUERY
$(p:first).removeClass();
[<p class=""> Before you can takeoff...</p>]

LEVEL 3
Toggling a Class
JQUERY
$(p:first).toggleClass(bigger);
[<p class="plan bigger"> Before class="plan"> Before you you can takeoff...</p>] can takeoff...</p>]

LEVEL 3
Visibility
JQUERY
$(p:first).hide();
[<p style=display:none> Before you can takeoff...</p>]
$(p:first).show();
[<p style=display:normal> Before you can takeoff...</p>]

p:first Before you can takeoff... Then, before landing...
LEVEL 3
Visibility
JQUERY
$(p:first) .toggle();
Switche
s betwee
n show a
nd hide
[<p>style=display:none> [<p Before you can takeoff...</p>]takeoff...</p>] Before you can

p:first Then, before landing...
LEVEL 3
Timing Matters
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(p:first).hide(); </script> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>
No Paragraphs Found! JS already executed!
LEVEL 3
Timing Matters
<html> <html> <head> <head> <title>jQuery First Flight</title> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(document).ready(function(){ $(p:first).hide(); $(p:first).hide(); </script> }); </head> </script> <body> </head> <h1>Welcome to jQuery Air!</h1> <p <body>class=plan> Before you jQuery Air!</h1> <h1>Welcome tocan takeoff... </p> style=display:none> <p class=plan> <p id=final> takeoff... Before you can Before Landing </p> </p> <p id=final> </body> Before Landing </html> </p> </body> </html>
Waiting for the DOM...
DOM is Ready: re the JavaScript!

LEVEL 3
CONTENTS MA SHIFT Y
- MANIPULATING CONTENT -
WHY (NOT) Manipulate the DoM

Dividing Responsibilities
HTML
content
presentation
CSS
JavaScript
interaction
LEVEL 4
CONTENTS MAY SHIFT
Flight manifest
Our Sample HTML
body h1 p#time
DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
Manifest for Flight #1337

Time: 10:36AM Gate 26
BROWSER
LEVEL 4
CONTENTS MAY SHIFT
Retrieving Text Content

Querying with .text()
body h1 p#time
DOM
Manifest for Flight #1337 span.label span.label 10:36AM p.gate Gate 26 Time:
JQUERY
$(p#time span.label).text(); Time:
LEVEL 4
CONTENTS MAY SHIFT
Setting Text Content

BROWSER
LEVEL 4
CONTENTS MAY SHIFT
Setting Text Content

Departs At: 10:36AM Gate 26
BROWSER
p#time
span.label 10:36AM
Departs At: Time:
DOM
$(p#time span.label) .text(Departs At:); [<span class="label">Departs At:</span>]
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Text is just text

p#time span.label 10:36AM Departs At:
DOM
$(p#time).text(); Departs At: 10:36AM
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Text() With HTML

p#time <b>Departs At:</b> 10:36AM
DOM
$(p#time).text(<b>Departs At:</b> 10:36AM); [<p id="time"><b>Departs At: </b> 10:36AM</p>]
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Queries with html()

p#time span.label 10:36AM Departs At:
DOM
$(p#time).html(); <span class="label">Departs At:</span> 10:36AM
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Setting with html()

p#time b span.label 10:36AM Departs At:
DOM
$(p#time).html(<b>Departs At:</b> 10:36AM); <b>Departs At:</b> 10:36AM
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
text()
Queries Setting Strips HTML Escapes HTML
html()
Maintains HTML Builds DOM
LEVEL 4
CONTENTS MAY SHIFT
Prepending
p#time span.label span.label 10:36AM Departure Time:
DOM
$(span.label).prepend(Departure); <span class=label>Departure Time: </span> 10:36AM
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Appending
p#time span.label Departure Time:
DOM
10:36AM from the Gate
$(p#time).append( from the Gate); <p><span class=label>Departure Time: </span> 10:36AM from the Gate</p>
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Inserting Siblings with before

body h1 h3 p#time Manifest for Flight #1337 Departure Details span.label 10:36AM p.gate Gate 26 Time:
DOM
$(p#time).before(<h3>Departure Details</h3>); <p><span class=label>Time</span>10:36AM</p>
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Inserting Siblings with AFTER()

body h1 h3 p#time Manifest for Flight #1337 Departure Details span.label 10:36AM p.gate Gate 26 Time:
DOM
$(h1) .after(<h3>Departure Details</h3>); <h1>Manifest for Flight #1337</h1>
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Removing nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
DOM
$(span.label).remove(); <span>Time:</span>
JQUERY
LEVEL 4
CONTENTS MAY SHIFT
Moving nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
DOM
LEVEL 4
CONTENTS MAY SHIFT
Moving nodes
body h1 p.gate p#time Manifest for Flight #1337 Gate 26 span.label 10:36AM Time:
DOM
JQUERY
var gate = $(p.gate).remove(); $(p#time).before(gate); <p class=gate>... <p id=time>...
LEVEL 4
CONTENTS MAY SHIFT
review
Functions for Manipulating Content
function
.text .html
without parameter
query the plain text query html and text
with parameter
set the plain text set html and text
description
.prepend .append .before .after .remove add element inside the beginning of the selection add element inside the end of the selection add element before selection add element after selection remove element from the DOM
LEVEL 4
CONTENTS MAY SHIFT
Fasten your sea tbel ts

- Events & Animation -
How events work

Dividing Responsibilities
body h1 p#time
DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
ICK! CL
LEVEL 5
FASTEN YOUR SEATBELTS
Functions
function name (parameters) {instructions}
Example
function popWarning (message){ alert(Warning: + message); }
LEVEL 5
Anonymous Functions
Example
function (message){ alert(Warning: + message); }
LEVEL 5
Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready();
</script> </head>
LEVEL 5
Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert(The DOM is Ready!); }); </script> </head>
LEVEL 5
Click Event
Left-Button Mouse Click
$(document).ready(function(){ $(p).click(function(){ alert(Got It!); }); });
LEVEL 5
Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(p).hide(); }); });
LEVEL 5
Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); });
this refers to the current object usually just a plain DOM element wrap it to access jQuery functions: $(this)
LEVEL 5
Notes About timing

$(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); });
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover(function(){ $(this).addClass(highlight); }); });
jQuery

BROWSER
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover( function(){$(this).addClass(highlight);}, function(){$(this).removeClass(highlight);} ); });
jQuery

BROWSER
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover( function(){$(this).toggleClass(highlight);} ); });
jQuery

BROWSER
LEVEL 5
Keyboard Events
keydown res once when a key is depressed keypress res one or more times when a key is held down keyup res once when a key is released
LEVEL 5
Keypress
$(document).ready(function(){ $(body).keypress( function(){alert(Fantastic!);} ); });
jQuery
F G
LEVEL 5
The Event Object

$(document).ready(function(){ $(body).keypress( function(event){alert(Fantastic!);} ); });
jQuery
event.which has a numeric code for the key that was pressed event has other attributes like pageX, pageY, and target
LEVEL 5
Keypress
$(document).ready(function(){ $(body).keypress( function(event){ if (event.which == 102){alert(Fantastic!)}; } ); });
jQuery
F G
LEVEL 5
The Event Objects Functions

event.preventDefault() prevent the browsers normal reaction event.stopPropogation() prevent the event from bubbling up the DOM tree
LEVEL 5
A SPlash of AJAX
Fake AJAX animating and other manipulations using JavaScript Real AJAX submitting or loading content via XMLHttpRequest
LEVEL 5
Animating Transitions
BROWSER
p#time
span.label 10:36AM
Time:
DOM
$(p#time) .hide(slow); [<p id=time><span class="label">Time...
JQUERY
LEVEL 5
Slide Animations
BROWSER
p#time
span.label 10:36AM
Time:
DOM
$(p#time).slideUp(slow); $(p#time).slideDown(slow); $(p#time) .slideToggle(slow);
JQUERY
LEVEL 5
Fade Animations
BROWSER
p#time
span.label 10:36AM
Time:
DOM
$(p#time).fadeIn(slow); $(p#time).fadeOut(slow); $(p#time).fadeToggle(slow);
JQUERY
LEVEL 5
True ajax
sending or receiving content via XMLHttpRequest fetch HTML content with the .load() function
LEVEL 5
Using load()
p.gate span.label span.number span.number Gate 26
DOM
JQUERY
$(span.number).load(/flights/824/gate); [<span class=number>26</span>]
LEVEL 5
Review
Named functions
Anonymous functions
function (parameters) {instructions}
Document Ready Wrapper

$(document).ready(function(){ });
LEVEL 5
Review
General Event Handler
$(element).event(function(){ });
Commonly Used Events

function
.ready .click .hover
description
res when the object is completely loaded left mouse button is clicked and released once when the mouse moves on to an element, then again when it moves out
.keypress keyboard key is pressed and released
LEVEL 5
Review
Event Object
description
.which .pageX & .pageY .preventDefault() .stopPropogation() code for which key was pressed coordinates of the mouse pointer stop the broswer from its default action stop the event from triggering other handlers
LEVEL 5
Review
Animations
functions
.hide(speed) .show(speed) .toggle(speed) .slideDown(speed) .slideUp(speed) .slideToggle(speed) .fadeIn(speed) .fadeOut(speed) .fadeToggle(speed)
description
show/reveal with a scaling effect
show/reveal with a sliding effect
show/reveal with a dissolve effect
Load via AJAX

$(element).load(address);
LEVEL 5

Jquery Air Slides

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Air Slides

Uploaded by

Copyright:

Available Formats

jQuery Air

VBScript Mocha LiveScript JAVAscript

Foundations for jQuery

Foundations for jQuery

Foundations for jQuery

JQUERY IS NOT PERFECT

Foundations for jQuery

Just Enough Ja ascript v

VARIABLES AND DATA

var bravo = Fifty Two;

var charlie = 5.2;

var delta = true;

Foundations for jQuery

Pop up a message box with the Parameter Text and an OK button

Foundations for jQuery

Confirmation dialog with the message, returns true or false

Foundations for jQuery

Foundations for jQuery

function toLowerCase() {[native code]}

Foundations for jQuery

A Few String Functions

Foundations for jQuery

Foundations for jQuery

Create an array in v ariable X

Returns postion 2 Returns array length Returns reversed list

Foundations for jQuery

function s(i,j){return i+j;} s(16,32);

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

KICK THE TIRES

jQuery is not loaded!

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

Element + . + class Name

Writing Your First jQuery

Writing Your First jQuery

Writing Your First jQuery

Watch out, Im truthy

Writing Your First jQuery

This wont work!

Writing Your First jQuery

This matches paragraphs with ID final

Writing Your First jQuery

This matches any element with class final within a paragraph

No Match in this Dom

Writing Your First jQuery

The Art of Selecting

Dont use anonymous Class/ID Selectors

$(p#final); $(h3.errors); $(h3.errors, p.errors);

Do use Class/ID with ELEMENT TYPES Even with Multiple Elements

Writing Your First jQuery

This is not the same!

Writing Your First jQuery

Any span within body

Then, before landing... seatbelt

Writing Your First jQuery

Only spans directly under body

Then, before landing... seatbelt

Writing Your First jQuery

$(p#time).text(<b>Departs At:</b> 10:36AM); [<p id="time"><b>Departs At: </b> 10:36AM</p>]