View
6.137
Download
0
Embed Size (px)
DESCRIPTION
Slides from the Cooking with jQuery Tutorial Session at OSCON 2010
Citation preview
T H E j O U E R Y C O M P A N Y
Copyright © 2010 appendTo, LLC.
http://appendto.com
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to jQuery
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣The jQuery Project
‣ Including jQuery
‣The jQuery Object
‣ Introduction to JavaScript
‣ Lifecycle of a Page
Introduction to jQuery
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The jQuery Project
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery Core
jquery.com
jQuery UI
jqueryUI.com
Sizzle JS
sizzlejs.com
QUnit
qunitjs.com
jQuery Project - jquery.org(Software Freedom Conservancy)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣ jquery.com Downloading
‣api.jquery.com Documentation
‣ forum.jquery.com Community
‣meetups.jquery.com Local Community
‣plugins.jquery.com Extending
‣ jqueryui.com Project Supported UI Library
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Including jQuery
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣http://code.jquery.com/jquery-1.4.2.min.js
‣ SSL vs. Non SSL?
‣ src=“//code.jquery.com/jquery-1.4.2.min.js”
Locations
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Source
Minified
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The jQuery Objectfunction jQuery(selector) { ...}
// Select an element with jQueryjQuery(‘body’);
// Use the $ for brevityvar $ = jQuery;$(‘body’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to JavaScript
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to JavaScript‣ Script blocks
‣Quotes and Whitespace
‣Variables
‣ Functions
‣Object-Hash
‣Objects
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Script Blocks‣ Scripts can be included inline
‣<script type=”text/javascript”> // Your script here</script>
‣Or externally
‣<script src=”url-to-script.js” type=”text/javascript”></script>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Quotes & Whitespace// Single Quotesvar name = ‘John’;
// Double Quotesvar name = “John”;
// Whitespacevar name = ‘John’;
// Terminate statements with a semi colon;// Will work, but bad practice!var name = ‘John’
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variables‣Variable names may include a-zA-Z0-9_$ as valid characters
‣Variable scope is applied through the use of the var keyword
‣Variables have type:
‣object, number, string, boolean
‣array(object), function(object)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variables// Stringvar name = ‘John’;
// Integer(number)var age = 30;
// Arrayvar children = [‘Jane’, ‘Jimmy’];
// Booleanvar isMarried = true;
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Functionsfunction alertName() { alert(‘Hello John’);}
// Accept argumentsfunction alertName(name) { alert(‘Hello ‘ + name);}
// Call the functionalertName(‘John’); //Hello John
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Functions// Function assignmentvar alertName = function(name) { alert(‘Hello ‘ + name);}
// Call the functionalertName(‘John’); //Hello John
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variable Scopevar name = ‘John’;
function myFunction() { alert(‘Name is: ‘ + name);}
...
myFunction(); //Name is John
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variable Scopevar name = ‘John’;
function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name);}
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Object-hash (Object Literal)// Empty objectvar person = {};
// Object-hash may contain key/valuesvar person = { name: ‘John’, age: 30, children: [‘Jane’, ‘Jimmy’], isMarried: true};
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Objectvar person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); }};
person.introduceYourself(); //John is 30
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lifecycle of a Page
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lifecycle of a Page‣ Initial HTTP Request
‣ Load Scripts, Stylesheets and Images
‣ Scripts block!
‣Head first style, scripts later
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Page Load<!doctype html><html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script></head> <body> <p>Hello world!</p></body></html>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
DOM Ready// Callback functionfunction domIsReady() { $(‘body’).append(‘Hello world’); //magic}
$(document).ready(domIsReady);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Page Load<!doctype html><html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> function domIsReady() { $(‘p’).css(‘color’, ‘red’); //magic } $(document).ready(domIsReady); </script></head> <body> <p>Hello world!</p></body></html>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Page Load<!doctype html><html><head> <link href=”style.css” rel=”stylesheet” /></head><body><p>Hello world!</p><script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script></body></html>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Selectors
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣ Selectors
‣Compound Selectors
‣ Selecting by the API
‣The Context Argument
jQuery and Selectors
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selectors// Select By ID
<div id=”foo”></div><div></div>
$(‘#foo’);
<div id=”foo”></div><div></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selectors// Select by class
<div class=”myClass foo bar”></div><div class=”baz myClass”></div><div class=”bar”></div>
$(‘.myClass’)
<div class=”myClass foo bar”></div><div class=”baz myClass”></div><div class=”bar”></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selectors// Select by tag<ul><li>Apple</li><li>Pear</li></ul>
$(“li”);
<ul><li>Apple</li><li>Pear</li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Compound Selectors<p class=”important”></p><p></p><p class=”warning”></p><p class=”important warning”></p>
$(‘p.important,p.warning’);
<p class=”important”></p><p></p><p class=”warning”></p><p class=”important warning”></p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Compound Selectors‣As of 1.4+ elements are always returned in document order
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Children by method<ul><li>Fork</li><li>Spoon</li></ul>
$(“ul”).children();
<ul><li>Fork</li><li>Spoon</li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Children by selector<ul><li>Fork</li><li>Spoon</li></ul>
$(“ul > li”);
<ul><li>Fork</li><li>Spoon</li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Siblings by method<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>
<div><a href=’#’>another link</a><p>Lorem Ipsum</p></div>
$(‘a’).siblings();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Siblings by method<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>
<div><a href=’#’>another link</a><p>Lorem Ipsum</p></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Parent by method<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>
<div><a href=’#’>another link</a><p>Lorem Ipsum</p></div>
$(‘a’).parent();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Parent result
<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>
<div><a href=’#’>another link</a><p>Lorem Ipsum</p></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Descendant by method<ul><li>Fork <a href=’#’>Click to use</a></li><li>Spoon <a href=’#’>Click to use</a></li></ul>
$(“ul”).find(‘a’); //selector within find method
<ul><li>Fork <a href=’#’>Click to use</a></li><li>Spoon <a href=’#’>Click to use</a></li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship// Descendant by selector<ul><li>Fork <a href=’#’>Click to use</a></li><li>Spoon <a href=’#’>Click to use</a></li></ul>
$(“ul a”);
<ul><li>Fork <a href=’#’>Click to use</a></li><li>Spoon <a href=’#’>Click to use</a></li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selector Pitfalls//Over selection$(‘div#myId’); vs. $(‘#myId’);
//Under selection$(‘.randomClass’); vs. $(‘div.randomClass’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Context//Entire Document$(‘div’)
//Scope your selector//$(‘selector’, <context>)$(‘#table’).find(‘selector’)
$(‘a’).click(function() { $(‘span’, this)...});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Context‣Two different scoping methods
‣$(‘selector’, this)
‣$(this).find(‘selector’)
‣Can access context with the context property
‣1.3 and later
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Context Pitfallsvar $mySelection = $(‘selector’, ‘#myid’);var $mySelection.context = ?
var $mySelection2 = $(‘selector’, $(‘#myid’)[0]);var $mySelection2.context = ?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Methods
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Do Something
‣ Showing and Hiding
‣ Iteration
‣ Styling
‣Behavior
jQuery and Methods
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Do Something$('p').bind('click',function(){ $(this).effect('drop');});
// hides element by pulling it left
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Do Something<p>One</p><p>Two</p><p>Three</p>
// Find Something$(‘p’)// Do Something$(‘p’).hide();
// Generic Syntax$(‘p’) . <Method Name> ( [PARAMETERS] );
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Showing and Hiding
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Showing and Hiding// HTML<p>One</p><p>Two</p><p>Three</p>
// Show the elements$(‘p’).show();
// Hide the elements$(‘p’).hide();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Showing and Hiding// HTML<p>One</p><p>Two</p><p>Three</p>
// Show the elements$(‘p’).show();
// Hide the elements$(‘p’).hide();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Showing and Hiding// HTML<p>One</p><p>Two</p><p>Three</p>
// Show the elements$(‘p’).show();
// Hide the elements$(‘p’).hide();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration<p>One</p><p>Two</p><p>Three</p>
$(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); }});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration<p>One</p><p>Two</p><p>Three</p>
$(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); }});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration<p>One</p><p>Two</p><p>Three</p>
$(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); }});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration<p>One</p><p>Two</p><p>Three</p>
$(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); }});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration‣The anonymous function
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }var foo = function() { ... }//do this$(document).click(foo);
//dont do this$(document).click(foo());
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }var foo = function() { ... }$(document).click(foo);$(document).click(function() { ... });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration// HTML<p>One</p><p>Two</p><p>Three</p>
// Changes all elements returned // via Implicit Iteration$(‘p’).css(‘color’,‘red’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
“Each”itis AntiPattern// HTML<p>One</p><p>Two</p><p>Three</p>
// Changes all elements returned // via incredibly inefficient explicit iteration$(‘p’).each(function(i,v){ $(this).css(‘color’,‘red’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling// HTML<p>One</p><p class=”foo”>Two</p><p>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling// HTML<p class=”enabled”>One</p><p class=”enabled foo”>Two</p><p class=”enabled”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling// HTML<p class=”enabled”>One</p><p class=”enabled”>Two</p><p class=”enabled”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling// HTML<p class=”enabled foo”>One</p><p class=”enabled foo”>Two</p><p class=”enabled foo”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling<p>One</p><p>Two</p><p>Three</p>
$(‘p’).css(‘color’,‘red’);
$(‘p’).css(‘font-weight’,‘bold’);
$(‘p’).css({ color: ‘red’, fontWeight: ‘bold’});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling<p style=”color: red;”>One</p><p style=”color: red;”>Two</p><p style=”color: red;”>Three</p>
$(‘p’).css(‘color’,‘red’);
$(‘p’).css(‘font-weight’,‘bold’);$(‘p’).css({ ‘background-color’: ‘blue’, fontWeight: ‘bold’, border: ‘1px solid black’});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior// HTML<p>One</p><p>Two</p><p>Three</p>
$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior// HTML<p>One</p><p>Two</p><p>Three</p>
$(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’);}, function(event) { $(this).css(‘color’, ‘’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior// HTML<p>One</p><p>Two</p><p>Three</p>
// Add event$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});
// Remove event$(‘p’).unbind(‘click’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Chaining and Sentences
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Method Chaining
‣The Stack Architecture
‣ Finding vs. Filtering Elements
Chaining and Sentences
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() .addClass(‘hello’)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) //non breaking .addClass(‘hello’)
$(...) .html() .addClass(‘hello’)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added
$(...) .html() .addClass(‘hello’)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) //jQuery selector .html() .addClass(‘hello’)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() //breaking .addClass(‘hello’)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() .addClass(‘hello’) //runtime error
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//put getter lastvar myHtml = $(...) .addClass(‘hello’) .html();
//store selection in variable //when multiple getters//are neededvar $mySelection = $(...);
var myHtml = $mySelection.html();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Stack Architecture
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery Collections (Buckets) $(‘body’) [body]
.find(‘p’) [p, p, p] => [body]
.find(‘a’) [a, a] => [p, p, p] => [body]
.addClass(‘foo’)
.end() [p, p, p] => [body]
.end() [body]
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Finding vs. Filtering
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Finding Elements$(‘body’) [body]
.find(‘p’) [p, p, p] => [body]
.find(‘a’) [a, a] => [p, p, p] => [body]
.addClass(‘foo’)
.end() [p, p, p] => [body]
.end() [body]
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Filtering Elements$(‘a’) [a, a.foo, a]
.filter(‘.foo’) [a.foo] => [a, a.foo, a]
.attr(‘href’, ‘http://appendto.com’)
.end() [a, a.foo, a]
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Find vs. Filter‣find() searches the DOM for descendants of elements in the current jQuery
wrapped collection
‣filter() searches the current jQuery collection and returns a reduced set (sub set)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and DOM Manipulation
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Creating Elements
‣ Inserting Elements
‣Removing Elements
‣Cloning Elements
‣Wrapping Elements
‣Attributes
‣Data
jQuery and DOM Manipulation
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Creating Elements
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Creating Elements$(‘<div></div>’);
// Creates ...<div></div>
var ul = $(‘<ul><li>Hello</li></ul>’);
// Creates ...<ul> <li>Hello</li></ul>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Creating Elements// New in 1.4$("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); }});
// Clicking toggles the class<div class=”test”>Click me!</div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Inserting Elements
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Inserting Elements// Before<p>Apple</p><p>Orange</p>
$(‘p’).after(‘<img src=”logo.png” />’);
// After<p>Apple</p><img src=”logo.png /><p>Orange</p><img src=”logo.png />
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Inserting Elements// Before<p>Apple</p><p>Orange</p>
$(‘p’).before(‘<img src=”logo.png” />’);
// After<img src=”logo.png” /><p>Apple</p><img src=”logo.png” /><p>Orange</p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Inserting Elements// Before<p id=”apple”>Apple</p><p id=”orange”>Orange</p>
$(‘#apple’).prepend(‘<img src=”apple.png” />’);$(‘#orange’).append(‘<img src=”orange.png” />’);
// After<p id=”apple”><img src=”apple.png” />Apple</p><p id=”orange”>Orange<img src=”orange.png” /></p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
// Before<p id=”apple”>Apple</p><p id=”orange”>Orange</p>
$(‘<img src=”apple.png” />’).prependTo(‘#apple’);$(‘<img src=”orange.png” />’).appendTo(‘#orange’);
// After<p id=”apple”><img src=”apple.png” />Apple</p><p id=”orange”>Orange<img src=”orange.png” /></p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Element Creation Best Practice//Use object literal syntax for single (non-nested) element creation
//If creating nested elements use a single string //yes$(‘<div><a href=”url”>link text</a></div>’) .appendTo(‘body’);
//slower$(‘<a href=”url”>link text</a>’) .appendTo(‘<div>’) .appendTo(‘body’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Removing Elements
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Removing Elements// Before<div> <p>Red</p> <p>Green</p></div>
// Removing Elements Directly$(‘p’).remove();
// After<div></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Empty Elements// Before<div> <p><em>Red</em></p> <p><em>Green</em></p></div>
$(‘p’).empty();// After<div> <p></p> <p></p></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Detaching Elements// Before<div id=”container”> <p>Foo Bar</p></div>
var $bucket = $(‘p’).detach();$bucket.insertAfter(‘#container’);
// After<div id=”container></div><p>Foo Bar</p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cloning Elements
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cloning Elements// Before<div id=”source”> <strong>The Source</strong> </div>
// Copies the element instead of moving it$(‘#source’).clone().appendTo(‘body’);
// After<div id=”source”> <strong>The Source</strong> </div><div id=”source”> <strong>The Source</strong> </div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cloning Elements// Before<div id=”source”> <strong>The Source</strong> </div>
// Copies the element instead of moving it$(‘#source’).clone(true).appendTo(‘body’);
// After<div id=”source”> <strong>The Source</strong> </div><div id=”source”> <strong>The Source</strong> </div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Modifying Elements
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Wrapping Elements// Before<p>Hello world</p><p>Foo bar</p>
$(‘p’).wrap(‘<div></div>’);
// After<div><p>Hello world</p></div><div><p>Foo bar</p></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Wrapping Elements// Before<p>Hello world</p><p>Foo bar</p>
// As a group$(‘p’).wrapAll(‘<div></div>’);
// After<div><p>Hello world</p><p>Foo bar</p></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Wrapping Elements// Before<p>Hello world</p><p>Foo bar</p>
// Wrapping Children$(‘p’).wrapInner(‘<a href=”#”></a>’);
// After<p><a href=”#”>Hello world</a></p><p><a href=”#”>Foo bar</a></p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Unwrapping Elements (new in 1.4+)
// Before<div><p>Hello world</p></div><div><p>Foo bar</p></div>
//Individually$(‘p’).unwrap();
// After<p>Hello world</p><p>Foo bar</p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Attributes
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Before<img id=”logo” />
$(‘#logo’).attr(‘src’, ‘logo.png’);
// After<img id=”logo” src=”logo.png” />
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Markup<img id=”logo” title=”Hello world” />
var title = $(‘#logo’).attr(‘title’);//title === “Hello world”
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Before<img id=”logo” />
$(‘#logo’).attr({ src: ‘logo.png’, alt: ‘Company logo’});
// After<img id=”logo” src=”logo.png” alt=”Company logo” />
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Before<img id=”logo” src=”logo.png” alt=”Company logo” />
$(‘#logo’).attr(‘class’, function() { var c = [‘a’, ‘b’, ‘c’]; var r = Math.floor( Math.random() * 3 ); return c[r];});
// After (randomized class name)<img id=”logo” src=”logo.png” alt=”Company logo” class=”a” />
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Element Contents<div id=”header”> <em>HEADER</em></div>
// Returns ‘<em>HEADER</em>var theHtml = $(‘#header’).html();
$(‘#header’).html(‘<ul><li>One</li></ul>’);
<div id=”header”> <ul><li>One</li></ul></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Element Contents<div id=”header”> <em>HEADER</em></div>
// Returns ‘HEADER’$(‘#header’).text();
$(‘#header’).text(‘<em>Hello world</em>’);
<div id=”header”> <em>Hello world</em></div>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.val()<input id=”email” type=‘text’ value=‘foo bar’ />
// Returns ‘foo bar’$(‘#email’).val();
// Sets value to ‘The value’$(‘#email’).val(‘The value’);
<input id=”email” type=‘text’ value=‘The value’ />
$(‘select’).val([ ‘red’, ‘green’ ]);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data// HTML<div id=”myDiv”> <p>One</p></div>
// Potential for a Memory Leakvar elem = $(‘#myDiv’)[0];
elem.foo = new String(‘xyz’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data// HTML<div id=”myDiv”> <p>One</p></div>
// Cross Browser Safe Method to attach data$(‘#myDiv’).data(‘foo’, new String(‘xyz’));
var myVar = $(‘#myDiv’).data(‘foo’);
$(‘#myDiv’).removeData(‘foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data (new in 1.4+)
var object1 = { abc: 123 };var object2 = { xyz: 789 };
$(‘#myDiv’).data(‘object1’, object1);$(‘#myDiv’).data(‘object2’, object2);
var objects = $(‘#myDiv’).data();objects.object1;objects.object2;
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Binding Events
‣Binding Multiple Events
‣The Event Object
‣Event Namespacing
‣Event Propagation
jQuery and Events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery Event Shortcuts// Binding an event$('a.tab').click(function(){ // event handling code $(this).css(‘color’, ‘red’);});
// Binding an event$('a.tab').mouseover(function(){ // event handling code $(this).css(‘color’, ‘red’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Common Types of Events‣ click, dblclick, mouseover, mouseout
‣mouseenter, mouseleave
‣ change, focus, blur
‣keydown, keyup, keypress
‣ scroll, resize
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// mouseenter, mouseleave
$(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// mouseenter, mouseleave
$(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// Optimal hover
$(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// Optimal hover
$(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); });
$(‘li’) .bind(‘mouseenter mouseleave’,fn);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Events with .bind()// Binding an event
$('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’);});
// Unbinding an event
$('a.tab').unbind('click');
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Events// Bind an event to execute once
$('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Multiple Events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Multiple Events$(‘div’).bind(‘mouseover mouseout’, function(e) { if ( e.type == ‘mouseover’ ) { $(this).addClass('highlight'); } elseif ( e.type == ‘mouseout’ ) { $(this).removeClass('highlight'); } });
$(‘div’).unbind(‘mouseover mouseout’);$(‘div’).unbind();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Multiple Events$('a.tab').hover( function(e){ $(this).addClass('highlight'); }, function(e){ $(this).removeClass('highlight'); });
// Unbind the hover event$(‘a.tab’).unbind('mouseenter mouseleave')
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Multiple Events// Arbitrary number of functions to execute cyclically on click
$('a.tab').toggle( function(){ $(this).css('color','red'); }, function(){ $(this).css('color','yellow'); }, function(){ $(this).css('color','green'); });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object‣Event Object Properties
typetimeStamp
targetrelatedTargetcurrentTarget
pageXpageY
dataresultwhich
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object‣event.type
The name of the event (all lowercase)
‣event.targetThe element that the event originated at
‣event.pageX, event.pageYCoordinates in pixels of mouse position on page (not populated for key events)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Namespacing
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Namespacing‣Tagging for event handlers
‣Added in jQuery 1.2namespace post - http://bit.ly/aCaFXS
‣ Simplifies unbinding of events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Namespaced Events$(‘div’) .bind(‘click’, fn) .bind(‘click.foo’, fn) .bind(‘mouseover.foo’, fn);
// Unbind click.foo event$(‘div’).unbind(‘click.foo’);
// Unbind all .foo namespaced events// click.foo, mouseover.foo$(‘div’).unbind(‘.foo’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Anchor Tag<div><p> <a href=”#”>Link</a></p></div>
$(‘div’).click(function() { alert(‘clicked div!’);});
$(‘a’).click(function() { alert(‘clicked!’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Paragraph Tag<div><p> <a href=”#”>Link</a></p></div>
$(‘div’).click(function() { alert(‘clicked div!’);});
$(‘a’).click(function() { alert(‘clicked!’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Paragraph Tag<div><p> <a href=”#”>Link</a></p></div>
$(‘div’).click(function(evt) { // evt.target == a alert(‘clicked div!’);});
$(‘a’).click(function() { alert(‘clicked!’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Div Tag<div id=”navigation”><p> <a href=”#”>Link</a></p></div>
$(‘#navigation’).click(function(evt) { // evt.target == anchor tag alert(‘clicked div!’); // this = Reference to div DOM element $(this).addClass(‘active’);});
$(‘a’).click(function() { alert(‘clicked!’); });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Stopping Prop.<div><p> <a href=”#”>Link</a></p></div>
$(‘div’).click(function() { alert(‘clicked div!’);});
$(‘a’).click(function() { alert(‘clicked!’); return false;});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Stopping Prop.<div><p> <a href=”#”>Link</a></p></div>
$(‘div’).click(function() { alert(‘clicked div!’); });
$(‘a’).click(function(evt) { alert(‘clicked!’); evt.stopPropagation(); evt.preventDefault(); return false; // Same as two lines above});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Returning FalseStop events from bubblingPrevent the default event action from occurring
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live Events
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live Events - Binding// Before<p>One</p>
// Code$(‘p’).live(‘click’,function() { alert(‘P Pressed’) });$(‘<p />’).text(‘Two’).appendTo(‘body’);
// After<p>One</p><p>Two</p>
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live Events - Unbinding// Remove with .die()$(‘p’).die();
// .die() also accepts an event type$(‘p’).die(‘click’);
// Namespace Example$(‘p’).die(‘click.one’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live Events - Namespacing// .live() performs just like .bind()$(‘p’).live(‘click dblclick’, function(e){ if(e.type == ‘click’) { ... }});
// .live() can take namespaced events$(‘p’).live(‘click.one’,function(e) { alert(‘Click.one’);});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live and delegate//1.4+ - live events can be given a context$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); });});
//delegate is short hand method for this best//practice pattern$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover");});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Triggering Events// HTML<p>One</p>
// Assign the event$(‘p’).live(‘click’,function() { alert(‘P Pressed’) });
// Trigger the event manually$(‘p’).trigger(‘click’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Triggering Events// HTML<p>One</p>
// Assign the event$(‘p’).live(‘click’,function() { alert(‘P Pressed’) });
// Some Event types have shortcuts$(‘p’).click();
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Parameters
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Data - Event Object// HTML<p>One</p>
// Define the custom eventvar foo = ‘bar’;$(‘p’).bind(‘click’, {msg: foo}, function(evt){ alert(‘Parameter: ’+ evt.data.msg) });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lesson 7
jQuery and Ajax
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Request Types
‣Data Formats
‣Request Callbacks
‣Making a Request
jQuery and Ajax
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Types
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Types
‣$.ajax(); ‣$.get();
‣$.post();
‣$.getJSON();
‣$.getScript();
‣$( ... ).load();
ShortcutsCore Method
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data Formats
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data Formats‣xml Returned as DOM
‣html Returned as String
‣ json Returned as Object
‣ jsonp Returned as Object
‣ text Returned as String
‣ script Evaluated & Returned as String
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Callbacks
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Callbacks‣ success: function(data, status, XMLHttpRequest) { ... }
‣error: function(XMLHttpRequest, textStatus, error) { ... }
‣ complete: function(XMLHttpRequest, status) { ... }
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request$.get(‘page.php’, function(data) { $(data).appendTo(‘body’);}, ‘html’);
var data = { fname: ‘Andrew’, lname: ‘Wirick’ };$.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’);}, ‘html’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request JSON// Response{“names”: [“Jonathan”, “Mike”, “Andrew”], “states”: {“NE” : “Nebraska”}, “year” : “2010” }
$.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE );});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request JSON// Response{ “names”: [“Jonathan”, “Mike”, “Andrew”] }
$.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); });});
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request XML// Response<movies><movie id=”123”><title>Back to the future</title></movie></movies>
$.get(‘movies.php’, function(xml) { var title = $(xml) .find(‘movie[id=123] > title’) .text(); $(‘body’).append( title );}, ‘xml’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request XML// Response<document><![CDATA[ <h1>Some data</h1>]]></document>
$.get(‘movies.php’, function(root) { var title = $(root) .find(‘document’) .text(); $(‘body’).append( title );}, ‘xml’);
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cross Domain Requestsvar url = ‘http://flickr.com...’;
$.getJSON(url, function(json) { // Iterate the items and generate HTML });
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
http://appendTo.com@appendTo
Thank you for coming!