Cooking with jQuery

THE jOUERY COMPANY

http://appendto.com

Copyright © 2010 appendTo, LLC.

OSCON jQuery Training

Introduction to jQuery

THE jOUERY COMPANY


Introduction to jQuery
‣ The jQuery Project

‣ Including jQuery

‣ The jQuery Object

‣ Introduction to JavaScript

‣ Lifecycle of a Page

THE jOUERY COMPANY


The jQuery Project

THE jOUERY COMPANY


jQuery Project - jquery.org
(Software Freedom Conservancy)

jQuery Core jQuery UI

jquery.com jqueryUI.com

Sizzle JS QUnit

sizzlejs.com qunitjs.com

THE jOUERY COMPANY


‣ 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

THE jOUERY COMPANY


Including jQuery

THE jOUERY COMPANY


Locations
‣ http://code.jquery.com/jquery-1.4.2.min.js

‣ SSL vs. Non SSL?

‣ src=“//code.jquery.com/jquery-1.4.2.min.js”

THE jOUERY COMPANY


Source

Miniﬁed
THE jOUERY COMPANY


The jQuery Object
function jQuery(selector) {
...
}

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

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

THE jOUERY COMPANY


Introduction to JavaScript

THE jOUERY COMPANY


Introduction to JavaScript
‣ Script blocks

‣ Quotes and Whitespace

‣ Variables

‣ Functions

‣ Object-Hash

‣ Objects

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Quotes & Whitespace
// Single Quotes
var name = ‘John’;

// Double Quotes
var name = “John”;

// Whitespace

// Terminate statements with a semi colon;
// Will work, but bad practice!
var name = ‘John’

THE jOUERY COMPANY


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)

THE jOUERY COMPANY


Variables
// String

// Integer(number)
var age = 30;

// Array
var children = [‘Jane’, ‘Jimmy’];

// Boolean
var isMarried = true;

THE jOUERY COMPANY


Functions
function alertName() {
alert(‘Hello John’);
}

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

// Call the function
alertName(‘John’); //Hello John

THE jOUERY COMPANY


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

// Call the function
alertName(‘John’); //Hello John

THE jOUERY COMPANY


Variable Scope

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

...

myFunction(); //Name is John

THE jOUERY COMPANY


Variable Scope

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

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

person.introduceYourself(); //John is 30

THE jOUERY COMPANY


Lifecycle of a Page

THE jOUERY COMPANY


Lifecycle of a Page
‣ Initial HTTP Request

‣ Load Scripts, Stylesheets and Images

‣ Scripts block!

‣ Head ﬁrst style, scripts later

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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

$(document).ready(domIsReady);

THE jOUERY COMPANY


Page Load
<!doctype html>
<html><head>
function domIsReady() {
}
$(document).ready(domIsReady);
</script>
</head> <body>
<p>Hello world!</p>
</body></html>
THE jOUERY COMPANY


Page Load
<!doctype html>
<html><head>
</head><body>
<p>Hello world!</p>
</script>
</body>
</html>

THE jOUERY COMPANY


Questions?

THE jOUERY COMPANY


jQuery and Selectors

THE jOUERY COMPANY


jQuery and Selectors
‣ Selectors

‣ Compound Selectors

‣ Selecting by the API

‣ The Context Argument

THE jOUERY COMPANY


Selectors
// Select By ID

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

