Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Learning

      jQuery
         in 30 minutes
Simon Willison     http://simonwillison.net/
BarCamp London 3      24th Nove...
What is it?
• A JavaScript library, just like...
  • Prototype
  • YUI
  • Dojo
  • mooTools
Why jQuery instead of...?

•   Unlike Prototype and mooTools...

    •   ... it doesn’t interfere with your global namespa...
jQuery philosophy

• Focus on the interaction between JavaScript
  and HTML
• (Almost) every operation boils down to:
 • F...
Only one function!
• Absolutely everything* starts with a call to
  the jQuery() function
• Since it’s called so often, th...
jQuery('#nav')

jQuery('div#intro h2')

jQuery('#nav li.current a')
$('#nav')

$('div#intro h2')

$('#nav li.current a')
CSS 2 and 3 selectors
a[rel]
a[rel=quot;friendquot;]
a[href^=quot;http://quot;]
ul#nav > li
li#current ~ li (li siblings t...
Magic selectors
div:first, h3:last
:header
:hidden, :visible
:animated
:input, :text, :password, :radio, :submit...
div:con...
jQuery collections
• $('div.section') returns a jQuery collection
• You can call treat it like an array
     $('div.sectio...
jQuery collections
• $('div.section') returns a jQuery collection
• You can call methods on it:
    $('div.section').size(...
jQuery collections
• $('div.section') returns a jQuery collection
• You can call methods on it:
    $('div.section').size(...
HTML futzing

$('span#msg').text('The thing was updated!');


$('div#intro').html('<em>Look, HTML</em>');
Attribute futzing
$('a.nav').attr('href', 'http://flickr.com/');
$('a.nav').attr({
 'href': 'http://flickr.com/',
 'id': 'fli...
CSS futzing
$('#intro').addClass('highlighted');
$('#intro').removeClass('highlighted');
$('#intro').toggleClass('highligh...
Grabbing values
• Some methods return results from the first
  matched element
  var height = $('div#intro').height();
  va...
Traversing the DOM
• jQuery provides enhanced methods for
  traversing the DOM
  $('div.section').parent()
  $('div.sectio...
Handling events

$('a:first').click(function(ev) {
 $(this).css({backgroundColor: 'orange'});
 return false; // Or ev.preve...
Handling events

$('a:first').click(function(ev) {
 $(this).css({backgroundColor: 'orange'});
 return false; // Or ev.preve...
Going unobtrusive

$(document).ready(function() {
 alert('The DOM is ready!');
});
Going unobtrusive

$(function() {
 alert('The DOM is ready!');
});
Chaining

• Most jQuery methods return another
  jQuery object - usually one representing the
  same collection. This mean...
Advanced chaining
• Some methods return a different collection
• You can call .end() to revert to the previous
  collection
Advanced chaining
• Some methods return a different collection
• You can call .end() to revert to the previous
  collectio...
Ajax
•   jQuery has excellent support for Ajax
      $('div#intro').load('/some/file.html');

•   More advanced methods inc...
Animation
• jQuery has built in effects:
    $('h1').hide('slow');
    $('h1').slideDown('fast');
    $('h1').fadeOut(2000...
Or roll your own...
$(quot;#blockquot;).animate({
     width: quot;+=60pxquot;,
     opacity: 0.4,
     fontSize: quot;3em...
Plugins
• jQuery is extensible through plugins, which
  can add new methods to the jQuery object


  • Form: better form m...
jQuery.fn.hideLinks = function() {
    this.find('a[href]').hide();
    return this;
}


$('p').hideLinks();
jQuery.fn.hideLinks = function() {
    return this.find('a[href]').hide().end();
}


$('p').hideLinks();
Further reading

•   http://jquery.com/
•   http://docs.jquery.com/
•   http://visualjquery.com/ - API reference
•   http:...
Upcoming SlideShare
Loading in …5
×

Learning jQuery in 30 minutes

180,645 views

Published on

Slides from a half hour jQuery tutorial at BarCamp London 3.

Published in: Technology

Learning jQuery in 30 minutes

  1. 1. Learning jQuery in 30 minutes Simon Willison http://simonwillison.net/ BarCamp London 3 24th November 2007
  2. 2. What is it? • A JavaScript library, just like... • Prototype • YUI • Dojo • mooTools
  3. 3. Why jQuery instead of...? • Unlike Prototype and mooTools... • ... it doesn’t interfere with your global namespace • Unlike YUI... • ... it’s extremely succinct • Unlike Dojo... • ... you can learn it in half an hour!
  4. 4. jQuery philosophy • Focus on the interaction between JavaScript and HTML • (Almost) every operation boils down to: • Find some stuff • Do something to it
  5. 5. Only one function! • Absolutely everything* starts with a call to the jQuery() function • Since it’s called so often, the $ variable is set up as an alias to jQuery • If you’re also using another library you can revert to the previous $ function with jQuery.noConflict(); * not entirely true
  6. 6. jQuery('#nav') jQuery('div#intro h2') jQuery('#nav li.current a')
  7. 7. $('#nav') $('div#intro h2') $('#nav li.current a')
  8. 8. CSS 2 and 3 selectors a[rel] a[rel=quot;friendquot;] a[href^=quot;http://quot;] ul#nav > li li#current ~ li (li siblings that follow #current) li:first-child, li:last-child, li:nth-child(3)
  9. 9. Magic selectors div:first, h3:last :header :hidden, :visible :animated :input, :text, :password, :radio, :submit... div:contains(Hello)
  10. 10. jQuery collections • $('div.section') returns a jQuery collection • You can call treat it like an array $('div.section').length = no. of matched elements $('div.section')[0] - the first div DOM element $('div.section')[1] $('div.section')[2]
  11. 11. jQuery collections • $('div.section') returns a jQuery collection • You can call methods on it: $('div.section').size() = no. of matched elements $('div.section').each(function() { console.log(this); });
  12. 12. jQuery collections • $('div.section') returns a jQuery collection • You can call methods on it: $('div.section').size() = no. of matched elements $('div.section').each(function(i) { console.log(quot;Item quot; + i + quot; is quot;, this); });
  13. 13. HTML futzing $('span#msg').text('The thing was updated!'); $('div#intro').html('<em>Look, HTML</em>');
  14. 14. Attribute futzing $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');
  15. 15. CSS futzing $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted'); $('p').css('font-size', '20px'); $('p').css({'font-size': '20px', color: 'red'});
  16. 16. Grabbing values • Some methods return results from the first matched element var height = $('div#intro').height(); var src = $('img.photo').attr('src'); var lastP = $('p:last').html() var hasFoo = $('p').hasClass('foo'); var email = $('input#email').val();
  17. 17. Traversing the DOM • jQuery provides enhanced methods for traversing the DOM $('div.section').parent() $('div.section').next() $('div.section').prev() $('div.section').nextAll('div') $('h1:first').parents()
  18. 18. Handling events $('a:first').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); });
  19. 19. Handling events $('a:first').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); }); $('a:first').click();
  20. 20. Going unobtrusive $(document).ready(function() { alert('The DOM is ready!'); });
  21. 21. Going unobtrusive $(function() { alert('The DOM is ready!'); });
  22. 22. Chaining • Most jQuery methods return another jQuery object - usually one representing the same collection. This means you can chain methods together: $('div.section').hide().addClass('gone');
  23. 23. Advanced chaining • Some methods return a different collection • You can call .end() to revert to the previous collection
  24. 24. Advanced chaining • Some methods return a different collection • You can call .end() to revert to the previous collection $('#intro').css('color', '#cccccc'). find('a').addClass('highlighted').end(). find('em').css('color', 'red').end()
  25. 25. Ajax • jQuery has excellent support for Ajax $('div#intro').load('/some/file.html'); • More advanced methods include: $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback)
  26. 26. Animation • jQuery has built in effects: $('h1').hide('slow'); $('h1').slideDown('fast'); $('h1').fadeOut(2000); • You can chain them: $('h1').fadeOut(1000).slideDown()
  27. 27. Or roll your own... $(quot;#blockquot;).animate({ width: quot;+=60pxquot;, opacity: 0.4, fontSize: quot;3emquot;, borderWidth: quot;10pxquot; }, 1500);
  28. 28. Plugins • jQuery is extensible through plugins, which can add new methods to the jQuery object • Form: better form manipulation • UI: drag and drop and widgets • $('img[@src$=.png]').ifixpng() • ... dozens more
  29. 29. jQuery.fn.hideLinks = function() { this.find('a[href]').hide(); return this; } $('p').hideLinks();
  30. 30. jQuery.fn.hideLinks = function() { return this.find('a[href]').hide().end(); } $('p').hideLinks();
  31. 31. Further reading • http://jquery.com/ • http://docs.jquery.com/ • http://visualjquery.com/ - API reference • http://simonwillison.net/tags/jquery/

×