Jquery Air Slides

jQuery Air- FIRST FLIGHT -

Fuel Up- Foundations for jQuery -

Back in 1995JavaScript is Born

LEVEL 1 Foundations for jQuery

VBScript

LiveScript

JAVAscript

Javascript TodayExplosive Growth

Why jQuery?An Abstraction Layer

Use jQuery because...

...it’s easy!

...browsers suck!

...users have old browsers!

JQUERY IS NOT PERFECTRight Tool for the Job

You still need JavaScript

jQuery is heavy & slow!

Build now, perfect later.

Just Enough Javascript

- THE BASICS -

Creating VariablesGiving Names to Data

var keyword

Name for the variable, normally insnake_case

Data or function on the right side

var message = “Hello, World!”;

Line ends in semicolon

VARIABLES AND DATAJavaScript Types are Dynamic

var alpha = 42;

var bravo = “Fifty Two”;

var charlie = 5.2;

var delta = true;

JS Global FUNCTIONS

alert(“Hello, World!”);

Pop up a message box with theParameter Text and an OK button

var answer = confirm(“Start Engines?”);

JS Global FUNCTIONS

Confirmation dialog with the message,returns true or false

Con!rm

var count = prompt(“Passenger Count:”);

JS Global FUNCTIONS

Take in data from the user,returns the value they enteras a String

Prompt

“First Flight”; “First Flight”.toLowerCase();

Object FunctionsUse Dot Notation and Parentheses

“first flight”

“First Flight”.toLowerCase;

function toLowerCase(){[native code]}

A Few String Functions

“Hello, World!”.toLowerCase(); “hello, world!”

“Hello, World!”.toUpperCase(); “HELLO, WORLD!”

“Hello, World!”.charAt(7); “W”

“Hello!”.replace(“!”,“World!”); “HelloWorld!”

“Hello, World!”.split(“, ”); [“Hello”,“World!”]

Number-related Operations

16 + 26; 42

42.toString(); “42”

parseInt(“42 people”); 42

16 / 2; 8

ARRAYS

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”

https://developer.mozilla.org/en/JavaScript/Reference/

Take OFF- WRITING YOUR FIRST JQUERY -

http://jquery.com

http://docs.jquery.com/Downloading_jQuery

Fastest Human Readable

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

LOADING JQUERYLocal File System

LOADING JQUERYGoogle’s Content Delivery Network

LOADING JQUERYDuring This Tutorial

Use the evaluator window

We’ve already loaded jQuery

Your code will run in asafe “sandbox”

KICK THE TIRESIs jQuery Loaded?

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!

Take OffPart 1: Elementary Selectors

The DOMDocument 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>

The DOMDocument Object Model

title jQuery First Flight

h1 Welcome to jQuery Air

p.plan Before you can takeoff...

p#final Then, before landing...

$(“h1”);

jQuery Selection

JQUERY

Element Name

jQuery Selection

$(“p”);

JQUERY

Element Name

jQuery Selection

$(“p.plan”);

JQUERY

Element + . + class Name

jQuery Selection