$(‘#foo’);

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

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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

$(“li”);

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

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Select By Relationship

THE jOUERY COMPANY


// Children by method
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>

$(“ul”).children();

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

THE jOUERY COMPANY


// Children by selector
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>

$(“ul > li”);

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


// Siblings by method
<div>
<p>Lorem Ipsum</p>
</div>

<div>
<p>Lorem Ipsum</p>
</div>

THE jOUERY COMPANY


// Parent by method
<div>
<p>Lorem Ipsum</p>
</div>

<div>
<p>Lorem Ipsum</p>
</div>

$(‘a’).parent();

THE jOUERY COMPANY


// Parent result

<div>
<p>Lorem Ipsum</p>
</div>

<div>
<p>Lorem Ipsum</p>
</div>

THE jOUERY COMPANY


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

THE jOUERY COMPANY


// Descendant by selector
<ul>
</ul>

$(“ul a”);

<ul>
</ul>

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


The Context
‣ Two different scoping methods

‣ $(‘selector’, this)

‣ $(this).ﬁnd(‘selector’)

‣ Can access context with the context property

‣ 1.3 and later

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


jQuery and Methods

THE jOUERY COMPANY


jQuery and Methods
‣ Do Something

‣ Showing and Hiding

‣ Iteration

‣ Styling

‣ Behavior

THE jOUERY COMPANY


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

// hides element by pulling it left

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


Showing and Hiding

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


Iteration

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Iteration
‣ The anonymous function

THE jOUERY COMPANY


The Anonymous Function
function foo() { ... }

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Styling

THE jOUERY COMPANY


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

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

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

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

THE jOUERY COMPANY


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




THE jOUERY COMPANY


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




THE jOUERY COMPANY


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




THE jOUERY COMPANY


Styling
<p>One</p>
<p>Two</p>
<p>Three</p>


$(‘p’).css(‘font-weight’,‘bold’);

$(‘p’).css({
color: ‘red’,
fontWeight: ‘bold’
});

THE jOUERY COMPANY


Styling
<p style=”color: red;”>One</p>
<p style=”color: red;”>Two</p>
<p style=”color: red;”>Three</p>


$(‘p’).css(‘font-weight’,‘bold’);
$(‘p’).css({
‘background-color’: ‘blue’,
fontWeight: ‘bold’,
border: ‘1px solid black’
});

THE jOUERY COMPANY


Behavior

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

// Add event
$(‘p’).click(function(event) {
});

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

THE jOUERY COMPANY


Chaining and Sentences

THE jOUERY COMPANY


Chaining and Sentences
‣ Method Chaining

‣ The Stack Architecture

‣ Finding vs. Filtering Elements

THE jOUERY COMPANY


Method Chaining

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

$(...)
.html()

THE jOUERY COMPANY


$(...)
.html(‘Hello world’) //non breaking

$(...)
.html()

THE jOUERY COMPANY


$(...)
.addClass(‘hello’) //class will be added

$(...)
.html()

THE jOUERY COMPANY


$(...)

$(...) //jQuery selector
.html()

THE jOUERY COMPANY


$(...)

$(...)
.html() //breaking

THE jOUERY COMPANY


$(...)

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

THE jOUERY COMPANY


//put getter last
var myHtml = $(...)
.html();

//store selection in variable
//when multiple getters
//are needed
var $mySelection = $(...);

var myHtml = $mySelection.html();

THE jOUERY COMPANY


The Stack Architecture

THE jOUERY COMPANY


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]

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Finding vs. Filtering

THE jOUERY COMPANY


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]

THE jOUERY COMPANY


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]

THE jOUERY COMPANY


Find vs. Filter
‣ ﬁnd() searches the DOM for descendants of elements in the current jQuery
wrapped collection

‣ ﬁlter() searches the current jQuery collection and returns a reduced set (sub set)

THE jOUERY COMPANY


jQuery and DOM Manipulation

THE jOUERY COMPANY


jQuery and DOM Manipulation
‣ Creating Elements

‣ Inserting Elements

‣ Removing Elements

‣ Cloning Elements

‣ Wrapping Elements

‣ Attributes

‣ Data

THE jOUERY COMPANY


Creating Elements

THE jOUERY COMPANY


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

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

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

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

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Inserting Elements

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Removing Elements

THE jOUERY COMPANY


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

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

// After
<div>
</div>

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Cloning Elements

THE jOUERY COMPANY


Cloning Elements
// Before
<div id=”source”> <strong>The Source</strong> </div>

