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

Like this? Share it with your network

Share

Learning jQuery in 30 minutes

  • 149,855 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
149,855
On Slideshare
140,584
From Embeds
9,271
Number of Embeds
108

Actions

Shares
Downloads
6,081
Comments
19
Likes
129

Embeds 9,271

http://miageprojet2.unice.fr 1,932
http://easyone.tistory.com 1,687
http://www.dreamcss.com 1,569
http://achmatim.net 1,041
http://www.slideshare.net 477
http://appmaster.digio.es 449
http://www.jquery.allindoc.com 322
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 72
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 45
http://francescoagati.wordpress.com 38
http://iyambae-on-net.blogspot.com 36
http://blog.csdn.net 33
https://cachina.wordpress.com 30
http://satrion.wordpress.com 28
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://jsupdates.dev 15
http://sc-net.blogspot.com 15
http://static.slideshare.net 13
http://kms.sec.samsung.net 13
http://www.agglom.com 11
http://translate.googleusercontent.com 10
http://54.225.146.167 10
http://web2.c2.cyworld.com 10
http://jsupdates.com 9
http://blog.kwiat.org 9
http://cdcjava.blogspot.com 8
http://web-tech2008.blogspot.in 8
http://js-pc.blogspot.com 7
http://www.webgox.com 5
http://sc-net.blogspot.pt 5
http://blog.edatis.net 5
http://sc-net.blogspot.com.br 4
http://www.helloks.com 4
http://webcache.googleusercontent.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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/