$(“p#final”);

JQUERY

Element + # + ID Name

Take OffPart 2: Selection Results

Selection Results

$(“p”);

JQUERY

Javascript Results

[“<p class=‘plan’>Before you can takeoff...</p>”, “<p class=‘final’>Then, before landing...</p>”]

Non-match Results

$(“h2”);

JQUERY

Javascript Results

There were no H2s in the DOM

Watch out, I’m “truthy”

Selection Results

$(“h1, p.plan”);

JQUERY

Javascript Results

[“<h1>Welcome to jQuery Air</h1>”, “<p class=‘final’>Then, before landing...</p>”]

$(“h1”,“p.plan”);

This won’t work!

Understanding Whitespace

document

$(“p#final”);

JQUERY

This matches paragraphs with ID “final”

Understanding Whitespace

document

$(“p #final”);

JQUERY

This matches any element with class“final” within a paragraph

No Match in this Dom

The Art of Selecting

$(“#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

Take OffPart 3: Pseudo-Classes and Direct Descendants

PSEUDO-Classes

$(“p:first”);

JQUERY

Javascript Results

[“<p class=‘plan’>Before you can takeoff</p>”]

$(“p.first”);

This is not the same!

span.highlight WARNING

span seatbelt

Direct Descendants

$(“body span”);

JQUERY

Any span within body

p Then, before landing...

span.highlight WARNING

span seatbelt

span.highlight

Direct Descendants

JQUERY

WARNING

span seatbelt

$(“body > span”); Only spans directly under body

No Matches

WARNING span.highlight span.highlight WARNING span

Direct Descendants

JQUERY

span seatbelt

$(“p.plan > span”); Only spans directly under Plan

View from 30,000 Feet

- MANIPULATING STYLE -

$(“p”)

“16px”

function(a,c){if(arguments...

TypeError: Cannot call method

Querying CSS

LEVEL 3 VIEW FROM 30,000 FEET

.css();

.css(“font-size”);

Welcome to jQuery Air!

Before you can takeoff...

Then, before landing...

“16px”

p#final

SETTING CSS Explicitly

p.plan

$(“p”).css(“font-size”);

JQUERY

Rendered DOM

$(“p”).css(“font-size”,“24px”); [<p>...

[<p>...

“16px”

Then, before landing... p#final

SETTING CSS Relatively

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

[<p>...

“16px” 16

Then, before landing... p#final

SETTING CSS Relatively

p.plan

var original =

JQUERY

Rendered DOM

$(“p”).css(“font-size”, original + 8 [<p>...

parseInt($(“p”).css(“font-size”));

+ “px”);

Works!

Setting Multiple AttributesUsing Method Chaining

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”);

Javascript Maps

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”

Wait, Wait, wait!

HTMLcontent

CSSpresentation

JavaScriptinteraction

The CSS Interface

DOM and CSS communicatevia IDs and Classes

Use .css() with reservation

Manipulate IDs and Classes

More reliable and maintainable

Querying CSS Class

p:first

$(“p:first”)

JQUERY

Rendered DOM

.hasClass(“plan”);

[<p class="plan bigger"> Before you can takeoff...</p>]

ADDING A CSS Class

p:first

$(“p:first”)

JQUERY

Rendered DOM

.addClass(“bigger”);

[<p class="plan"> Before you can takeoff...</p>]

REMOVING A CSS Class

p:first

$(“p:first”)

JQUERY

Rendered DOM

.removeClass(“bigger”);

[<p class=""> Before you can takeoff...</p>]

REMOVING All CSS Classes

p:first

$(“p:first”)

JQUERY

Rendered DOM

.removeClass();

[<p class="plan bigger"> Before you can takeoff...</p>]

Toggling a Class

p:first

$(“p:first”)

JQUERY

Rendered DOM

.toggleClass(“bigger”);.toggleClass(“bigger”);

[<p class="plan"> Before you can takeoff...</p>]

[<p style=“display:none”> Before you can takeoff...</p>]

Visibility

p:first

$(“p:first”)

JQUERY

Rendered DOM

.hide();

[<p style=“display:normal”> Before you can takeoff...</p>] $(“p:first”).show();

[<p> Before you can takeoff...</p>][<p style=“display:none”> Before you can takeoff...</p>]

Visibility

p:first

$(“p:first”)

JQUERY

Rendered DOM

.toggle();

Switches between show and hide

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!

<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

<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’>

CONTENTS MAY SHIFT- MANIPULATING CONTENT -

WHY (NOT) Manipulate the DoM

LEVEL 4 CONTENTS MAY SHIFT

Dividing Responsibilities

HTMLcontent

CSSpresentation

JavaScriptinteraction

Flight manifest

Our Sample HTML

Manifest for Flight #1337Time: 10:36AMGate 26

h1 Manifest for Flight #1337

p#time Time:

p.gate Gate 26

10:36AM

span.label

BROWSER

Retrieving Text Content

Querying with .text()

p#time Time:

p.gate Gate 26

10:36AM

span.label

$(“p#time span.label”)

JQUERY

“Time:”

.text();

span.label

Manifest for Flight #1337 Time: 10:36AM Gate 26

BROWSER

Setting Text Content

Time: p#time

10:36AM

span.label DOMDeparts At:

Setting Text Content

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

Text is just text

Departs At: p#time

10:36AM

span.label DOM

$(“p#time”) JQUERY

“Departs At: 10:36AM”

.text();

p#time

Text() With HTML

p#time DOM

[<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

Queries with html()

Departs At: p#time

10:36AM

span.label DOM

“<span class="label">Departs At:</span> 10:36AM”

.html();

p#time

Setting with html()

Departs At: p#time

10:36AM

span.label DOM

“<b>Departs At:</b> 10:36AM”

.html(“<b>Departs At:</b> 10:36AM”);

p#time b

text()

Queries

html()

Strips HTML Maintains HTML

Setting Escapes HTML Builds DOM

Prepending

p#time

10:36AM

span.label DOM

$(“span.label”) JQUERY

“<span class=‘label’>Departure Time: </span> 10:36AM”

.prepend(“Departure”);

span.label Time: Departure

Appending

p#time

10:36AM

span.label DOM

“<p><span class=‘label’>Departure Time: </span> 10:36AM from the Gate</p>”

.append(“ from the Gate”);

Departure Time: p#time

from the Gate

h3 Departure Details

Inserting Siblings with before

p#time Time:

p.gate Gate 26

10:36AM

span.label

“<p><span class=‘label’>Time</span>10:36AM</p>”

.before(“<h3>Departure Details</h3>”);

h3 Departure Details

Inserting Siblings with AFTER()

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>”);

Removing nodes

p#time Time:

p.gate Gate 26

10:36AM

span.label

$(“span.label”) JQUERY

“<span>Time:</span>”

span.label

.remove();

Moving nodes

p#time Time:

p.gate Gate 26

10:36AM

span.label

p#time

Moving nodes

10:36AM

span.label

var gate = $(“p.gate”).remove();

JQUERY

“<p class=‘gate’>...

$(“p#time”) “<p id=‘time’>....before(gate);

p.gate Gate 26

review

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

Fasten your seatbelts- Events & Animation -

How events work

LEVEL 5 FASTEN YOUR SEATBELTS

Dividing Responsibilities

p#time Time:

p.gate Gate 26

10:36AM

span.label

CLICK!

function popWarning (message){ alert(“Warning: “ + message);}

Functions

function {instructions}name (parameters)

Example

function (message){ alert(“Warning: “ + message);}

Anonymous Functions

function name {instructions}(parameters)

Example

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">

</script> </head>

$(document).ready();

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">

</script> </head>

$(document).ready(function(){ alert(“The DOM is Ready!”); });

$(document).ready(function(){ $(“p”)

.click(

function(){

Click Event

Left-Button Mouse Click

alert(“Got It!”);

.click(

function(){

Click To Hide

$(“p”).hide();

.click(

function(){

Click To Hide

$(this)

this refers to the current object

usually just a plain DOM element

wrap it to accessjQuery functions: $(this)

.hide();

$(“p”) .click(

function(){

Notes About timing

$(this).hide();

$(document).ready(function(){

function(){

.hover(

$(this).addClass(“highlight”);

Manifest for Flight #1337 BROWSER

jQuery

Time: 10:36AMGate 26

$(document).ready(function(){ $(“p”).hover(

function(){$(this).addClass(“highlight”);},

jQuery

function(){$(this).removeClass(“highlight”);}

$(document).ready(function(){ $(“p”).hover(

function(){$(this).toggleClass(“highlight”);}

jQuery

Keyboard Events

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

Keypress

$(document).ready(function(){ $(“body”).keypress(

jQuery

function(){alert(“Fantastic!”);}

The Event Object

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!”);}

Keypress

$(document).ready(function(){ $(“body”).keypress( function(event){

} );});

jQuery

if (event.which == 102){alert(“Fantastic!”)};

The Event Object’s Functions

event.preventDefault() prevent the browser’s normal reaction

event.stopPropogation() prevent the event from bubbling upthe DOM tree

A SPlash of AJAX

Real AJAXsubmitting or loading content viaXMLHttpRequest

Fake AJAXanimating and other manipulationsusing JavaScript

[<p id=”time”><span class="label">Time...

Animating Transitions

Time: p#time

10:36AM

span.label DOM

BROWSER

Time: 10:36AM

.hide(“slow”);

$(“p#time”).slideUp(“slow”);

Slide Animations

Time: p#time

10:36AM

span.label DOM

BROWSER

JQUERY

Time: 10:36AM

$(“p#time”).slideDown(“slow”);

$(“p#time”).slideToggle(“slow”);

$(“p#time”)

Fade Animations

Time: p#time

10:36AM

span.label DOM

BROWSER

JQUERY

Time: 10:36AM

.fadeIn(“slow”);

$(“p#time”)

$(“p#time”).fadeToggle(“slow”);

.fadeOut(“slow”);

True ajax

sending or receiving contentvia XMLHttpRequest

fetch HTML content with the.load() function

Using load()

p.gate

span.number 26

span.label Gate

span.number

$(“span.number”)

JQUERY

[<span class=“number”>26</span>]

.load(“/flights/824/gate”);

Review

function name (parameters) {instructions}

Named functions

function (parameters) {instructions}

Anonymous functions

$(document).ready(function(){

Document Ready Wrapper

Review

$(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

Review

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

Review

$(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

Jquery Air Slides

Documents

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples€¦ · Praise for jQuery, jQuery UI, and jQuery Mobile “de Jonge and Dutson’s cookbook approach to jQuery, jQuery UI,

Lecture slides stats1.13.l16.air

API Jquery Com Jquery Ajax

Javascript jQuery jQuery Ui

jQuery, jQuery UI, and jQuery Mobile: Recipes -

Lecture slides stats1.13.l20.air

Lecture slides stats1.13.l18.air

jQuery 1.3 and jQuery UI

jQuery · 2013-07-09 · JQuery UI (JQuery Kullanıcı Arayüzü) JQuery etkileyici görsel bileşenler ve etkiler yapmak amacıyla oluşturulmuştur. Bunların çoğu ana Jquery

Jquery Air 2 Slides

Air Quality Slides Set

Jquery dojo slides

Advanced Business Applications for the Cloud: Pacific ...media.progress.com/exchange/2014/slides/workshop_rollbase-advan… · Custom UI Control – jQuery Plugin ... jQuery Plugin

Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence

jQuery & jQuery Mobile

JQuery Slides 01

JQuery JQuery JQuery JQuery JQuery

jQuery, jQuery UI et jQuery Mobileromagny13.com/wp-content/uploads/2015/04/jQuery-jQuery...Pour utiliser jQuery/jQuery UI/JQuery Mobile : Télécharger les sources sur le site ou packages

Lecture slides stats1.13.l23.air

Lecture slides stats1.13.l14.air