THE jOUERY COMPANY




                                  http://appendto.com




Copyright © 2010 appendTo, LLC.
OSCON jQuery Training




                        Introduction to jQuery




 Copyright © 2010 appendTo, LLC.
            ...
OSCON jQuery Training



                        Introduction to jQuery
‣ The jQuery Project

‣ Including jQuery

‣ The jQ...
OSCON jQuery Training




                         The jQuery Project




 Copyright © 2010 appendTo, LLC.
               ...
OSCON jQuery Training




                                       jQuery Project - jquery.org
                             ...
OSCON jQuery Training




‣ jquery.com        Downloading


‣ api.jquery.com          Documentation


‣ forum.jquery.com  ...
OSCON jQuery Training




                               Including jQuery




 Copyright © 2010 appendTo, LLC.
           ...
OSCON jQuery Training



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

‣ SSL...
OSCON jQuery Training



                                   Source




                     Minified
 Copyright © 2010 appe...
OSCON jQuery Training




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

// Select a...
OSCON jQuery Training




              Introduction to JavaScript




 Copyright © 2010 appendTo, LLC.
                  ...
OSCON jQuery Training



                  Introduction to JavaScript
‣ Script blocks

‣ Quotes and Whitespace

‣ Variable...
OSCON jQuery Training



                                    Script Blocks
‣ Scripts can be included inline

‣ <script typ...
OSCON jQuery Training




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

// Double Quot...
OSCON jQuery Training



                                    Variables
‣ Variable names may include a-zA-Z0-9_$ as valid c...
OSCON jQuery Training




                                   Variables
// String
var name = ‘John’;

// Integer(number)
va...
OSCON jQuery Training




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

...
OSCON jQuery Training




                                   Functions
