• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Stackoverflow DevDays: jQuery Introduction for Developers
 

Stackoverflow DevDays: jQuery Introduction for Developers

on

  • 7,637 views

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

Statistics

Views

Total Views
7,637
Views on SlideShare
5,884
Embed Views
1,753

Actions

Likes
7
Downloads
272
Comments
0

7 Embeds 1,753

http://www.mysrc.de 1651
http://vothanhduy.com 45
http://speakerrate.com 27
http://vothanhduy.wordpress.com 18
http://www.slideshare.net 10
https://server1.kproxy.com 1
http://www.scoop.it 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • know jquery?worked with jquery?
  • Quick overview of me
  • before we start, for those not already using jQuery, lets answer this question: why bother?if you aren"t using it yet, is anyone else?
  • Very significant when you consider how many javascript solutions there are out there
  • It simplifies…dealing – selecting and manipulating elementsevent handling, eg. do something on a click eventanimating – slides, fadesajax – server stuff in the background
  • Will add a class to each odd table row inside of each table in an html pagenot too complex, already nine lines of codelead in: using jQuery…
  • Exchange 9 lines of code for a single jQuery statementLets examine this in detail
  • (just read)
  • While other solutions certainly provide the first two aspectsThese other four really set jQuery apartGood enough? Lets get down to the details!
  • Call out DTD
  • Call out DTD
  • Call out wrapper set using jQuery function
  • Call out implicit iteration
  • Repetition is the faster way to learn
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Make sure we understand all the functionality the jquery function provides us
  • plugins add new methods to the jQuery objectadd a custom do-somethinghow does that work?

