the jouery company - o'reilly mediaassets.en.oreilly.com/1/event/45/cooking with jquery...

T H E j O U E R Y C O M P A N Y

Copyright © 2010 appendTo, LLC.

http://appendto.com

http://appendto.com

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



‣The jQuery Project

‣ Including jQuery

‣The jQuery Object

‣ Introduction to JavaScript

‣ Lifecycle of a Page

Introduction to jQuery



The jQuery Project



jQuery Core

jquery.com

jQuery UI

jqueryUI.com

Sizzle JS

sizzlejs.com

QUnit

qunitjs.com

jQuery Project - jquery.org(Software Freedom Conservancy)



‣ 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



Including jQuery



‣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



Source

Minified



The jQuery Objectfunction jQuery(selector) { ...}

// Select an element with jQueryjQuery(‘body’);

// Use the $ for brevityvar $ = jQuery;$(‘body’);



Introduction to JavaScript



Introduction to JavaScript‣ Script blocks

‣Quotes and Whitespace

‣Variables

‣ Functions

‣Object-Hash

‣Objects



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>



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’



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)



Variables// Stringvar name = ‘John’;

// Integer(number)var age = 30;

// Arrayvar children = [‘Jane’, ‘Jimmy’];

// Booleanvar isMarried = true;



Functionsfunction alertName() { alert(‘Hello John’);}

// Accept argumentsfunction alertName(name) { alert(‘Hello ‘ + name);}

// Call the functionalertName(‘John’); //Hello John



Functions// Function assignmentvar alertName = function(name) { alert(‘Hello ‘ + name);}

// Call the functionalertName(‘John’); //Hello John



Variable Scopevar name = ‘John’;

function myFunction() { alert(‘Name is: ‘ + name);}

...

myFunction(); //Name is John



Variable Scopevar name = ‘John’;

function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name);}



Object-hash (Object Literal)// Empty objectvar person = {};

// Object-hash may contain key/valuesvar person = { name: ‘John’, age: 30, children: [‘Jane’, ‘Jimmy’], isMarried: true};



Objectvar person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); }};

person.introduceYourself(); //John is 30



Lifecycle of a Page



Lifecycle of a Page‣ Initial HTTP Request

‣ Load Scripts, Stylesheets and Images

‣ Scripts block!

‣Head first style, scripts later



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>



DOM Ready// Callback functionfunction domIsReady() { $(‘body’).append(‘Hello world’); //magic}

$(document).ready(domIsReady);



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>



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>



Questions?



jQuery and Selectors



‣ Selectors

‣Compound Selectors

‣ Selecting by the API

‣The Context Argument

jQuery and Selectors



Selectors// Select By ID

<div id=”foo”></div><div></div>

$(‘#foo’);

<div id=”foo”></div><div></div>



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>



Selectors// Select by tag<ul><li>Apple</li><li>Pear</li></ul>

$(“li”);

<ul><li>Apple</li><li>Pear</li></ul>



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>



Compound Selectors‣As of 1.4+ elements are always returned in document order



Select By Relationship



Select By Relationship// Children by method<ul><li>Fork</li><li>Spoon</li></ul>

$(“ul”).children();

<ul><li>Fork</li><li>Spoon</li></ul>



Select By Relationship// Children by selector<ul><li>Fork</li><li>Spoon</li></ul>

$(“ul > li”);

<ul><li>Fork</li><li>Spoon</li></ul>



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



Select By Relationship// Siblings by method<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>




Select By Relationship// Parent by method<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>


$(‘a’).parent();



Select By Relationship// Parent result

<div><a href=’#’>link</a><p>Lorem Ipsum</p></div>




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>



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>



Selector Pitfalls//Over selection$(‘div#myId’); vs. $(‘#myId’);

//Under selection$(‘.randomClass’); vs. $(‘div.randomClass’);



The Context//Entire Document$(‘div’)

//Scope your selector//$(‘selector’, <context>)$(‘#table’).find(‘selector’)

$(‘a’).click(function() { $(‘span’, this)...});



The Context‣Two different scoping methods

‣$(‘selector’, this)

‣$(this).find(‘selector’)

‣Can access context with the context property

‣1.3 and later



Context Pitfallsvar $mySelection = $(‘selector’, ‘#myid’);var $mySelection.context = ?

var $mySelection2 = $(‘selector’, $(‘#myid’)[0]);var $mySelection2.context = ?



Questions?



jQuery and Methods



‣Do Something

‣ Showing and Hiding

‣ Iteration

‣ Styling

‣Behavior

jQuery and Methods



Do Something$('p').bind('click',function(){ $(this).effect('drop');});

// hides element by pulling it left



Do Something<p>One</p><p>Two</p><p>Three</p>

// Find Something$(‘p’)// Do Something$(‘p’).hide();

// Generic Syntax$(‘p’) . <Method Name> ( [PARAMETERS] );



Showing and Hiding



Showing and Hiding// HTML<p>One</p><p>Two</p><p>Three</p>

// Show the elements$(‘p’).show();

// Hide the elements$(‘p’).hide();



Iteration



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(); }});



Iteration‣The anonymous function



The Anonymous Functionfunction foo() { ... }



The Anonymous Functionfunction foo() { ... }var foo = function() { ... }//do this$(document).click(foo);

//dont do this$(document).click(foo());



The Anonymous Functionfunction foo() { ... }var foo = function() { ... }$(document).click(foo);$(document).click(function() { ... });



Iteration// HTML<p>One</p><p>Two</p><p>Three</p>

// Changes all elements returned // via Implicit Iteration$(‘p’).css(‘color’,‘red’);



“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’);});



Styling



Styling// HTML<p>One</p><p class=”foo”>Two</p><p>Three</p>

$(‘p’).addClass(‘enabled’);

$(‘p’).removeClass(‘foo’);

$(‘p’).toggleClass(‘foo’);



Styling// HTML<p class=”enabled”>One</p><p class=”enabled foo”>Two</p><p class=”enabled”>Three</p>






Styling// HTML<p class=”enabled”>One</p><p class=”enabled”>Two</p><p class=”enabled”>Three</p>






Styling// HTML<p class=”enabled foo”>One</p><p class=”enabled foo”>Two</p><p class=”enabled foo”>Three</p>






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’});



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’});



Behavior



Behavior// HTML<p>One</p><p>Two</p><p>Three</p>

$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});




$(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’);}, function(event) { $(this).css(‘color’, ‘’);});




// Add event$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});

// Remove event$(‘p’).unbind(‘click’);



Questions?



Chaining and Sentences



‣Method Chaining

‣The Stack Architecture

‣ Finding vs. Filtering Elements

Chaining and Sentences



Method Chaining



Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});



What Breaks the Chain?//Getters vs. Setters$(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’)

$(...) .html() .addClass(‘hello’)



What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) //non breaking .addClass(‘hello’)




What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added




What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)

$(...) //jQuery selector .html() .addClass(‘hello’)




$(...) .html() //breaking .addClass(‘hello’)




$(...) .html() .addClass(‘hello’) //runtime error



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



The Stack Architecture



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]



Method Chaining$(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’);



Finding vs. Filtering



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]



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]

http://appendto.com

http://appendto.com



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)



Questions?



jQuery and DOM Manipulation



‣Creating Elements

‣ Inserting Elements

‣Removing Elements

‣Cloning Elements

‣Wrapping Elements

‣Attributes

‣Data

jQuery and DOM Manipulation



Creating Elements



Creating Elements$(‘<div></div>’);

// Creates ...<div></div>

var ul = $(‘<ul><li>Hello</li></ul>’);

// Creates ...<ul> <li>Hello</li></ul>



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>



Inserting Elements



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



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>



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>



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



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



Removing Elements



Removing Elements// Before<div> <p>Red</p> <p>Green</p></div>

// Removing Elements Directly$(‘p’).remove();

// After<div></div>



Empty Elements// Before<div> <p><em>Red</em></p> <p><em>Green</em></p></div>

$(‘p’).empty();// After<div> <p></p> <p></p></div>



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>



Cloning Elements



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>



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>



Modifying Elements



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>




// As a group$(‘p’).wrapAll(‘<div></div>’);

// After<div><p>Hello world</p><p>Foo bar</p></div>




// Wrapping Children$(‘p’).wrapInner(‘<a href=”#”></a>’);

// After<p><a href=”#”>Hello world</a></p><p><a href=”#”>Foo bar</a></p>



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>



Attributes



.attr()// Before<img id=”logo” />

