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
×
Upcoming SlideShare
jQuery for beginners
Next
Download to read offline and view in fullscreen.

175

Share

Learning jQuery in 30 minutes

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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/
  • cnkchakin0

    Sep. 8, 2020
  • manishkumar2948

    Aug. 1, 2018
  • werdanplock

    Jul. 17, 2018
  • ShwetaMacwan

    Jan. 19, 2018
  • chaouche-samia

    Jan. 15, 2018
  • Naimulislam16

    Jan. 9, 2018
  • mohamadalijafari

    Oct. 14, 2017
  • kyawsoenyan

    Oct. 11, 2017
  • mehendran

    Aug. 4, 2017
  • Eswarkumarkantheti

    Aug. 4, 2017
  • DJCuba

    Jul. 29, 2017
  • everlan2014

    Jul. 21, 2017
  • JavedMalik25

    Jun. 1, 2017
  • FahmyAlbanna1

    Mar. 30, 2017
  • williammdavis

    Feb. 19, 2017
  • akshaypatil157

    Dec. 16, 2016
  • ssuseracf1b3

    Oct. 28, 2016
  • NainaSingh35

    Aug. 11, 2016
  • YogiHosting

    Aug. 11, 2016
  • GirishAttri1

    Jul. 20, 2016

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

Views

Total views

185,144

On Slideshare

0

From embeds

0

Number of embeds

10,168

Actions

Downloads

7,250

Shares

0

Comments

0

Likes

175

×