cooking with jquery

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

http://appendto.com

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

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

$(‘#foo’);

Selectors// Select by class

$(‘.myClass’)

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

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]

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

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

$(‘select’).val([ ‘red’, ‘green’ ]);

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>

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

‣$.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 });

Questions?

http://appendTo.com@appendTo

Thank you for coming!

cooking with jquery

Technology

introdução às bibliotecas jquery/ jquery ui

cooking with jquery @ oscon 2010

bootstrap and jquery -...

opscode webinar: cooking with chef on microsoft windows

jquery · 2013-07-09 · jquery ui (jquery kullanıcı...

cooking with rosanna - rassegna stampa a cura di giuseppe...

cooking up fun with preschool - agclassroom.org · cooking...

cooking with the rest(jes)

jquery . jquery versione di sviluppo (jquery-x.y.js)...

inhaltsverzeichnis „jquery“ -...

microwave oven • kombi-mikrowelle • four ...6. cooking...

(jquery fundamentals) fundamentos de jquery · métodos do...

cooking with cold pressed oils

migrating from desktop to web with ignite ui - jquery /...

jquery with asp.net bab i iiii jquery ui interaksi

type 66m - olieovne fra refleks · type 66m the small stove...

för anmälan och mer information: 0410-184 25 | sv.se...

microwave oven • kombi-mikrowelle • four micro-ondes...

cooking with bechamel

cooking with bechamel1