Learning jQuery in 30 minutes

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

12 comments

Comments 1 - 10 of 12 previous next Post a comment

Comments 1 - 10 of 12 previous next

Post a comment
Embed Video
Edit your comment Cancel

49 Favorites & 3 Groups

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=\"friend\"] a[href^=\"http://\"] 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(\"Item \" + i + \" is \", 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... $(\"#block\").animate({ width: \"+=60px\", opacity: 0.4, fontSize: \"3em\", borderWidth: \"10px\" }, 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/

+ simonsimon, 2 years ago

custom

35104 views, 49 favs, 40 embeds more stats

Slides from a half hour jQuery tutorial at BarCamp more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 35104
    • 34163 on SlideShare
    • 941 from embeds
  • Comments 12
  • Favorites 49
  • Downloads 1404
Most viewed embeds
  • 226 views on http://achmatim.net
  • 151 views on http://easyone.tistory.com
  • 100 views on http://www.consumingexperience.com
  • 89 views on http://www.dreamcss.com
  • 81 views on http://www.tsingfeng.com

more

All embeds
  • 226 views on http://achmatim.net
  • 151 views on http://easyone.tistory.com
  • 100 views on http://www.consumingexperience.com
  • 89 views on http://www.dreamcss.com
  • 81 views on http://www.tsingfeng.com
  • 76 views on http://cotradeco.com
  • 54 views on http://dreamcss.blogspot.com
  • 33 views on http://blog.csdn.net
  • 18 views on http://www.jordimir.com
  • 15 views on http://www.doutdex.com
  • 12 views on http://cachina.wordpress.com
  • 11 views on http://www.agglom.com
  • 10 views on http://web2.c2.cyworld.com
  • 7 views on http://satrion.wordpress.com
  • 5 views on http://kms.sec.samsung.net
  • 5 views on http://sc-net.blogspot.com
  • 5 views on http://static.slideshare.net
  • 5 views on http://www.webgox.com
  • 4 views on http://webtutorials4u.com
  • 4 views on http://www.helloks.com
  • 4 views on http://jsgod.wordpress.com
  • 3 views on http://www.hanrss.com
  • 3 views on http://blog.kwiat.org
  • 2 views on http://buyvideogamesonline.org
  • 2 views on http://static.slidesharecdn.com
  • 2 views on http://trovatait.blogspot.com
  • 1 views on http://wildfire.gigya.com
  • 1 views on http://artyprog.blogspot.com
  • 1 views on http://getmyfreetrial.com
  • 1 views on http://bookmarkingsites.com
  • 1 views on http://www.thinkingphp.org
  • 1 views on http://21stcenturyrobots.com
  • 1 views on http://www.i9cafe.com
  • 1 views on http://64.233.183.113
  • 1 views on http://203.208.39.99
  • 1 views on http://www.ruly.aperta.us
  • 1 views on http://helloks.com
  • 1 views on http://209.85.135.104
  • 1 views on http://203.208.37.104
  • 1 views on http://indonesiasatu.info

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories