Learning jQuery in 30 minutes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Learning jQuery in 30 minutes

on

  • 148,895 views

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

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

Statistics

Views

Total Views
148,895
Views on SlideShare
139,669
Embed Views
9,226

Actions

Likes
129
Downloads
6,045
Comments
19

107 Embeds 9,226

http://miageprojet2.unice.fr 1906
http://easyone.tistory.com 1687
http://www.dreamcss.com 1565
http://achmatim.net 1039
http://www.slideshare.net 477
http://appmaster.digio.es 448
http://www.jquery.allindoc.com 319
http://cachina.wordpress.com 311
http://www.consumingexperience.com 174
http://cotradeco.com 147
http://www.ajaxfreak.com 89
http://www.tsingfeng.com 81
http://webtutorials4u.com 77
http://www.jordimir.com 71
http://blog.cachina.com.br 65
http://yeonhee470.tistory.com 56
http://dreamcss.blogspot.com 54
http://www.doutdex.com 53
http://jsgod.wordpress.com 47
http://vothanhduy.com 44
http://francescoagati.wordpress.com 38
http://iyambae-on-net.blogspot.com 36
http://blog.csdn.net 33
http://satrion.wordpress.com 28
https://cachina.wordpress.com 25
http://cdcjava.blogspot.tw 22
http://www.istudyiwin.com 21
http://static.slidesharecdn.com 19
http://web-tech2008.blogspot.com 18
http://vothanhduy.wordpress.com 17
http://r-ednalan.blogspot.com 16
http://sc-net.blogspot.com 15
http://jsupdates.dev 15
http://static.slideshare.net 13
http://kms.sec.samsung.net 13
http://www.agglom.com 11
http://web2.c2.cyworld.com 10
http://54.225.146.167 10
http://translate.googleusercontent.com 10
http://blog.kwiat.org 9
http://jsupdates.com 9
http://web-tech2008.blogspot.in 8
http://cdcjava.blogspot.com 8
http://js-pc.blogspot.com 7
http://sc-net.blogspot.pt 5
http://blog.edatis.net 5
http://www.webgox.com 5
http://sc-net.blogspot.com.br 4
http://www.helloks.com 4
http://webcache.googleusercontent.com 4
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

15 of 19 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Learning jQuery in 30 minutes Presentation Transcript

  • 1. Learning jQuery in 30 minutes Simon Willison http://simonwillison.net/ BarCamp London 3 24th November 2007
  • 2. What is it? • A JavaScript library, just like... • Prototype • YUI • Dojo • mooTools
  • 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. jQuery philosophy • Focus on the interaction between JavaScript and HTML • (Almost) every operation boils down to: • Find some stuff • Do something to it
  • 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. jQuery('#nav') jQuery('div#intro h2') jQuery('#nav li.current a')
  • 7. $('#nav') $('div#intro h2') $('#nav li.current a')
  • 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. Magic selectors div:first, h3:last :header :hidden, :visible :animated :input, :text, :password, :radio, :submit... div:contains(Hello)
  • 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. 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. 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. HTML futzing $('span#msg').text('The thing was updated!'); $('div#intro').html('<em>Look, HTML</em>');
  • 14. Attribute futzing $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');
  • 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. 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. 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. Handling events $('a:first').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); });
  • 19. Handling events $('a:first').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); }); $('a:first').click();
  • 20. Going unobtrusive $(document).ready(function() { alert('The DOM is ready!'); });
  • 21. Going unobtrusive $(function() { alert('The DOM is ready!'); });
  • 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. Advanced chaining • Some methods return a different collection • You can call .end() to revert to the previous collection
  • 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. 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. Animation • jQuery has built in effects: $('h1').hide('slow'); $('h1').slideDown('fast'); $('h1').fadeOut(2000); • You can chain them: $('h1').fadeOut(1000).slideDown()
  • 27. Or roll your own... $(quot;#blockquot;).animate({ width: quot;+=60pxquot;, opacity: 0.4, fontSize: quot;3emquot;, borderWidth: quot;10pxquot; }, 1500);
  • 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. jQuery.fn.hideLinks = function() { this.find('a[href]').hide(); return this; } $('p').hideLinks();
  • 30. jQuery.fn.hideLinks = function() { return this.find('a[href]').hide().end(); } $('p').hideLinks();
  • 31. Further reading • http://jquery.com/ • http://docs.jquery.com/ • http://visualjquery.com/ - API reference • http://simonwillison.net/tags/jquery/