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

164,065

Published on

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

Published in: Technology
20 Comments
141 Likes
Statistics
Notes
No Downloads
Views
Total Views
164,065
On Slideshare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
6,492
Comments
20
Likes
141
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

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

×