$(‘#logo’).attr(‘src’, ‘logo.png’);

// After<img id=”logo” src=”logo.png” />



.attr()// Markup<img id=”logo” title=”Hello world” />

var title = $(‘#logo’).attr(‘title’);//title === “Hello world”



.attr()// Before<img id=”logo” />

$(‘#logo’).attr({ src: ‘logo.png’, alt: ‘Company logo’});

// After<img id=”logo” src=”logo.png” alt=”Company logo” />



.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” />



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>



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>



.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’ ]);



Data



Data// HTML<div id=”myDiv”> <p>One</p></div>

// Potential for a Memory Leakvar elem = $(‘#myDiv’)[0];

elem.foo = new String(‘xyz’);



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



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;



Questions?



jQuery and Events



‣Binding Events

‣Binding Multiple Events

‣The Event Object

‣Event Namespacing

‣Event Propagation

jQuery and Events



Binding Events



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’);});



Common Types of Events‣ click, dblclick, mouseover, mouseout

‣mouseenter, mouseleave

‣ change, focus, blur

‣keydown, keyup, keypress

‣ scroll, resize



Hover Shortcut// mouseenter, mouseleave

$(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); });



Hover Shortcut// mouseenter, mouseleave

$(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); });



Hover Shortcut// Optimal hover

$(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); });



Hover Shortcut// Optimal hover

$(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); });

$(‘li’) .bind(‘mouseenter mouseleave’,fn);



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



Binding Events// Bind an event to execute once

$('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’);});



Binding Multiple Events



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



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')



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'); });



The Event Object



The Event Object‣Event Object Properties

typetimeStamp

targetrelatedTargetcurrentTarget

pageXpageY

dataresultwhich



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)



Event Namespacing



Event Namespacing‣Tagging for event handlers

‣Added in jQuery 1.2namespace post - http://bit.ly/aCaFXS

‣ Simplifies unbinding of events



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



Event Propagation



Event Propagation - Anchor Tag<div><p> <a href=”#”>Link</a></p></div>

$(‘div’).click(function() { alert(‘clicked div!’);});

$(‘a’).click(function() { alert(‘clicked!’);});



Event Propagation - Paragraph Tag<div><p> <a href=”#”>Link</a></p></div>





Event Propagation - Paragraph Tag<div><p> <a href=”#”>Link</a></p></div>

$(‘div’).click(function(evt) { // evt.target == a alert(‘clicked div!’);});




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



Event Propagation - Stopping Prop.<div><p> <a href=”#”>Link</a></p></div>


$(‘a’).click(function() { alert(‘clicked!’); return false;});



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



Event Propagation - Returning FalseStop events from bubblingPrevent the default event action from occurring



Live Events



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>



Live Events - Unbinding// Remove with .die()$(‘p’).die();

// .die() also accepts an event type$(‘p’).die(‘click’);

// Namespace Example$(‘p’).die(‘click.one’);



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’);});



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");});



Triggering Events// HTML<p>One</p>

// Assign the event$(‘p’).live(‘click’,function() { alert(‘P Pressed’) });

// Trigger the event manually$(‘p’).trigger(‘click’);



Triggering Events// HTML<p>One</p>

// Assign the event$(‘p’).live(‘click’,function() { alert(‘P Pressed’) });

// Some Event types have shortcuts$(‘p’).click();



Event Parameters



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



Questions?



Lesson 7

jQuery and Ajax



‣Request Types

‣Data Formats

‣Request Callbacks

‣Making a Request

jQuery and Ajax



Request Types



Request Types

‣$.ajax(); ‣$.get();

‣$.post();

‣$.getJSON();

‣$.getScript();

‣$( ... ).load();

ShortcutsCore Method



Data Formats



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



Request Callbacks



Request Callbacks‣ success: function(data, status, XMLHttpRequest) { ... }

‣error: function(XMLHttpRequest, textStatus, error) { ... }

‣ complete: function(XMLHttpRequest, status) { ... }



Making a Request



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



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



Making a Request JSON// Response{ “names”: [“Jonathan”, “Mike”, “Andrew”] }

$.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); });});



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



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



Cross Domain Requestsvar url = ‘http://flickr.com...’;

$.getJSON(url, function(json) { // Iterate the items and generate HTML });

http://flickr.com

http://flickr.com



Questions?



http://appendTo.com@appendTo

Thank you for coming!

http://appendTo.com

http://appendTo.com

the jouery company - o'reilly mediaassets.en.oreilly.com/1/event/45/cooking with jquery...

Documents