jquery air slides
TRANSCRIPT
![Page 1: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/1.jpg)
jQuery Air- FIRST FLIGHT -
![Page 2: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/2.jpg)
Fuel Up- Foundations for jQuery -
![Page 3: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/3.jpg)
Back in 1995JavaScript is Born
LEVEL 1 Foundations for jQuery
VBScript
Mocha
LiveScript
JAVAscript
![Page 4: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/4.jpg)
Javascript TodayExplosive Growth
LEVEL 1 Foundations for jQuery
![Page 5: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/5.jpg)
Why jQuery?An Abstraction Layer
LEVEL 1 Foundations for jQuery
Use jQuery because...
...it’s easy!
...browsers suck!
...users have old browsers!
![Page 6: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/6.jpg)
JQUERY IS NOT PERFECTRight Tool for the Job
LEVEL 1 Foundations for jQuery
You still need JavaScript
jQuery is heavy & slow!
Build now, perfect later.
![Page 7: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/7.jpg)
Just Enough Javascript
- THE BASICS -
![Page 8: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/8.jpg)
Creating VariablesGiving Names to Data
LEVEL 1 Foundations for jQuery
var keyword
Name for the variable, normally insnake_case
Data or function on the right side
var message = “Hello, World!”;
Line ends in semicolon
![Page 9: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/9.jpg)
VARIABLES AND DATAJavaScript Types are Dynamic
LEVEL 1 Foundations for jQuery
var alpha = 42;
var bravo = “Fifty Two”;
var charlie = 5.2;
var delta = true;
![Page 10: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/10.jpg)
JS Global FUNCTIONS
LEVEL 1 Foundations for jQuery
alert(“Hello, World!”);
Pop up a message box with theParameter Text and an OK button
Alert
![Page 11: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/11.jpg)
var answer = confirm(“Start Engines?”);
JS Global FUNCTIONS
LEVEL 1 Foundations for jQuery
Confirmation dialog with the message,returns true or false
Con!rm
![Page 12: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/12.jpg)
var count = prompt(“Passenger Count:”);
JS Global FUNCTIONS
LEVEL 1 Foundations for jQuery
Take in data from the user,returns the value they enteras a String
Prompt
![Page 13: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/13.jpg)
“First Flight”; “First Flight”.toLowerCase();
Object FunctionsUse Dot Notation and Parentheses
LEVEL 1 Foundations for jQuery
“first flight”
“First Flight”.toLowerCase;
function toLowerCase(){[native code]}
![Page 14: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/14.jpg)
A Few String Functions
LEVEL 1 Foundations for jQuery
“Hello, World!”.toLowerCase(); “hello, world!”
“Hello, World!”.toUpperCase(); “HELLO, WORLD!”
“Hello, World!”.charAt(7); “W”
“Hello!”.replace(“!”,“World!”); “HelloWorld!”
“Hello, World!”.split(“, ”); [“Hello”,“World!”]
![Page 15: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/15.jpg)
Number-related Operations
LEVEL 1 Foundations for jQuery
16 + 26; 42
42.toString(); “42”
parseInt(“42 people”); 42
16 / 2; 8
![Page 16: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/16.jpg)
ARRAYS
LEVEL 1 Foundations for jQuery
Ordered Sets of Data
var x = [“zero”,“one”,“two”]; Create an array in variable X
x.reverse(); [“two”,“one”,“zero”]Returns reversed list
x.length; Returns array length 3
x[2]; Returns postion 2 “two”
![Page 17: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/17.jpg)
https://developer.mozilla.org/en/JavaScript/Reference/
![Page 18: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/18.jpg)
Take OFF- WRITING YOUR FIRST JQUERY -
![Page 19: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/19.jpg)
http://jquery.com
![Page 20: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/20.jpg)
http://docs.jquery.com/Downloading_jQuery
Fastest Human Readable
![Page 21: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/21.jpg)
MINIFIED JavascriptBetter Performance, Sacri!cing Readability
LEVEL 2 Writing Your First jQuery
function sum(input_1, input_2) { return input_1 + input_2;}sum(16, 32);
function s(i,j){return i+j;}s(16,32);
75 Characters
38 Characters
![Page 22: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/22.jpg)
LOADING JQUERYLocal File System
LEVEL 2 Writing Your First jQuery
<script type="text/javascript" src="jquery.js"></script>
![Page 23: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/23.jpg)
LOADING JQUERYGoogle’s Content Delivery Network
LEVEL 2 Writing Your First jQuery
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>
![Page 24: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/24.jpg)
LOADING JQUERYDuring This Tutorial
LEVEL 2 Writing Your First jQuery
Use the evaluator window
We’ve already loaded jQuery
Your code will run in asafe “sandbox”
![Page 25: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/25.jpg)
KICK THE TIRESIs jQuery Loaded?
LEVEL 2 Writing Your First jQuery
jQuery;
ReferenceError: jQuery is not defined
jQuery is not loaded!
jQuery;
function (j,s){return new b.fn.init(j,s)}
Ready to go!
$;
function (j,s){return new b.fn.init(j,s)}
Still jQuery!
![Page 26: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/26.jpg)
Take OffPart 1: Elementary Selectors
![Page 27: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/27.jpg)
The DOMDocument Object Model
LEVEL 2 Writing Your First jQuery
<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>
![Page 28: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/28.jpg)
The DOMDocument Object Model
LEVEL 2 Writing Your First jQuery
html
head
body
title jQuery First Flight
h1 Welcome to jQuery Air
p.plan Before you can takeoff...
p#final Then, before landing...
![Page 29: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/29.jpg)
$(“h1”);
h1 Welcome to jQuery Air
jQuery Selection
LEVEL 2 Writing Your First jQuery
html
body
p.plan Before you can takeoff...
JQUERY
DOM
h1 Welcome to jQuery Air
p#final Then, before landing...
Element Name
![Page 30: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/30.jpg)
p.plan Before you can takeoff...
p#final Then, before landing...
jQuery Selection
LEVEL 2 Writing Your First jQuery
html
body
$(“p”);
JQUERY
DOM
h1 Welcome to jQuery Air
p.plan Before you can takeoff...
p#final Then, before landing...
Element Name
![Page 31: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/31.jpg)
p.plan Before you can takeoff...
jQuery Selection
LEVEL 2 Writing Your First jQuery
html
body
p.plan Before you can takeoff...
$(“p.plan”);
JQUERY
DOM
h1 Welcome to jQuery Air
p#final Then, before landing...
Element + . + class Name
![Page 32: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/32.jpg)
p#final Then, before landing...
jQuery Selection
LEVEL 2 Writing Your First jQuery
html
body
p.plan Before you can takeoff...
$(“p#final”);
JQUERY
DOM
h1 Welcome to jQuery Air
p#final Then, before landing...
Element + # + ID Name
![Page 33: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/33.jpg)
Take OffPart 2: Selection Results
![Page 34: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/34.jpg)
Selection Results
LEVEL 2 Writing Your First jQuery
$(“p”);
JQUERY
DOM
p.plan Before you can takeoff...
p#final Then, before landing...
Javascript Results
[“<p class=‘plan’>Before you can takeoff...</p>”, “<p class=‘final’>Then, before landing...</p>”]
![Page 35: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/35.jpg)
Non-match Results
LEVEL 2 Writing Your First jQuery
$(“h2”);
JQUERY
DOM
Javascript Results
[]
There were no H2s in the DOM
Watch out, I’m “truthy”
![Page 36: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/36.jpg)
Selection Results
LEVEL 2 Writing Your First jQuery
$(“h1, p.plan”);
JQUERY
DOM
Javascript Results
[“<h1>Welcome to jQuery Air</h1>”, “<p class=‘final’>Then, before landing...</p>”]
p#final Then, before landing...
h1 Welcome to jQuery Air
$(“h1”,“p.plan”);
This won’t work!
![Page 37: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/37.jpg)
p#final Then, before landing...
Understanding Whitespace
LEVEL 2 Writing Your First jQuery
document
body
p.plan Before you can takeoff...
$(“p#final”);
JQUERY
DOM
h1 Welcome to jQuery Air
p#final Then, before landing...
This matches paragraphs with ID “final”
![Page 38: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/38.jpg)
Understanding Whitespace
LEVEL 2 Writing Your First jQuery
document
body
p.plan Before you can takeoff...
$(“p #final”);
JQUERY
DOM
h1 Welcome to jQuery Air
p#final Then, before landing...
This matches any element with class“final” within a paragraph
No Match in this Dom
![Page 39: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/39.jpg)
The Art of Selecting
LEVEL 2 Writing Your First jQuery
$(“#final”);Don’t use anonymous Class/ID Selectors
$(“.errors”);
Do use Class/ID with ELEMENT TYPES
$(“p#final”);
$(“h3.errors”);
$(“h3.errors, p.errors”); Even withMultiple Elements
![Page 40: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/40.jpg)
Take OffPart 3: Pseudo-Classes and Direct Descendants
![Page 41: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/41.jpg)
p.plan Before you can takeoff...
PSEUDO-Classes
LEVEL 2 Writing Your First jQuery
$(“p:first”);
JQUERY
DOM
Javascript Results
[“<p class=‘plan’>Before you can takeoff</p>”]
$(“p.first”);
This is not the same!
body
p.plan Before you can takeoff...
p#final Then, before landing...
![Page 42: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/42.jpg)
span.highlight WARNING
span seatbelt
Direct Descendants
LEVEL 2 Writing Your First jQuery
$(“body span”);
JQUERY
DOM
body
p.plan Before you can takeoff...
Any span within body
p Then, before landing...
span.highlight WARNING
span seatbelt
![Page 43: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/43.jpg)
span.highlight
Direct Descendants
LEVEL 2 Writing Your First jQuery
JQUERY
DOM
body
p.plan Before you can takeoff...
WARNING
p Then, before landing...
span seatbelt
$(“body > span”); Only spans directly under body
No Matches
![Page 44: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/44.jpg)
WARNING span.highlight span.highlight WARNING span
Direct Descendants
LEVEL 2 Writing Your First jQuery
JQUERY
DOM
body
p.plan Before you can takeoff...
p Then, before landing...
span seatbelt
$(“p.plan > span”); Only spans directly under Plan
![Page 45: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/45.jpg)
View from 30,000 Feet
- MANIPULATING STYLE -
![Page 46: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/46.jpg)
$(“p”)
$(“p”)
$(“p”)
“16px”
function(a,c){if(arguments...
TypeError: Cannot call method
p#final Then, before landing...
Querying CSS
LEVEL 3 VIEW FROM 30,000 FEET
html
body
p.plan Before you can takeoff...
h1 Welcome to jQuery Air
p#final Then, before landing...
.css();
.css;
.css(“font-size”);
p.plan Before you can takeoff...
![Page 47: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/47.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
“16px”
p#final
SETTING CSS Explicitly
LEVEL 3 VIEW FROM 30,000 FEET
p.plan
$(“p”).css(“font-size”);
JQUERY
Rendered DOM
$(“p”).css(“font-size”,“24px”); [<p>...
![Page 48: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/48.jpg)
[<p>...
“16px”
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing... p#final
SETTING CSS Relatively
LEVEL 3 VIEW FROM 30,000 FEET
p.plan
var original =
JQUERY
Rendered DOM
$(“p”).css(“font-size”, original + 8 [<p>...
$(“p”).css(“font-size”);
No actual change!
);
Doesn’t work because of string
![Page 49: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/49.jpg)
[<p>...
“16px” 16
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing... p#final
SETTING CSS Relatively
LEVEL 3 VIEW FROM 30,000 FEET
p.plan
var original =
JQUERY
Rendered DOM
$(“p”).css(“font-size”, original + 8 [<p>...
parseInt($(“p”).css(“font-size”));
+ “px”);
Works!
![Page 50: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/50.jpg)
Setting Multiple AttributesUsing Method Chaining
LEVEL 3 VIEW FROM 30,000 FEET
Using a Map
$(“p”).css({“font-size”:“24px”, “font-weight”:“bold”, “line-height”:“32px”});
$(“p”).css(“font-size”,“24px”). css(“font-weight”,“bold”). css(“line-height”,“32px”);
![Page 51: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/51.jpg)
Javascript Maps
LEVEL 3 VIEW FROM 30,000 FEET
Key and valueseparated by :
Pairs separated by ,
Just Enough JavaScript
Wrapped in {}
Pairs are one key and one value
“font-size” “24px”“font-weight” “bold”“line-height” “32px”
:::
,,
{
}
![Page 52: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/52.jpg)
Wait, Wait, wait!
LEVEL 3 VIEW FROM 30,000 FEET
HTMLcontent
CSSpresentation
JavaScriptinteraction
![Page 53: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/53.jpg)
The CSS Interface
LEVEL 3 VIEW FROM 30,000 FEET
DOM and CSS communicatevia IDs and Classes
Use .css() with reservation
Manipulate IDs and Classes
More reliable and maintainable
![Page 54: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/54.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
true
Querying CSS Class
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.hasClass(“plan”);
![Page 55: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/55.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
[<p class="plan bigger"> Before you can takeoff...</p>]
ADDING A CSS Class
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.addClass(“bigger”);
![Page 56: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/56.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
[<p class="plan"> Before you can takeoff...</p>]
REMOVING A CSS Class
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.removeClass(“bigger”);
![Page 57: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/57.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
[<p class=""> Before you can takeoff...</p>]
REMOVING All CSS Classes
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.removeClass();
![Page 58: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/58.jpg)
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
Welcome to jQuery Air!
Before you can takeoff...
Then, before landing...
[<p class="plan bigger"> Before you can takeoff...</p>]
Toggling a Class
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.toggleClass(“bigger”);.toggleClass(“bigger”);
[<p class="plan"> Before you can takeoff...</p>]
![Page 59: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/59.jpg)
[<p style=“display:none”> Before you can takeoff...</p>]
Welcome to jQuery Air!
Then, before landing...
Visibility
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.hide();
Before you can takeoff...
[<p style=“display:normal”> Before you can takeoff...</p>] $(“p:first”).show();
![Page 60: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/60.jpg)
[<p> Before you can takeoff...</p>][<p style=“display:none”> Before you can takeoff...</p>]
Welcome to jQuery Air!
Then, before landing...
Visibility
LEVEL 3 VIEW FROM 30,000 FEET
p:first
$(“p:first”)
JQUERY
Rendered DOM
.toggle();
Switches between show and hide
![Page 61: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/61.jpg)
Timing Matters
LEVEL 3 VIEW FROM 30,000 FEET
<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>
<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!
![Page 62: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/62.jpg)
<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>
Timing Matters
LEVEL 3 VIEW FROM 30,000 FEET
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(“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>
Waiting for the DOM...
DOM is “Ready”: fire the JavaScript!
style=‘display:none’>
![Page 63: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/63.jpg)
CONTENTS MAY SHIFT- MANIPULATING CONTENT -
![Page 64: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/64.jpg)
WHY (NOT) Manipulate the DoM
LEVEL 4 CONTENTS MAY SHIFT
Dividing Responsibilities
HTMLcontent
CSSpresentation
JavaScriptinteraction
![Page 65: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/65.jpg)
Flight manifest
LEVEL 4 CONTENTS MAY SHIFT
Our Sample HTML
Manifest for Flight #1337Time: 10:36AMGate 26
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
DOM
BROWSER
![Page 66: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/66.jpg)
Retrieving Text Content
LEVEL 4 CONTENTS MAY SHIFT
Querying with .text()
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
$(“p#time span.label”)
DOM
JQUERY
“Time:”
.text();
span.label
![Page 67: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/67.jpg)
Manifest for Flight #1337 Time: 10:36AM Gate 26
BROWSER
Setting Text Content
LEVEL 4 CONTENTS MAY SHIFT
![Page 68: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/68.jpg)
Time: p#time
10:36AM
span.label DOMDeparts At:
Setting Text Content
LEVEL 4 CONTENTS MAY SHIFT
Manifest for Flight #1337 Gate 26
BROWSER
$(“p#time span.label”) JQUERY
[<span class="label">Departs At:”</span>]
span.label
.text(“Departs At:”);
Departs At: 10:36AM
![Page 69: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/69.jpg)
Text is just text
LEVEL 4 CONTENTS MAY SHIFT
Departs At: p#time
10:36AM
span.label DOM
$(“p#time”) JQUERY
“Departs At: 10:36AM”
.text();
p#time
![Page 70: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/70.jpg)
Text() With HTML
LEVEL 4 CONTENTS MAY SHIFT
p#time DOM
$(“p#time”) JQUERY
[<p id="time"><b>Departs At: </b> 10:36AM</p>]
.text(“<b>Departs At:</b> 10:36AM”);
p#time <b>Departs At:</b> 10:36AM
![Page 71: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/71.jpg)
Queries with html()
LEVEL 4 CONTENTS MAY SHIFT
Departs At: p#time
10:36AM
span.label DOM
$(“p#time”) JQUERY
“<span class="label">Departs At:</span> 10:36AM”
.html();
p#time
![Page 72: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/72.jpg)
Setting with html()
LEVEL 4 CONTENTS MAY SHIFT
Departs At: p#time
10:36AM
span.label DOM
$(“p#time”) JQUERY
“<b>Departs At:</b> 10:36AM”
.html(“<b>Departs At:</b> 10:36AM”);
p#time b
![Page 73: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/73.jpg)
text()
LEVEL 4 CONTENTS MAY SHIFT
Queries
html()
Strips HTML Maintains HTML
Setting Escapes HTML Builds DOM
![Page 74: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/74.jpg)
Prepending
LEVEL 4 CONTENTS MAY SHIFT
p#time
10:36AM
span.label DOM
$(“span.label”) JQUERY
“<span class=‘label’>Departure Time: </span> 10:36AM”
.prepend(“Departure”);
span.label Time: Departure
![Page 75: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/75.jpg)
Appending
LEVEL 4 CONTENTS MAY SHIFT
p#time
10:36AM
span.label DOM
$(“p#time”) JQUERY
“<p><span class=‘label’>Departure Time: </span> 10:36AM from the Gate</p>”
.append(“ from the Gate”);
Departure Time: p#time
from the Gate
![Page 76: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/76.jpg)
h3 Departure Details
Inserting Siblings with before
LEVEL 4 CONTENTS MAY SHIFT
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
$(“p#time”) JQUERY
“<p><span class=‘label’>Time</span>10:36AM</p>”
.before(“<h3>Departure Details</h3>”);
DOM
![Page 77: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/77.jpg)
h1 h1
h3 Departure Details
Inserting Siblings with AFTER()
LEVEL 4 CONTENTS MAY SHIFT
body
Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
$(“h1”) JQUERY
“<h1>Manifest for Flight #1337</h1>”
.after(“<h3>Departure Details</h3>”);
DOM
![Page 78: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/78.jpg)
Removing nodes
LEVEL 4 CONTENTS MAY SHIFT
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
DOM
$(“span.label”) JQUERY
“<span>Time:</span>”
span.label
.remove();
![Page 79: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/79.jpg)
Moving nodes
LEVEL 4 CONTENTS MAY SHIFT
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
DOM
![Page 80: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/80.jpg)
p#time
Moving nodes
LEVEL 4 CONTENTS MAY SHIFT
body
h1 Manifest for Flight #1337
Time:
10:36AM
span.label
DOM
var gate = $(“p.gate”).remove();
JQUERY
“<p class=‘gate’>...
$(“p#time”) “<p id=‘time’>....before(gate);
p.gate Gate 26
![Page 81: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/81.jpg)
review
LEVEL 4 CONTENTS MAY SHIFT
Functions for Manipulating Content
function without parameter with parameter
.text query the plain text set the plain text
.html query html and text set html and text
descriptiondescription
.prepend add element inside the beginning of the selectionadd element inside the beginning of the selection
.append add element inside the end of the selectionadd element inside the end of the selection
.before add element before selectionadd element before selection
.after add element after selectionadd element after selection
.remove remove element from the DOMremove element from the DOM
![Page 82: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/82.jpg)
Fasten your seatbelts- Events & Animation -
![Page 83: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/83.jpg)
How events work
LEVEL 5 FASTEN YOUR SEATBELTS
Dividing Responsibilities
body
h1 Manifest for Flight #1337
p#time Time:
p.gate Gate 26
10:36AM
span.label
DOM
CLICK!
![Page 84: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/84.jpg)
function popWarning (message){ alert(“Warning: “ + message);}
Functions
LEVEL 5 FASTEN YOUR SEATBELTS
Just Enough JavaScript
function {instructions}name (parameters)
Example
![Page 85: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/85.jpg)
function (message){ alert(“Warning: “ + message);}
Anonymous Functions
LEVEL 5 FASTEN YOUR SEATBELTS
Just Enough JavaScript
function name {instructions}(parameters)
Example
![Page 86: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/86.jpg)
Document Ready
LEVEL 5 FASTEN YOUR SEATBELTS
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
</script> </head>
$(document).ready();
![Page 87: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/87.jpg)
Document Ready
LEVEL 5 FASTEN YOUR SEATBELTS
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
</script> </head>
$(document).ready(function(){ alert(“The DOM is Ready!”); });
![Page 88: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/88.jpg)
$(document).ready(function(){ $(“p”)
});
.click(
);
function(){
}
Click Event
LEVEL 5 FASTEN YOUR SEATBELTS
Left-Button Mouse Click
alert(“Got It!”);
![Page 89: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/89.jpg)
$(document).ready(function(){ $(“p”)
});
.click(
);
function(){
}
Click To Hide
LEVEL 5 FASTEN YOUR SEATBELTS
$(“p”).hide();
![Page 90: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/90.jpg)
$(document).ready(function(){ $(“p”)
});
.click(
);
function(){
}
Click To Hide
LEVEL 5 FASTEN YOUR SEATBELTS
$(this)
this refers to the current object
usually just a plain DOM element
wrap it to accessjQuery functions: $(this)
.hide();
![Page 91: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/91.jpg)
$(“p”) .click(
);
function(){
}
Notes About timing
LEVEL 5 FASTEN YOUR SEATBELTS
$(this).hide();
$(document).ready(function(){
});
![Page 92: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/92.jpg)
$(document).ready(function(){ $(“p”)
});
function(){
}
.hover(
);
Hover
LEVEL 5 FASTEN YOUR SEATBELTS
$(this).addClass(“highlight”);
Manifest for Flight #1337 BROWSER
jQuery
Time: 10:36AMGate 26
![Page 93: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/93.jpg)
$(document).ready(function(){ $(“p”).hover(
);});
function(){$(this).addClass(“highlight”);},
Hover
LEVEL 5 FASTEN YOUR SEATBELTS
Manifest for Flight #1337 BROWSER
jQuery
Time: 10:36AMGate 26
function(){$(this).removeClass(“highlight”);}
![Page 94: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/94.jpg)
$(document).ready(function(){ $(“p”).hover(
);});
function(){$(this).toggleClass(“highlight”);}
Hover
LEVEL 5 FASTEN YOUR SEATBELTS
Manifest for Flight #1337 BROWSER
jQuery
Time: 10:36AMGate 26
![Page 95: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/95.jpg)
Keyboard Events
LEVEL 5 FASTEN YOUR SEATBELTS
keydown fires once whena key is depressed
keypress fires one or moretimes when a key is held down
keyup fires once whena key is released
![Page 96: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/96.jpg)
Keypress
LEVEL 5 FASTEN YOUR SEATBELTS
$(document).ready(function(){ $(“body”).keypress(
);});
jQuery
function(){alert(“Fantastic!”);}
F
G
![Page 97: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/97.jpg)
The Event Object
LEVEL 5 FASTEN YOUR SEATBELTS
event.which has a numeric codefor the key that was pressed
event has other attributes likepageX, pageY, and target
$(document).ready(function(){ $(“body”).keypress(
);});
jQuery
function(event){alert(“Fantastic!”);}
![Page 98: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/98.jpg)
Keypress
LEVEL 5 FASTEN YOUR SEATBELTS
$(document).ready(function(){ $(“body”).keypress( function(event){
} );});
jQuery
if (event.which == 102){alert(“Fantastic!”)};
F
G
![Page 99: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/99.jpg)
The Event Object’s Functions
LEVEL 5 FASTEN YOUR SEATBELTS
event.preventDefault() prevent the browser’s normal reaction
event.stopPropogation() prevent the event from bubbling upthe DOM tree
![Page 100: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/100.jpg)
A SPlash of AJAX
LEVEL 5 FASTEN YOUR SEATBELTS
Real AJAXsubmitting or loading content viaXMLHttpRequest
Fake AJAXanimating and other manipulationsusing JavaScript
![Page 101: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/101.jpg)
[<p id=”time”><span class="label">Time...
Animating Transitions
LEVEL 5 FASTEN YOUR SEATBELTS
Time: p#time
10:36AM
span.label DOM
Manifest for Flight #1337 Gate 26
BROWSER
$(“p#time”) JQUERY
Time: 10:36AM
.hide(“slow”);
![Page 102: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/102.jpg)
$(“p#time”).slideUp(“slow”);
Slide Animations
LEVEL 5 FASTEN YOUR SEATBELTS
Time: p#time
10:36AM
span.label DOM
Manifest for Flight #1337 Gate 26
BROWSER
JQUERY
Time: 10:36AM
$(“p#time”).slideDown(“slow”);
$(“p#time”).slideToggle(“slow”);
![Page 103: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/103.jpg)
$(“p#time”)
Fade Animations
LEVEL 5 FASTEN YOUR SEATBELTS
Time: p#time
10:36AM
span.label DOM
Manifest for Flight #1337 Gate 26
BROWSER
JQUERY
Time: 10:36AM
.fadeIn(“slow”);
$(“p#time”)
$(“p#time”).fadeToggle(“slow”);
.fadeOut(“slow”);
![Page 104: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/104.jpg)
True ajax
LEVEL 5 FASTEN YOUR SEATBELTS
sending or receiving contentvia XMLHttpRequest
fetch HTML content with the.load() function
![Page 105: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/105.jpg)
Using load()
LEVEL 5 FASTEN YOUR SEATBELTS
p.gate
span.number 26
span.label Gate
span.number
$(“span.number”)
DOM
JQUERY
[<span class=“number”>26</span>]
.load(“/flights/824/gate”);
![Page 106: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/106.jpg)
Review
LEVEL 5 FASTEN YOUR SEATBELTS
function name (parameters) {instructions}
Named functions
function (parameters) {instructions}
Anonymous functions
$(document).ready(function(){
});
Document Ready Wrapper
![Page 107: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/107.jpg)
Review
LEVEL 5 FASTEN YOUR SEATBELTS
$(element).event(function(){
});
General Event Handler
function description
.ready !res when the object is completely loaded
.click left mouse button is clicked and released
.hoveronce when the mouse moves on to an element,then again when it moves out
.keypress keyboard key is pressed and released
Commonly Used Events
![Page 108: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/108.jpg)
Review
LEVEL 5 FASTEN YOUR SEATBELTS
description
.which code for which key was pressed
.pageX & .pageY coordinates of the mouse pointer
.preventDefault() stop the broswer from it’s default action
.stopPropogation() stop the event from triggering other handlers
Event Object
![Page 109: Jquery Air Slides](https://reader037.vdocuments.mx/reader037/viewer/2022110301/544b5141af7959ac438b5130/html5/thumbnails/109.jpg)
Review
LEVEL 5 FASTEN YOUR SEATBELTS
$(element).load(address);
Load via AJAX
functions description
.hide(speed)
.show(speed)
.toggle(speed)show/reveal with a scaling effect
.slideDown(speed)
.slideUp(speed)
.slideToggle(speed)show/reveal with a sliding effect
.fadeIn(speed)
.fadeOut(speed)
.fadeToggle(speed)show/reveal with a dissolve effect
Animations