// Function assignment
var alertName = function(nam...
OSCON jQuery Training




                                   Variable Scope
var name = ‘John’;

function myFunction() {
  ...
OSCON jQuery Training




                                   Variable Scope
var name = ‘John’;

function myFunction() {
  ...
OSCON jQuery Training




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

// Object-hash may c...
OSCON jQuery Training




                                   Object
var person = {
    name: ‘John’,
    age: 30,
    intr...
OSCON jQuery Training




                            Lifecycle of a Page




 Copyright © 2010 appendTo, LLC.
           ...
OSCON jQuery Training



                               Lifecycle of a Page
‣ Initial HTTP Request

‣ Load Scripts, Styles...
OSCON jQuery Training




                                   Page Load
<!doctype html>
<html><head>
    <link href=”style....
OSCON jQuery Training




                                   DOM Ready
// Callback function
function domIsReady() {
  $(‘b...
OSCON jQuery Training




                                   Page Load
<!doctype html>
<html><head>
    <link href=”style....
OSCON jQuery Training




                                   Page Load
<!doctype html>
<html><head>
    <link href=”style....
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                          jQuery and Selectors




 Copyright © 2010 appendTo, LLC.
            ...
OSCON jQuery Training



                           jQuery and Selectors
‣ Selectors

‣ Compound Selectors

‣ Selecting by...
OSCON jQuery Training




                                   Selectors
// Select By ID

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

...
OSCON jQuery Training




                                   Selectors
// Select by class

<div class=”myClass foo bar”></...
OSCON jQuery Training




                                   Selectors
// Select by tag
<ul>
<li>Apple</li>
<li>Pear</li>
...
OSCON jQuery Training




                          Compound Selectors
<p class=”important”></p>
<p></p>
<p class=”warning...
OSCON jQuery Training



                           Compound Selectors
‣ As of 1.4+ elements are always returned in docume...
OSCON jQuery Training




                        Select By Relationship




 Copyright © 2010 appendTo, LLC.
            ...
OSCON jQuery Training




                        Select By Relationship
// Children by method
<ul>
<li>Fork</li>
<li>Spoo...
OSCON jQuery Training




                        Select By Relationship
// Children by selector
<ul>
<li>Fork</li>
<li>Sp...
OSCON jQuery Training




                        Select By Relationship
// Siblings by method
<div>
<a href=’#’>link</a>
...
OSCON jQuery Training




                        Select By Relationship
// Siblings by method
<div>
<a href=’#’>link</a>
...
OSCON jQuery Training




                        Select By Relationship
// Parent by method
<div>
<a href=’#’>link</a>
<p...
OSCON jQuery Training




                        Select By Relationship
// Parent result

<div>
<a href=’#’>link</a>
<p>L...
OSCON jQuery Training




                        Select By Relationship
// Descendant by method
<ul>
<li>Fork <a href=’#’...
OSCON jQuery Training




                        Select By Relationship
// Descendant by selector
<ul>
<li>Fork <a href=’...
OSCON jQuery Training




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




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

//Scope your selector...
OSCON jQuery Training



                                    The Context
‣ Two different scoping methods

‣ $(‘selector’, ...
OSCON jQuery Training




                                   Context Pitfalls
var $mySelection = $(‘selector’, ‘#myid’);
v...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                           jQuery and Methods




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training



                           jQuery and Methods
‣ Do Something

‣ Showing and Hiding

‣ Iteration

...
OSCON jQuery Training




                                   Do Something
$('p').bind('click',function(){
    $(this).effe...
OSCON jQuery Training




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

// Find Some...
OSCON jQuery Training




                         Showing and Hiding




 Copyright © 2010 appendTo, LLC.
               ...
OSCON jQuery Training




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

// Sho...
OSCON jQuery Training




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

// Sho...
OSCON jQuery Training




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

// Sho...
OSCON jQuery Training




                                   Iteration




 Copyright © 2010 appendTo, LLC.
              ...
OSCON jQuery Training




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

$(‘p’).each(fun...
OSCON jQuery Training




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

$(‘p’).each(fun...
OSCON jQuery Training




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

$(‘p’).each(fun...
OSCON jQuery Training




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

$(‘p’).each(fun...
OSCON jQuery Training



                                    Iteration
‣ The anonymous function




  Copyright © 2010 app...
OSCON jQuery Training




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




 Copyright © 2010 appendTo, L...
OSCON jQuery Training




                 The Anonymous Function
function foo() { ... }
var foo = function() { ... }
//do...
OSCON jQuery Training




                 The Anonymous Function
function foo() { ... }
var foo = function() { ... }
$(do...
OSCON jQuery Training




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

// Chan...
OSCON jQuery Training




                         “Each”itis AntiPattern
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

// C...
OSCON jQuery Training




                                   Styling




 Copyright © 2010 appendTo, LLC.
                ...
OSCON jQuery Training




                                   Styling
// HTML
<p>One</p>
<p class=”foo”>Two</p>
<p>Three</p...
OSCON jQuery Training




                                   Styling
//     HTML
<p     class=”enabled”>One</p>
<p     cla...
OSCON jQuery Training




                                   Styling
//     HTML
<p     class=”enabled”>One</p>
<p     cla...
OSCON jQuery Training




                                   Styling
//     HTML
<p     class=”enabled foo”>One</p>
<p    ...
OSCON jQuery Training




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

$(‘p’).css(‘color...
OSCON jQuery Training




                                   Styling
<p style=”color: red;”>One</p>
<p style=”color: red;”...
OSCON jQuery Training




                                   Behavior




 Copyright © 2010 appendTo, LLC.
               ...
OSCON jQuery Training




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

$(‘p’).c...
OSCON jQuery Training




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

$(‘p’).h...
OSCON jQuery Training




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

// Add e...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                      Chaining and Sentences




 Copyright © 2010 appendTo, LLC.
              ...
OSCON jQuery Training



                     Chaining and Sentences
‣ Method Chaining

‣ The Stack Architecture

‣ Findin...
OSCON jQuery Training




                              Method Chaining




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                                   Method Chaining
$(‘#myForm a’)
  .addClass(‘.highlight’)
  .c...
OSCON jQuery Training




                                   Method Chaining
$(‘#myForm a’)
  .addClass(‘.highlight’)
  .c...
OSCON jQuery Training




                                   Method Chaining
$(‘#myForm a’)
  .addClass(‘.highlight’)
  .c...
OSCON jQuery Training




                                   Method Chaining
$(‘#myForm a’)
  .addClass(‘.highlight’)
  .c...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...) //jQuery selector
  .ht...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...)
  .html(‘Hello world’) ...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...)
  .html(‘Hello world’)
...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...)
  .html(‘Hello world’)
...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...)
  .html(‘Hello world’)
...
OSCON jQuery Training




                     What Breaks the Chain?
//Getters vs. Setters
$(...)
  .html(‘Hello world’)
...
OSCON jQuery Training




                     What Breaks the Chain?
//put getter last
var myHtml = $(...)
  .addClass(‘h...
OSCON jQuery Training




                   The Stack Architecture




 Copyright © 2010 appendTo, LLC.
                 ...
OSCON jQuery Training




                     jQuery Collections              (Buckets)


$(‘body’)                      ...
OSCON jQuery Training




                                   Method Chaining
$(‘tr’)
   .filter(‘:odd’)
      .addClass(‘o...
OSCON jQuery Training




                            Finding vs. Filtering




 Copyright © 2010 appendTo, LLC.
         ...
OSCON jQuery Training




                                   Finding Elements
$(‘body’)                             [body]...
OSCON jQuery Training




                              Filtering Elements
$(‘a’)                             [a, a.foo, a...
OSCON jQuery Training



                                    Find vs. Filter
‣ find() searches the DOM for descendants of e...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




         jQuery and DOM Manipulation




 Copyright © 2010 appendTo, LLC.
                      ...
OSCON jQuery Training



          jQuery and DOM Manipulation
‣ Creating Elements

‣ Inserting Elements

‣ Removing Eleme...
OSCON jQuery Training




                            Creating Elements




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




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

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

v...
OSCON jQuery Training




                              Creating Elements
// New in 1.4
$("<div/>", {
  class: "test",
  t...
OSCON jQuery Training




                            Inserting Elements




 Copyright © 2010 appendTo, LLC.
            ...
OSCON jQuery Training




                             Inserting Elements
// Before
<p>Apple</p>
<p>Orange</p>

$(‘p’).aft...
OSCON jQuery Training




                             Inserting Elements
// Before
<p>Apple</p>
<p>Orange</p>

$(‘p’).bef...
OSCON jQuery Training




                             Inserting Elements
// Before
<p id=”apple”>Apple</p>
<p id=”orange”...
OSCON jQuery Training




// Before
<p id=”apple”>Apple</p>
<p id=”orange”>Orange</p>

$(‘<img src=”apple.png” />’).prepen...
OSCON jQuery Training




        Element Creation Best Practice
//Use object literal syntax for single (non-nested)
eleme...
OSCON jQuery Training




                         Removing Elements




 Copyright © 2010 appendTo, LLC.
                ...
OSCON jQuery Training




                            Removing Elements
// Before
<div>
  <p>Red</p>
  <p>Green</p>
</div>...
OSCON jQuery Training




                                   Empty Elements
// Before
<div>
  <p><em>Red</em></p>
  <p><em...
OSCON jQuery Training




                           Detaching Elements
// Before
<div id=”container”>
  <p>Foo Bar</p>
</...
OSCON jQuery Training




                             Cloning Elements




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                               Cloning Elements
// Before
<div id=”source”> <strong>The Source</...
OSCON jQuery Training




                               Cloning Elements
// Before
<div id=”source”> <strong>The Source</...
OSCON jQuery Training




                          Modifying Elements




 Copyright © 2010 appendTo, LLC.
              ...
OSCON jQuery Training




                            Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>

$(‘p’...
OSCON jQuery Training




                            Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>

// As...
OSCON jQuery Training




                            Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>

// Wr...
OSCON jQuery Training




            Unwrapping Elements    (new in 1.4+)


// Before
<div><p>Hello world</p></div>
<div>...
OSCON jQuery Training




                                   Attributes




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




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

$(‘#logo’).attr(‘src’, ‘...
OSCON jQuery Training




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

var ...
OSCON jQuery Training




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

$(‘#logo’).attr({
    sr...
OSCON jQuery Training




                                   .attr()
// Before
<img id=”logo” src=”logo.png” alt=”Company ...
OSCON jQuery Training




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

// R...
OSCON jQuery Training




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

// R...
OSCON jQuery Training




                                   .val()
<input id=”email” type=‘text’ value=‘foo bar’ />

// R...
OSCON jQuery Training




                                   Data




 Copyright © 2010 appendTo, LLC.
                   ...
OSCON jQuery Training




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

// Potenti...
OSCON jQuery Training




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

// Cross B...
OSCON jQuery Training




                                   Data   (new in 1.4+)


var object1 = { abc: 123 };
var object...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                           jQuery and Events




 Copyright © 2010 appendTo, LLC.
              ...
OSCON jQuery Training



                               jQuery and Events
‣ Binding Events

‣ Binding Multiple Events

‣ T...
OSCON jQuery Training




                                   Binding Events




 Copyright © 2010 appendTo, LLC.
         ...
OSCON jQuery Training




                      jQuery Event Shortcuts
// Binding an event
$('a.tab').click(function(){
  ...
OSCON jQuery Training



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

‣ mouseenter, mo...
OSCON jQuery Training




                                   Hover Shortcut
// mouseenter, mouseleave

$(‘li’).hover(
   f...
OSCON jQuery Training




                                   Hover Shortcut
// mouseenter, mouseleave

$(‘li’)
    .bind(‘...
OSCON jQuery Training




                                   Hover Shortcut
// Optimal hover

$(‘li’)
    .hover(function(...
OSCON jQuery Training




                                   Hover Shortcut
// Optimal hover

$(‘li’)
    .hover(function(...
OSCON jQuery Training




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

$('a.tab').bind('click',function...
OSCON jQuery Training




                                   Binding Events
// Bind an event to execute once

$('a.tab').o...
OSCON jQuery Training




                   Binding Multiple Events




 Copyright © 2010 appendTo, LLC.
                ...
OSCON jQuery Training




                     Binding Multiple Events
$(‘div’).bind(‘mouseover mouseout’,
  function(e) {...
OSCON jQuery Training




                     Binding Multiple Events
$('a.tab').hover(
   function(e){
      $(this).add...
OSCON jQuery Training




                     Binding Multiple Events
// Arbitrary number of functions to execute
cyclica...
OSCON jQuery Training




                             The Event Object




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training



                                    The Event Object
‣ Event Object Properties


                ...
OSCON jQuery Training



                                    The Event Object
‣ event.type
 The name of the event (all low...
OSCON jQuery Training




                         Event Namespacing




 Copyright © 2010 appendTo, LLC.
                ...
OSCON jQuery Training



                             Event Namespacing
‣ Tagging for event handlers

‣ Added in jQuery 1....
OSCON jQuery Training




            Binding Namespaced Events
$(‘div’)
  .bind(‘click’, fn)
  .bind(‘click.foo’, fn)
  ....
OSCON jQuery Training




                            Event Propagation




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




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

$(‘div’).click...
OSCON jQuery Training




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

$(‘div’).click(f...
OSCON jQuery Training




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

$(‘div’).click(f...
OSCON jQuery Training




            Event Propagation - Div Tag
<div id=”navigation”><p>
    <a href=”#”>Link</a>
</p></...
OSCON jQuery Training




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

$(‘div’).click(...
OSCON jQuery Training




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

$(‘div’).click(...
OSCON jQuery Training




Event Propagation - Returning False
Stop events from bubbling
Prevent the default event action f...
OSCON jQuery Training




                                   Live Events




 Copyright © 2010 appendTo, LLC.
            ...
OSCON jQuery Training



                         Live Events - Binding
// Before
<p>One</p>

// Code
$(‘p’).live(‘click’,...
OSCON jQuery Training




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

// .die() also ...
OSCON jQuery Training




              Live Events - Namespacing
// .live() performs just like .bind()
$(‘p’).live(‘click...
OSCON jQuery Training




                               Live and delegate
//1.4+ - live events can be given a context
$("...
OSCON jQuery Training




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

// Assign the event
$(‘p’)....
OSCON jQuery Training




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

// Assign the event
$(‘p’)....
OSCON jQuery Training




                             Event Parameters




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




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

// Define the custom event
var fo...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                                   jQuery and Ajax
                                       Lesson...
OSCON jQuery Training



                                    jQuery and Ajax
‣ Request Types

‣ Data Formats

‣ Request Ca...
OSCON jQuery Training




                                   Request Types




 Copyright © 2010 appendTo, LLC.
          ...
OSCON jQuery Training



                                    Request Types
Core Method                                Shor...
OSCON jQuery Training




                                   Data Formats




 Copyright © 2010 appendTo, LLC.
           ...
OSCON jQuery Training



                                    Data Formats
‣ xml    Returned as DOM

‣ html     Returned as...
OSCON jQuery Training




                            Request Callbacks




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training



                               Request Callbacks
‣ success: function(data, status, XMLHttpRequest...
OSCON jQuery Training




                             Making a Request




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                               Making a Request
$.get(‘page.php’, function(data) {
    $(data).a...
OSCON jQuery Training




                     Making a Request JSON
// Response
{“names”: [“Jonathan”, “Mike”, “Andrew”],...
OSCON jQuery Training




                     Making a Request JSON
// Response
{ “names”: [“Jonathan”, “Mike”, “Andrew”]...
OSCON jQuery Training




                      Making a Request XML
// Response
<movies><movie id=”123”><title>Back to th...
OSCON jQuery Training




                      Making a Request XML
// Response
<document><![CDATA[
   <h1>Some data</h1>...
OSCON jQuery Training




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

$.getJSON(url, func...
OSCON jQuery Training




                                   Questions?




 Copyright © 2010 appendTo, LLC.
             ...
OSCON jQuery Training




                         Thank you for coming!

                                   http://append...
Upcoming SlideShare
Loading in...5
×

Cooking with jQuery

5,846

Published on

Slides from the Cooking with jQuery Tutorial Session at OSCON 2010

Published in: Technology
2 Comments
14 Likes
Statistics
Notes
  • very nicely arranged and presented thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Overview of all essential parts of jQuery
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,846
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
328
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

Cooking with jQuery

  1. 1. THE jOUERY COMPANY http://appendto.com Copyright © 2010 appendTo, LLC.
  2. 2. OSCON jQuery Training Introduction to jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  3. 3. OSCON jQuery Training Introduction to jQuery ‣ The jQuery Project ‣ Including jQuery ‣ The jQuery Object ‣ Introduction to JavaScript ‣ Lifecycle of a Page Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  4. 4. OSCON jQuery Training The jQuery Project Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  5. 5. OSCON jQuery Training jQuery Project - jquery.org (Software Freedom Conservancy) jQuery Core jQuery UI jquery.com jqueryUI.com Sizzle JS QUnit sizzlejs.com qunitjs.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  6. 6. OSCON jQuery Training ‣ jquery.com Downloading ‣ api.jquery.com Documentation ‣ forum.jquery.com Community ‣ meetups.jquery.com Local Community ‣ plugins.jquery.com Extending ‣ jqueryui.com Project Supported UI Library Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  7. 7. OSCON jQuery Training Including jQuery Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  8. 8. OSCON jQuery Training 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” Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  9. 9. OSCON jQuery Training Source Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  10. 10. OSCON jQuery Training The jQuery Object function jQuery(selector) { ... } // Select an element with jQuery jQuery(‘body’); // Use the $ for brevity var $ = jQuery; $(‘body’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  11. 11. OSCON jQuery Training Introduction to JavaScript Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  12. 12. OSCON jQuery Training Introduction to JavaScript ‣ Script blocks ‣ Quotes and Whitespace ‣ Variables ‣ Functions ‣ Object-Hash ‣ Objects Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  13. 13. OSCON jQuery Training Script Blocks ‣ Scripts can be included inline ‣ <script type=”text/javascript”> // Your script here </script> ‣ Or externally ‣ <script src=”url-to-script.js” type=”text/javascript”></script> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  14. 14. OSCON jQuery Training Quotes & Whitespace // Single Quotes var name = ‘John’; // Double Quotes var name = “John”; // Whitespace var name = ‘John’; // Terminate statements with a semi colon; // Will work, but bad practice! var name = ‘John’ Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  15. 15. OSCON jQuery Training Variables ‣ Variable names may include a-zA-Z0-9_$ as valid characters ‣ Variable scope is applied through the use of the var keyword ‣ Variables have type: ‣ object, number, string, boolean ‣ array(object), function(object) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  16. 16. OSCON jQuery Training Variables // String var name = ‘John’; // Integer(number) var age = 30; // Array var children = [‘Jane’, ‘Jimmy’]; // Boolean var isMarried = true; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  17. 17. OSCON jQuery Training Functions function alertName() { alert(‘Hello John’); } // Accept arguments function alertName(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  18. 18. OSCON jQuery Training Functions // Function assignment var alertName = function(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  19. 19. OSCON jQuery Training Variable Scope var name = ‘John’; function myFunction() { alert(‘Name is: ‘ + name); } ... myFunction(); //Name is John Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  20. 20. OSCON jQuery Training Variable Scope var name = ‘John’; function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name); } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  21. 21. OSCON jQuery Training 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 }; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  22. 22. OSCON jQuery Training Object var person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); } }; person.introduceYourself(); //John is 30 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  23. 23. OSCON jQuery Training Lifecycle of a Page Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  24. 24. OSCON jQuery Training Lifecycle of a Page ‣ Initial HTTP Request ‣ Load Scripts, Stylesheets and Images ‣ Scripts block! ‣ Head first style, scripts later Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  25. 25. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script> </head> <body> <p>Hello world!</p> </body></html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  26. 26. OSCON jQuery Training DOM Ready // Callback function function domIsReady() { $(‘body’).append(‘Hello world’); //magic } $(document).ready(domIsReady); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  27. 27. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> function domIsReady() { $(‘p’).css(‘color’, ‘red’); //magic } $(document).ready(domIsReady); </script> </head> <body> <p>Hello world!</p> </body></html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  28. 28. OSCON jQuery Training Page Load <!doctype html> <html><head> <link href=”style.css” rel=”stylesheet” /> </head><body> <p>Hello world!</p> <script src=”jquery-1.4.2.js”></script> <script type=”text/javascript”> $(‘p’).css(‘color’, ‘red’); //magic </script> </body> </html> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  29. 29. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  30. 30. OSCON jQuery Training jQuery and Selectors Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  31. 31. OSCON jQuery Training jQuery and Selectors ‣ Selectors ‣ Compound Selectors ‣ Selecting by the API ‣ The Context Argument Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  32. 32. OSCON jQuery Training Selectors // Select By ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  33. 33. OSCON jQuery Training Selectors // Select by class <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  34. 34. OSCON jQuery Training Selectors // Select by tag <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> <li>Apple</li> <li>Pear</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  35. 35. OSCON jQuery Training Compound Selectors <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p> $(‘p.important,p.warning’); <p class=”important”></p> <p></p> <p class=”warning”></p> <p class=”important warning”></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  36. 36. OSCON jQuery Training Compound Selectors ‣ As of 1.4+ elements are always returned in document order Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  37. 37. OSCON jQuery Training Select By Relationship Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  38. 38. OSCON jQuery Training Select By Relationship // Children by method <ul> <li>Fork</li> <li>Spoon</li> </ul> $(“ul”).children(); <ul> <li>Fork</li> <li>Spoon</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  39. 39. OSCON jQuery Training Select By Relationship // Children by selector <ul> <li>Fork</li> <li>Spoon</li> </ul> $(“ul > li”); <ul> <li>Fork</li> <li>Spoon</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  40. 40. OSCON jQuery Training Select By Relationship // Siblings by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> $(‘a’).siblings(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  41. 41. OSCON jQuery Training Select By Relationship // Siblings by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  42. 42. OSCON jQuery Training Select By Relationship // Parent by method <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> $(‘a’).parent(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  43. 43. OSCON jQuery Training Select By Relationship // Parent result <div> <a href=’#’>link</a> <p>Lorem Ipsum</p> </div> <div> <a href=’#’>another link</a> <p>Lorem Ipsum</p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  44. 44. OSCON jQuery Training Select By Relationship // Descendant by method <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> $(“ul”).find(‘a’); //selector within find method <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  45. 45. OSCON jQuery Training Select By Relationship // Descendant by selector <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> $(“ul a”); <ul> <li>Fork <a href=’#’>Click to use</a></li> <li>Spoon <a href=’#’>Click to use</a></li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  46. 46. OSCON jQuery Training Selector Pitfalls //Over selection $(‘div#myId’); vs. $(‘#myId’); //Under selection $(‘.randomClass’); vs. $(‘div.randomClass’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  47. 47. OSCON jQuery Training The Context //Entire Document $(‘div’) //Scope your selector //$(‘selector’, <context>) $(‘#table’).find(‘selector’) $(‘a’).click(function() { $(‘span’, this)... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  48. 48. OSCON jQuery Training The Context ‣ Two different scoping methods ‣ $(‘selector’, this) ‣ $(this).find(‘selector’) ‣ Can access context with the context property ‣ 1.3 and later Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  49. 49. OSCON jQuery Training Context Pitfalls var $mySelection = $(‘selector’, ‘#myid’); var $mySelection.context = ? var $mySelection2 = $(‘selector’, $(‘#myid’)[0]); var $mySelection2.context = ? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  50. 50. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  51. 51. OSCON jQuery Training jQuery and Methods Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  52. 52. OSCON jQuery Training jQuery and Methods ‣ Do Something ‣ Showing and Hiding ‣ Iteration ‣ Styling ‣ Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  53. 53. OSCON jQuery Training Do Something $('p').bind('click',function(){ $(this).effect('drop'); }); // hides element by pulling it left Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  54. 54. OSCON jQuery Training Do Something <p>One</p> <p>Two</p> <p>Three</p> // Find Something $(‘p’) // Do Something $(‘p’).hide(); // Generic Syntax $(‘p’) . <Method Name> ( [PARAMETERS] ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  55. 55. OSCON jQuery Training Showing and Hiding Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  56. 56. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  57. 57. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  58. 58. OSCON jQuery Training Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  59. 59. OSCON jQuery Training Iteration Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  60. 60. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  61. 61. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  62. 62. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  63. 63. OSCON jQuery Training Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  64. 64. OSCON jQuery Training Iteration ‣ The anonymous function Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  65. 65. OSCON jQuery Training The Anonymous Function function foo() { ... } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  66. 66. OSCON jQuery Training The Anonymous Function function foo() { ... } var foo = function() { ... } //do this $(document).click(foo); //dont do this $(document).click(foo()); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  67. 67. OSCON jQuery Training The Anonymous Function function foo() { ... } var foo = function() { ... } $(document).click(foo); $(document).click(function() { ... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  68. 68. OSCON jQuery Training Iteration // HTML <p>One</p> <p>Two</p> <p>Three</p> // Changes all elements returned // via Implicit Iteration $(‘p’).css(‘color’,‘red’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  69. 69. OSCON jQuery Training “Each”itis AntiPattern // HTML <p>One</p> <p>Two</p> <p>Three</p> // Changes all elements returned // via incredibly inefficient explicit iteration $(‘p’).each(function(i,v){ $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  70. 70. OSCON jQuery Training Styling Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  71. 71. OSCON jQuery Training Styling // HTML <p>One</p> <p class=”foo”>Two</p> <p>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  72. 72. OSCON jQuery Training Styling // HTML <p class=”enabled”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  73. 73. OSCON jQuery Training Styling // HTML <p class=”enabled”>One</p> <p class=”enabled”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  74. 74. OSCON jQuery Training Styling // HTML <p class=”enabled foo”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled foo”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  75. 75. OSCON jQuery Training Styling <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ color: ‘red’, fontWeight: ‘bold’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  76. 76. OSCON jQuery Training Styling <p style=”color: red;”>One</p> <p style=”color: red;”>Two</p> <p style=”color: red;”>Three</p> $(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ ‘background-color’: ‘blue’, fontWeight: ‘bold’, border: ‘1px solid black’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  77. 77. OSCON jQuery Training Behavior Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  78. 78. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  79. 79. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function(event) { $(this).css(‘color’, ‘’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  80. 80. OSCON jQuery Training Behavior // HTML <p>One</p> <p>Two</p> <p>Three</p> // Add event $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); // Remove event $(‘p’).unbind(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  81. 81. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  82. 82. OSCON jQuery Training Chaining and Sentences Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  83. 83. OSCON jQuery Training Chaining and Sentences ‣ Method Chaining ‣ The Stack Architecture ‣ Finding vs. Filtering Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  84. 84. OSCON jQuery Training Method Chaining Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  85. 85. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  86. 86. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  87. 87. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  88. 88. OSCON jQuery Training Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  89. 89. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  90. 90. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) //non breaking .addClass(‘hello’) $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  91. 91. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added $(...) .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  92. 92. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) //jQuery selector .html() .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  93. 93. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() //breaking .addClass(‘hello’) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  94. 94. OSCON jQuery Training What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’) //runtime error Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  95. 95. OSCON jQuery Training What Breaks the Chain? //put getter last var myHtml = $(...) .addClass(‘hello’) .html(); //store selection in variable //when multiple getters //are needed var $mySelection = $(...); var myHtml = $mySelection.html(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  96. 96. OSCON jQuery Training The Stack Architecture Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  97. 97. OSCON jQuery Training jQuery Collections (Buckets) $(‘body’) [body] .find(‘p’) [p, p, p] => [body] .find(‘a’) [a, a] => [p, p, p] => [body] .addClass(‘foo’) .end() [p, p, p] => [body] .end() [body] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  98. 98. OSCON jQuery Training Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  99. 99. OSCON jQuery Training Finding vs. Filtering Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  100. 100. OSCON jQuery Training Finding Elements $(‘body’) [body] .find(‘p’) [p, p, p] => [body] .find(‘a’) [a, a] => [p, p, p] => [body] .addClass(‘foo’) .end() [p, p, p] => [body] .end() [body] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  101. 101. OSCON jQuery Training Filtering Elements $(‘a’) [a, a.foo, a] .filter(‘.foo’) [a.foo] => [a, a.foo, a] .attr(‘href’, ‘http://appendto.com’) .end() [a, a.foo, a] Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  102. 102. OSCON jQuery Training Find vs. Filter ‣ find() searches the DOM for descendants of elements in the current jQuery wrapped collection ‣ filter() searches the current jQuery collection and returns a reduced set (sub set) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  103. 103. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  104. 104. OSCON jQuery Training jQuery and DOM Manipulation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  105. 105. OSCON jQuery Training jQuery and DOM Manipulation ‣ Creating Elements ‣ Inserting Elements ‣ Removing Elements ‣ Cloning Elements ‣ Wrapping Elements ‣ Attributes ‣ Data Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  106. 106. OSCON jQuery Training Creating Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  107. 107. OSCON jQuery Training Creating Elements $(‘<div></div>’); // Creates ... <div></div> var ul = $(‘<ul><li>Hello</li></ul>’); // Creates ... <ul> <li>Hello</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  108. 108. OSCON jQuery Training Creating Elements // New in 1.4 $("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class <div class=”test”>Click me!</div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  109. 109. OSCON jQuery Training Inserting Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  110. 110. OSCON jQuery Training Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).after(‘<img src=”logo.png” />’); // After <p>Apple</p> <img src=”logo.png /> <p>Orange</p> <img src=”logo.png /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  111. 111. OSCON jQuery Training Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).before(‘<img src=”logo.png” />’); // After <img src=”logo.png” /> <p>Apple</p> <img src=”logo.png” /> <p>Orange</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  112. 112. OSCON jQuery Training Inserting Elements // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘#apple’).prepend(‘<img src=”apple.png” />’); $(‘#orange’).append(‘<img src=”orange.png” />’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  113. 113. OSCON jQuery Training // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘<img src=”apple.png” />’).prependTo(‘#apple’); $(‘<img src=”orange.png” />’).appendTo(‘#orange’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  114. 114. OSCON jQuery Training Element Creation Best Practice //Use object literal syntax for single (non-nested) element creation //If creating nested elements use a single string //yes $(‘<div><a href=”url”>link text</a></div>’) .appendTo(‘body’); //slower $(‘<a href=”url”>link text</a>’) .appendTo(‘<div>’) .appendTo(‘body’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  115. 115. OSCON jQuery Training Removing Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  116. 116. OSCON jQuery Training Removing Elements // Before <div> <p>Red</p> <p>Green</p> </div> // Removing Elements Directly $(‘p’).remove(); // After <div> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  117. 117. OSCON jQuery Training Empty Elements // Before <div> <p><em>Red</em></p> <p><em>Green</em></p> </div> $(‘p’).empty(); // After <div> <p></p> <p></p> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  118. 118. OSCON jQuery Training Detaching Elements // Before <div id=”container”> <p>Foo Bar</p> </div> var $bucket = $(‘p’).detach(); $bucket.insertAfter(‘#container’); // After <div id=”container> </div> <p>Foo Bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  119. 119. OSCON jQuery Training Cloning Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  120. 120. OSCON jQuery Training Cloning Elements // Before <div id=”source”> <strong>The Source</strong> </div> // Copies the element instead of moving it $(‘#source’).clone().appendTo(‘body’); // After <div id=”source”> <strong>The Source</strong> </div> <div id=”source”> <strong>The Source</strong> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  121. 121. OSCON jQuery Training Cloning Elements // Before <div id=”source”> <strong>The Source</strong> </div> // Copies the element instead of moving it $(‘#source’).clone(true).appendTo(‘body’); // After <div id=”source”> <strong>The Source</strong> </div> <div id=”source”> <strong>The Source</strong> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  122. 122. OSCON jQuery Training Modifying Elements Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  123. 123. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> $(‘p’).wrap(‘<div></div>’); // After <div><p>Hello world</p></div> <div><p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  124. 124. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> // As a group $(‘p’).wrapAll(‘<div></div>’); // After <div><p>Hello world</p> <p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  125. 125. OSCON jQuery Training Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> // Wrapping Children $(‘p’).wrapInner(‘<a href=”#”></a>’); // After <p><a href=”#”>Hello world</a></p> <p><a href=”#”>Foo bar</a></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  126. 126. OSCON jQuery Training Unwrapping Elements (new in 1.4+) // Before <div><p>Hello world</p></div> <div><p>Foo bar</p></div> //Individually $(‘p’).unwrap(); // After <p>Hello world</p> <p>Foo bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  127. 127. OSCON jQuery Training Attributes Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  128. 128. OSCON jQuery Training .attr() // Before <img id=”logo” /> $(‘#logo’).attr(‘src’, ‘logo.png’); // After <img id=”logo” src=”logo.png” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  129. 129. OSCON jQuery Training .attr() // Markup <img id=”logo” title=”Hello world” /> var title = $(‘#logo’).attr(‘title’); //title === “Hello world” Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  130. 130. OSCON jQuery Training .attr() // Before <img id=”logo” /> $(‘#logo’).attr({ src: ‘logo.png’, alt: ‘Company logo’ }); // After <img id=”logo” src=”logo.png” alt=”Company logo” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  131. 131. OSCON jQuery Training .attr() // Before <img id=”logo” src=”logo.png” alt=”Company logo” /> $(‘#logo’).attr(‘class’, function() { var c = [‘a’, ‘b’, ‘c’]; var r = Math.floor( Math.random() * 3 ); return c[r]; }); // After (randomized class name) <img id=”logo” src=”logo.png” alt=”Company logo” class=”a” /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  132. 132. OSCON jQuery Training Element Contents <div id=”header”> <em>HEADER</em> </div> // Returns ‘<em>HEADER</em> var theHtml = $(‘#header’).html(); $(‘#header’).html(‘<ul><li>One</li></ul>’); <div id=”header”> <ul><li>One</li></ul> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  133. 133. OSCON jQuery Training Element Contents <div id=”header”> <em>HEADER</em> </div> // Returns ‘HEADER’ $(‘#header’).text(); $(‘#header’).text(‘<em>Hello world</em>’); <div id=”header”> &lt;em&gt;Hello world&lt;/em&gt; </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  134. 134. OSCON jQuery Training .val() <input id=”email” type=‘text’ value=‘foo bar’ /> // Returns ‘foo bar’ $(‘#email’).val(); // Sets value to ‘The value’ $(‘#email’).val(‘The value’); <input id=”email” type=‘text’ value=‘The value’ /> $(‘select’).val([ ‘red’, ‘green’ ]); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  135. 135. OSCON jQuery Training Data Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  136. 136. OSCON jQuery Training Data // HTML <div id=”myDiv”> <p>One</p> </div> // Potential for a Memory Leak var elem = $(‘#myDiv’)[0]; elem.foo = new String(‘xyz’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  137. 137. OSCON jQuery Training Data // HTML <div id=”myDiv”> <p>One</p> </div> // Cross Browser Safe Method to attach data $(‘#myDiv’).data(‘foo’, new String(‘xyz’)); var myVar = $(‘#myDiv’).data(‘foo’); $(‘#myDiv’).removeData(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  138. 138. OSCON jQuery Training Data (new in 1.4+) var object1 = { abc: 123 }; var object2 = { xyz: 789 }; $(‘#myDiv’).data(‘object1’, object1); $(‘#myDiv’).data(‘object2’, object2); var objects = $(‘#myDiv’).data(); objects.object1; objects.object2; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  139. 139. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  140. 140. OSCON jQuery Training jQuery and Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  141. 141. OSCON jQuery Training jQuery and Events ‣ Binding Events ‣ Binding Multiple Events ‣ The Event Object ‣ Event Namespacing ‣ Event Propagation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  142. 142. OSCON jQuery Training Binding Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  143. 143. OSCON jQuery Training jQuery Event Shortcuts // Binding an event $('a.tab').click(function(){ // event handling code $(this).css(‘color’, ‘red’); }); // Binding an event $('a.tab').mouseover(function(){ // event handling code $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  144. 144. OSCON jQuery Training Common Types of Events ‣ click, dblclick, mouseover, mouseout ‣ mouseenter, mouseleave ‣ change, focus, blur ‣ keydown, keyup, keypress ‣ scroll, resize Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  145. 145. OSCON jQuery Training Hover Shortcut // mouseenter, mouseleave $(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  146. 146. OSCON jQuery Training Hover Shortcut // mouseenter, mouseleave $(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  147. 147. OSCON jQuery Training Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  148. 148. OSCON jQuery Training Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); }); $(‘li’) .bind(‘mouseenter mouseleave’,fn); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  149. 149. OSCON jQuery Training Binding Events with .bind() // Binding an event $('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event $('a.tab').unbind('click'); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  150. 150. OSCON jQuery Training Binding Events // Bind an event to execute once $('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  151. 151. OSCON jQuery Training Binding Multiple Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  152. 152. OSCON jQuery Training Binding Multiple Events $(‘div’).bind(‘mouseover mouseout’, function(e) { if ( e.type == ‘mouseover’ ) { $(this).addClass('highlight'); } elseif ( e.type == ‘mouseout’ ) { $(this).removeClass('highlight'); } }); $(‘div’).unbind(‘mouseover mouseout’); $(‘div’).unbind(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  153. 153. OSCON jQuery Training Binding Multiple Events $('a.tab').hover( function(e){ $(this).addClass('highlight'); }, function(e){ $(this).removeClass('highlight'); } ); // Unbind the hover event $(‘a.tab’).unbind('mouseenter mouseleave') Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  154. 154. OSCON jQuery Training Binding Multiple Events // Arbitrary number of functions to execute cyclically on click $('a.tab').toggle( function(){ $(this).css('color','red'); }, function(){ $(this).css('color','yellow'); }, function(){ $(this).css('color','green'); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  155. 155. OSCON jQuery Training The Event Object Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  156. 156. OSCON jQuery Training The Event Object ‣ Event Object Properties type pageX timeStamp pageY target data relatedTarget result currentTarget which Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  157. 157. OSCON jQuery Training 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) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  158. 158. OSCON jQuery Training Event Namespacing Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  159. 159. OSCON jQuery Training Event Namespacing ‣ Tagging for event handlers ‣ Added in jQuery 1.2 namespace post - http://bit.ly/aCaFXS ‣ Simplifies unbinding of events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  160. 160. OSCON jQuery Training Binding Namespaced Events $(‘div’) .bind(‘click’, fn) .bind(‘click.foo’, fn) .bind(‘mouseover.foo’, fn); // Unbind click.foo event $(‘div’).unbind(‘click.foo’); // Unbind all .foo namespaced events // click.foo, mouseover.foo $(‘div’).unbind(‘.foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  161. 161. OSCON jQuery Training Event Propagation Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  162. 162. OSCON jQuery Training Event Propagation - Anchor Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  163. 163. OSCON jQuery Training Event Propagation - Paragraph Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  164. 164. OSCON jQuery Training Event Propagation - Paragraph Tag <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function(evt) { // evt.target == a alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  165. 165. OSCON jQuery Training Event Propagation - Div Tag <div id=”navigation”><p> <a href=”#”>Link</a> </p></div> $(‘#navigation’).click(function(evt) { // evt.target == anchor tag alert(‘clicked div!’); // this = Reference to div DOM element $(this).addClass(‘active’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  166. 166. OSCON jQuery Training Event Propagation - Stopping Prop. <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); return false; }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  167. 167. OSCON jQuery Training Event Propagation - Stopping Prop. <div><p> <a href=”#”>Link</a> </p></div> $(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function(evt) { alert(‘clicked!’); evt.stopPropagation(); evt.preventDefault(); return false; // Same as two lines above }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  168. 168. OSCON jQuery Training Event Propagation - Returning False Stop events from bubbling Prevent the default event action from occurring Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  169. 169. OSCON jQuery Training Live Events Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  170. 170. OSCON jQuery Training Live Events - Binding // Before <p>One</p> // Code $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); $(‘<p />’).text(‘Two’).appendTo(‘body’); // After <p>One</p> <p>Two</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  171. 171. OSCON jQuery Training Live Events - Unbinding // Remove with .die() $(‘p’).die(); // .die() also accepts an event type $(‘p’).die(‘click’); // Namespace Example $(‘p’).die(‘click.one’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  172. 172. OSCON jQuery Training Live Events - Namespacing // .live() performs just like .bind() $(‘p’).live(‘click dblclick’, function(e){ if(e.type == ‘click’) { ... } }); // .live() can take namespaced events $(‘p’).live(‘click.one’,function(e) { alert(‘Click.one’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  173. 173. OSCON jQuery Training Live and delegate //1.4+ - live events can be given a context $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //delegate is short hand method for this best //practice pattern $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  174. 174. OSCON jQuery Training Triggering Events // HTML <p>One</p> // Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Trigger the event manually $(‘p’).trigger(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  175. 175. OSCON jQuery Training Triggering Events // HTML <p>One</p> // Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Some Event types have shortcuts $(‘p’).click(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  176. 176. OSCON jQuery Training Event Parameters Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  177. 177. OSCON jQuery Training 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) } ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  178. 178. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  179. 179. OSCON jQuery Training jQuery and Ajax Lesson 7 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  180. 180. OSCON jQuery Training jQuery and Ajax ‣ Request Types ‣ Data Formats ‣ Request Callbacks ‣ Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  181. 181. OSCON jQuery Training Request Types Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  182. 182. OSCON jQuery Training Request Types Core Method Shortcuts ‣ $.ajax(); ‣ $.get(); ‣ $.post(); ‣ $.getJSON(); ‣ $.getScript(); ‣ $( ... ).load(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  183. 183. OSCON jQuery Training Data Formats Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  184. 184. OSCON jQuery Training Data Formats ‣ xml Returned as DOM ‣ html Returned as String ‣ json Returned as Object ‣ jsonp Returned as Object ‣ text Returned as String ‣ script Evaluated & Returned as String Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  185. 185. OSCON jQuery Training Request Callbacks Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  186. 186. OSCON jQuery Training Request Callbacks ‣ success: function(data, status, XMLHttpRequest) { ... } ‣ error: function(XMLHttpRequest, textStatus, error) { ... } ‣ complete: function(XMLHttpRequest, status) { ... } Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  187. 187. OSCON jQuery Training Making a Request Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  188. 188. OSCON jQuery Training Making a Request $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Andrew’, lname: ‘Wirick’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  189. 189. OSCON jQuery Training Making a Request JSON // Response {“names”: [“Jonathan”, “Mike”, “Andrew”], “states”: {“NE” : “Nebraska”}, “year” : “2010” } $.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  190. 190. OSCON jQuery Training Making a Request JSON // Response { “names”: [“Jonathan”, “Mike”, “Andrew”] } $.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  191. 191. OSCON jQuery Training Making a Request XML // Response <movies><movie id=”123”><title>Back to the future</ title></movie></movies> $.get(‘movies.php’, function(xml) { var title = $(xml) .find(‘movie[id=123] > title’) .text(); $(‘body’).append( title ); }, ‘xml’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  192. 192. OSCON jQuery Training Making a Request XML // Response <document><![CDATA[ <h1>Some data</h1> ]]></document> $.get(‘movies.php’, function(root) { var title = $(root) .find(‘document’) .text(); $(‘body’).append( title ); }, ‘xml’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  193. 193. OSCON jQuery Training Cross Domain Requests var url = ‘http://flickr.com...’; $.getJSON(url, function(json) { // Iterate the items and generate HTML }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  194. 194. OSCON jQuery Training Questions? Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  195. 195. OSCON jQuery Training Thank you for coming! http://appendTo.com @appendTo Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×