Stackoverflow DevDays: jQuery Introduction for Developers Stackoverflow DevDays: jQuery Introduction for Developers Presentation Transcript

  • Introduction for Developers
  • Survey
  • Who Me?
    Jörn Zaefferer from Cologne
    Consultant for maxence integration technologies
    jQueryteam member
    jQuery UI lead developer
    Co-Author jQuery Cookbook, due this month
  • Why bother?
  • Who uses jQuery
    35% of all sites that use JavaScript, use jQuery
    1 out 5 sites, of all sites, use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • Who uses jQuery
    35% of all sites that use JavaScript, use jQuery
    1 out 5 sites, of all sites, use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • Who uses jQuery
    35% of all sites that use JavaScript, use jQuery
    1 out 5 sites, of all sites, use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • What exactly is jQuery
    jQuery is a JavaScript Library!
    Dealing with the DOM
    JavaScript Events
    Animations
    Ajax interactions
  • What does that mean?
  • It means no more of this
    var tables = document.getElementsByTagName("table");
    for (vart = 0; t<tables.length; t++) {
    var rows = tables[t].getElementsByTagName("tr");
    for (vari = 1; i<rows.length; i += 2) {
    if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
    rows[i].className+= " odd";
    }
    }
    };
    http://jsbin.com/esewu/edit
  • Using jQuery we can do this
    jQuery("tabletr:nth-child(odd)").addClass("odd");
  • Using jQuery we can do this
    jQuery("tabletr:nth-child(odd)").addClass("odd");
    jQuery function
  • Using jQuery we can do this
    jQuery("tabletr:nth-child(odd)").addClass("odd");
    jQuery Selector (CSS expression)
    jQuery function
  • Using jQuery we can do this
    jQuery("tabletr:nth-child(odd)").addClass("odd");
    jQuery Selector (CSS expression)
    jQuery function
    jQuery Wrapper Set
  • Using jQuery we can do this
    jQuery("tabletr:nth-child(odd)").addClass("odd");
    jQuery Selector (CSS expression)
    jQuery function
    jQuery Method
    jQuery Wrapper Set
  • It really is the “write less, do more” JavaScript Library!
  • Why use jQuery
    Helps us to simplify and speed up web development
    Allows us to avoid common headaches associated with browser development
    Provides a large pool of plugins
    Large and active community
    Tested on 50 browsers, 11 platforms
    Its for both coders and designers
  • Why use jQuery over other solutions
    Helps us to simplify and speed up web development
    Allows us to avoid common headaches associated with browser development
    Provides a large pool of plugins
    Large and active community
    Tested on 50 browsers, 11 platforms
    Its for both coders and designers
  • Concept 1. Find something, do something
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ul>
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ul>
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("ul");
    </script>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ul id="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("ul").attr("id", "nav");
    </script>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("#nav li");
    </script>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    <li class="navLiItem"><a>home</a></li>
    <li class="navLiItem"><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("#nav li").addClass("navLiItem");
    </script>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("#nav a");
    </script>
    </body>
    </html>
  • Concept 1. Find something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    <li><a href="/home">home</a></li>
    <li><a href="/about">about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("#nav a").each(function(){
    jQuery(this).attr("href", "/" + jQuery(this).text());
    });
    </script>
    </body>
    </html>
  • Concept 2. Create something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    </ul>
    </body>
    </html>
  • Concept 2. Create something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("<li>home</li>");
    jQuery("<li>about</li>");
    </script>
    </body>
    </html>
  • Concept 2. Create something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("<li>home</li>").wrapInner("a");
    jQuery("<li>about</li>").wrapInner("a");
    </script>
    </body>
    </html>
  • Concept 2. Create something, do something
    <!DOCTYPE html>
    <html>
    <body>
    <ulid="nav">
    <li><a>home</a></li>
    <li><a>about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("<li>home</li>").wrapInner("a").appendTo("#nav");
    jQuery("<li>about</li>").wrapInner("a").appendTo("#nav");
    </script>
    </body>
    </html>
  • Concept 3. Chaining
    <!DOCTYPE html>
    <html>
    <body>
    <ul id="nav">
    <li class="navLiItem"><a href="/home">home</a></li>
    <li class="navLiItem"><a href="/about">about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("ul").attr("id","nav");
    jQuery("#nav li").addClass("navLiItem");
    jQuery("#nav a").each(function(){
    jQuery(this).attr("href", "/" + jQuery(this).text());
    });
    </script>
    </body>
    </html>
  • Concept 3. Chaining
    <!DOCTYPE html>
    <html>
    <body>
    <ul id="nav">
    <li class="navLiItem"><a href="/home">home</a></li>
    <li class="navLiItem"><a href="/about">about</a></li>
    </ul>
    <script src="jquery.js"></script>
    <script>
    jQuery("ul").attr("id","nav")
    .find("li").addClass("navLiItem")
    .find("a").each(function(){
    jQuery(this).attr("href","/" + jQuery(this).text());
    });
    </script>
    </body>
    </html>
  • Concept 4. jQuery parameter types
    CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first")
    HTML jQuery("<li><a href=“#”>link</a></li>")
    DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)
    A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})
  • Review
    Find something, do something
    Create something, do something
    Chaining
    jQuery parameter types
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery()
    each()
    map()
    size()
    length
    selector
    context
    index()
    get()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery()
    each()
    map()
    size()
    length
    selector
    context
    index()
    get()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <body>
    <p>Gold</p>
    <p>Silver</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    alert(jQuery("p").map(function() {
    return $(this).text();
    }).get());
    </script>
    </body>
    </html>
    http://jsbin.com/orani/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
    jQuery("a[title]")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
    jQuery("a[title]")
    jQuery("a[title][href='foo']")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
    jQuery("a[title]")
    jQuery("a[title][href='foo']")
    jQuery("a:first[href*='foo']")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
    jQuery("a[title]")
    jQuery("a[title][href='foo']")
    jQuery("a:first[href*='foo']")
    jQuery("#header, #footer")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery("#nav li.contact")
    jQuery(":visible")
    jQuery(":radio:enabled:checked")
    jQuery("a[title]")
    jQuery("a[title][href='foo']")
    jQuery("a:first[href*='foo']")
    jQuery("#header, #footer")
    jQuery("#header, #footer").filter(":visible")
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    attr()
    removeAttr()
    addClass()
    hasClass()
    toggleClass()removeClass()
    val()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    attr()
    removeAttr()
    addClass()
    hasClass()
    toggleClass()removeClass()
    val()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html><html><body>
    <input type="text" value="search" />
    <script src="jquery.js"></script>
    <script>
    $("input").focus(function(){
    var v = $(this).val();
    $(this).val( v == this.defaultValue? "" : v);
    }).blur(function(){
    var v = $(this).val();
    $(this).val( !v ? this.defaultValue : v);
    });
    </script></body></html>
    http://jsbin.com/irico/edit#html
    http://jsbin.com/ihale/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    add()
    children()
    closest()
    find()
    next()
    nextAll()
    prev()
    prevAll()
    siblings()
    parent()
    parents()
    andSelf()
    end()
    eq()
    filter()
    is()
    not()
    slice()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    add()
    children()
    closest()
    find()
    next()
    nextAll()
    prev()
    prevAll()
    siblings()
    parent()
    parents()
    andSelf()
    end()
    eq()
    filter()
    is()
    not()
    slice()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <body>
    <h3>Quotes</h3>
    <div>
    <p>Now or never</p>
    <p>Because he could</p>
    </div>
    <script src="jquery.js"></script>
    <script>
    $("h3").click(function() {
    $(this).next().toggle();
    }).next().hide();
    </script>
    </body>
    </html>
    http://jsbin.com/uhole/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    html()
    text()
    append()
    appendTo()
    prepend()
    prependTo()
    after()
    insertAfter()
    before()
    insertBefore()
    wrap()
    wrapAll()
    wrapInner()
    replaceWith()
    replaceAll()
    empty()
    remove()
    clone()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    html()
    text()
    append()
    appendTo()
    prepend()
    prependTo()
    after()
    insertAfter()
    before()
    insertBefore()
    wrap()
    wrapAll()
    wrapInner()
    replaceWith()
    replaceAll()
    empty()
    remove()
    clone()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <body>
    <p>Make me bold!</p>
    <script src="jquery.js"></script>
    <script>
    jQuery("p").wrapInner("<b></b>");
    </script>
    </body>
    </html>
    http://jsbin.com/esuwu/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    css()
    offset()
    offsetParent()
    postion()
    scrollTop()
    scrollLeft()
    height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    css()
    offset()
    offsetParent()
    postion()
    scrollTop()
    scrollLeft()
    height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <head>
    <style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <script src=“jquery.js" ></script>
    <script>
    jQuery("div").height(jQuery(document).height());
    </script>
    </body>
    </html>
    http://jsbin.com/iseti/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    blur()
    change()
    click()
    dbclick()
    error()
    focus()
    keydown()
    keypress()
    keyup()
    mousedown()
    mousenter()
    mouseleave()
    mouseout()
    mouseup()
    resize()
    scroll()
    select()
    submit()
    unload()
    ready()
    bind()
    one()
    trigger()
    triggerHandler()
    unbind()
    live()
    die()
    hover()
    toggle()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    blur()
    change()
    click()
    dbclick()
    error()
    focus()
    keydown()
    keypress()
    keyup()
    mousedown()
    mousenter()
    mouseleave()
    mouseout()
    mouseup()
    resize()
    scroll()
    select()
    submit()
    unload()
    ready()
    bind()
    one()
    trigger()
    triggerHandler()
    unbind()
    live()
    die()
    hover()
    toggle()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <body>
    <p>click me</p>
    <p>click me</p>
    <script src="jquery.js"></script>
    <script>
    jQuery("p").bind("click", function(){
    $(this).after("<p>click me</p>");
    });
    </script>
    </body>
    </html>
    http://jsbin.com/ehuki/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html>
    <html>
    <body>
    <p>click me</p>
    <p>click me</p>
    <script src="jquery.js"></script>
    <script>
    jQuery("p").live("click", function(){
    $(this).after("<p>click me</p>");
    });
    </script>
    </body>
    </html>
    http://jsbin.com/epeha/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    show()
    hide()
    toggle()
    slideDown()
    slideUp()
    slideToggle()
    fadeIn()
    fadeOut()
    fadeTo()
    animate()
    stop()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    show()
    hide()
    toggle()
    slideDown()
    slideUp()
    slideToggle()
    fadeIn()
    fadeOut()
    fadeTo()
    animate()
    stop()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    var tooltip = $("<div/>")
    .addClass("tooltip")
    .appendTo("body");
    $("input").mouseover(function(event) {
    tooltip.text(this.title).css({
    left: event.pageX,
    top: event.pageY
    }).fadeIn();
    }).mouseout(function() {
    tooltip.fadeOut();
    });
    http://jsbin.com/enoco3/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    show()
    hide()
    toggle()
    slideDown()
    slideUp()
    slideToggle()
    fadeIn()
    fadeOut()
    fadeTo()
    animate()
    stop()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html><html><head>
    <style>
    div{background-color:#bca;width:100px;border:1px solid green;}
    </style>
    </head>
    <body>
    <div id="block">Hello!</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script>
    jQuery("#block").animate({
    width: "70%",
    opacity: 0.4,
    }, 1500);
    </script></body></html>
    http://jsbin.com/ulexu/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery.ajaxSetup()
    serialize()
    serializeArray()
    jQuery.ajax()
    jQuery.get()
    jQuery.getJSON()
    jQuery,getScript()
    jQuery.post()
    load()
    ajaxComplete()
    ajaxError()
    ajaxSend()
    ajaxStart()
    ajaxStop()
    ajaxSuccess()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery.ajaxSetup()
    serialize()
    serializeArray()
    jQuery.ajax()
    jQuery.get()
    jQuery.getJSON()
    jQuery,getScript()
    jQuery.post()
    load()
    ajaxComplete()
    ajaxError()
    ajaxSend()
    ajaxStart()
    ajaxStop()
    ajaxSuccess()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    <!DOCTYPE html><html><body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script>
    jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?",
    function(data){
    jQuery.each(data.items, function(i,item){
    jQuery("<img/>")
    .attr("src", item.media.m)
    .appendTo("body");
    if ( i == 30 ) return false;
    });
    });
    </script></body></html>
    http://jsbin.com/ivifa/edit#html
    http://jsbin.com/erase/edit#html
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery.support
    jQuery.boxModel
    jQuery.each(),
    jQuery.extend(),
    jQuery.grep(),
    jQuery.makeArray(),
    jQuery.map(),
    jQuery.inArray(),
    jQuery.merge(),
    jQuery.unique()
    jQuery.isArray(),
    jQuery,isFunction()
    jQuery.trim()
    jQuery.param()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery.support
    jQuery.boxModel
    jQuery.each(),
    jQuery.extend(),
    jQuery.grep(),
    jQuery.makeArray(),
    jQuery.map(),
    jQuery.inArray(),
    jQuery.merge(),
    jQuery.unique()
    jQuery.isArray(),
    jQuery.isFunction()
    jQuery.trim()
    jQuery.param()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    // returns "hello"
    jQuery.trim(" hello ");
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    jQuery.support
    jQuery.boxModel
    jQuery.each(),
    jQuery.extend(),
    jQuery.grep(),
    jQuery.makeArray(),
    jQuery.map(),
    jQuery.inArray(),
    jQuery.merge(),
    jQuery.unique()
    jQuery.isArray(),
    jQuery.isFunction()
    jQuery.trim()
    jQuery.param()
  • Overview of jQuery API
    Core
    Selectors
    Attributes
    Traversing
    Manipulation
    CSS
    Events
    Effects
    Ajax
    Utilities
    // returns "name=John&url=ejohn.org"
    jQuery.param({ name: "John", url: "ejohn.org" });
  • jQuery and $
    var jQuery = window.jQuery = window.$ = function() {}
  • jQuery and $
    jQuery(document).ready(function($) {
    // ready code
    });
    or
    jQuery(function($) {
    // ready code
    });
  • jQuery.noConflict()
  • Plugins
  • A jQueryplugin in 6 steps
    http://jsbin.com/asice/edit
  • A jQueryplugin in 6 steps
    Step 1. create a private scope for $ alias
    <!DOCTYPE html><html><body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    })(jQuery);
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 2. attach plugin to fn alias (aka prototype)
    <!DOCTYPE html><html><body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    };
    })(jQuery);
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 2. attach plugin to fn alias (aka prototype)
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    };
    })(jQuery);
    jQuery("p").loveNotHate();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 3. add implicit iteration
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    this.each(function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    });
    };
    })(jQuery);
    jQuery("p").loveNotHate();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 3. add implicit iteration
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    this.each(function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    });
    };
    })(jQuery);
    jQuery("p").loveNotHate();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 4. enable chaining
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    });
    };
    })(jQuery);
    jQuery("p").loveNotHate();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 4. enable chaining
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,"love"));
    });
    };
    })(jQuery);
    jQuery("p").loveNotHate().hide();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 5. add default options
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
    });
    };
    $.fn.loveNotHate.defaults = {text:"love"};
    })(jQuery);
    jQuery("p").loveNotHate();
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 6. add custom options
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate = function(){
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
    });
    };
    $.fn.loveNotHate.defaults = {text:"love"};
    })(jQuery);
    jQuery("p").loveNotHate({text:"love-love-love"});
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 6. add custom options
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate= function(options){
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
    });
    };
    $.fn.loveNotHate.defaults = {text:"love"};
    })(jQuery);
    jQuery("p").loveNotHate({text:"love-love-love"});
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 6. add custom options
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate= function(options){
    options = $.extend({},$.fn.loveNotHate.defaults, options);
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
    });
    };
    $.fn.loveNotHate.defaults = {text:"love"};
    })(jQuery);
    jQuery("p").loveNotHate({text:"love-love-love"});
    </script></body></html>
  • A jQueryplugin in 6 steps
    Step 6. add custom options
    <!DOCTYPE html><html><body>
    <p>I hate jQuery!</p>
    <p>I mean really hate jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    (function($){
    $.fn.loveNotHate= function(options){
    options = $.extend({},$.fn.loveNotHate.defaults, options);
    return this.each(function(){
    $(this).text($(this).text().replace(/hate/g,options.text));
    });
    };
    $.fn.loveNotHate.defaults = {text:"love"};
    })(jQuery);
    jQuery("p").loveNotHate({text:"love-love-love"});
    </script></body></html>
  • Pluginsare simple,just follow the steps!
  • jQuery News
    Moving towards a Conservancy (Software Freedom Law Center) owning the code
    Tax-deductible donations
    Four conferences next year (Boston, San Francisco, London, and online)
    jQuery.org project site
    T-shirts
    jQueryForum moving away from Google Groups
    Revamp of the plugin site
  • ?
  • Thank you!