// Copies the element instead of moving it
$(‘#source’).clone().appendTo(‘body’);

// After

THE jOUERY COMPANY


Cloning Elements
// Before

// Copies the element instead of moving it
$(‘#source’).clone(true).appendTo(‘body’);

// After

THE jOUERY COMPANY


Modifying Elements

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Attributes

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Element Contents
<div id=”header”>
<em>HEADER</em>
</div>

// Returns ‘<em>HEADER</em>
var theHtml = $(‘#header’).html();

$(‘#header’).html(‘<ul><li>One</li></ul>’);

<ul><li>One</li></ul>
</div>

THE jOUERY COMPANY


Element Contents
<em>HEADER</em>
</div>

// Returns ‘HEADER’
$(‘#header’).text();

$(‘#header’).text(‘<em>Hello world</em>’);

<em>Hello world</em>
</div>

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Data

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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;

THE jOUERY COMPANY


jQuery and Events

THE jOUERY COMPANY


jQuery and Events
‣ Binding Events

‣ Binding Multiple Events

‣ The Event Object

‣ Event Namespacing

‣ Event Propagation

THE jOUERY COMPANY


Binding Events

THE jOUERY COMPANY


jQuery Event Shortcuts
// Binding an event
$('a.tab').click(function(){
// event handling code
});

// Binding an event
$('a.tab').mouseover(function(){
});

THE jOUERY COMPANY


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

‣ mouseenter, mouseleave

‣ change, focus, blur

‣ keydown, keyup, keypress

‣ scroll, resize

THE jOUERY COMPANY


Hover Shortcut
// mouseenter, mouseleave

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

THE jOUERY COMPANY


Hover Shortcut
// mouseenter, mouseleave

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

THE jOUERY COMPANY


Hover Shortcut
// Optimal hover

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

THE jOUERY COMPANY


Hover Shortcut
// Optimal hover

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

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

THE jOUERY COMPANY


Binding Events with .bind()
// Binding an event

$('a.tab').bind('click',function(e){
});

// Unbinding an event

$('a.tab').unbind('click');

THE jOUERY COMPANY


Binding Events
// Bind an event to execute once

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

THE jOUERY COMPANY


Binding Multiple Events

THE jOUERY COMPANY


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

THE jOUERY COMPANY


$('a.tab').hover(
function(e){
$(this).addClass('highlight');
},
function(e){
$(this).removeClass('highlight');
}
);

// Unbind the hover event
$(‘a.tab’).unbind('mouseenter mouseleave')

THE jOUERY COMPANY


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


The Event Object

THE jOUERY COMPANY


The Event Object
‣ Event Object Properties

type pageX
timeStamp pageY

target data
relatedTarget result
currentTarget which

THE jOUERY COMPANY


The Event Object
‣ event.type
The name of the event (all lowercase)

‣ event.target
The element that the event originated at

‣ event.pageX, event.pageY
Coordinates in pixels of mouse position on page (not populated for key events)

THE jOUERY COMPANY


Event Namespacing

THE jOUERY COMPANY


Event Namespacing
‣ Tagging for event handlers

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

‣ Simpliﬁes unbinding of events

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Event Propagation

THE jOUERY COMPANY


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

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

alert(‘clicked!’);
});

THE jOUERY COMPANY


Event Propagation - Paragraph Tag
<div><p>
</p></div>

});

});

THE jOUERY COMPANY


Event Propagation - Paragraph Tag
<div><p>
</p></div>

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

});

THE jOUERY COMPANY


Event Propagation - Div Tag
<div id=”navigation”><p>
</p></div>

$(‘#navigation’).click(function(evt) {
// evt.target == anchor tag
// this = Reference to div DOM element
$(this).addClass(‘active’);
});

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

THE jOUERY COMPANY


Event Propagation - Stopping Prop.
<div><p>
</p></div>

});

return false;
});

THE jOUERY COMPANY


Event Propagation - Stopping Prop.
<div><p>
</p></div>

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

$(‘a’).click(function(evt) {
evt.stopPropagation();
evt.preventDefault();
return false; // Same as two lines above
});
THE jOUERY COMPANY


Event Propagation - Returning False
Stop events from bubbling
Prevent the default event action from occurring

THE jOUERY COMPANY


Live Events

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

// Assign the event
});

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

THE jOUERY COMPANY


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

// Assign the event
});

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

THE jOUERY COMPANY


Event Parameters

THE jOUERY COMPANY


Event Data - Event Object
// HTML
<p>One</p>

// Define the custom event
var foo = ‘bar’;
$(‘p’).bind(‘click’, {msg: foo},
function(evt){
alert(‘Parameter: ’+ evt.data.msg)
}
);

THE jOUERY COMPANY


jQuery and Ajax
Lesson 7

THE jOUERY COMPANY


jQuery and Ajax
‣ Request Types

‣ Data Formats

‣ Request Callbacks

‣ Making a Request

THE jOUERY COMPANY


Request Types

THE jOUERY COMPANY


Request Types
Core Method Shortcuts
‣ $.ajax(); ‣ $.get();

‣ $.post();

‣ $.getJSON();

‣ $.getScript();

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

THE jOUERY COMPANY


Data Formats

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Request Callbacks

THE jOUERY COMPANY


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

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

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

THE jOUERY COMPANY


Making a Request

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

THE jOUERY COMPANY


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

$.getJSON(url, function(json) {

// Iterate the items and generate HTML

});

THE jOUERY COMPANY


Thank you for coming!

http://appendTo.com
@appendTo

THE jOUERY COMPANY

Cooking with jQuery

More Related Content

Similar to Cooking with jQuery

Recently uploaded

Cooking with jQuery