Your SlideShare is downloading. ×
0
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Learning jQuery in 30 minutes

161,200

Published on

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

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

Published in: Technology
19 Comments
136 Likes
Statistics
Notes
No Downloads
Views
Total Views
161,200
On Slideshare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
6,379
Comments
19
Likes
136
Embeds 0
No embeds

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/

×