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

Recommended

Recommended

More Related Content

Similar to Cooking with jQuery

Similar to Cooking with jQuery (20)

Recently uploaded

Recently uploaded (20)

Cooking with jQuery