Learning      jQuery         in 30 minutesSimon Willison     http://simonwillison.net/BarCamp London 3      24th November ...
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 namespace• ...
jQuery philosophy• Focus on the interaction between JavaScript  and HTML• (Almost) every operation boils down to: • Find s...
Only one function!• Absolutely everything* starts with a call to  the jQuery() function• Since it’s called so often, the $...
jQuery(#nav)jQuery(div#intro h2)jQuery(#nav li.current a)
$(#nav)$(div#intro h2)$(#nav li.current a)
CSS 2 and 3 selectorsa[rel]a[rel="friend"]a[href^="http://"]ul#nav > lili#current ~ li (li siblings that follow #current)l...
Magic selectorsdiv:first, h3:last:header:hidden, :visible:animated:input, :text, :password, :radio, :submit...div:contains(...
jQuery collections• $(div.section) returns a jQuery collection• You can call treat it like an array     $(div.section).len...
jQuery collections• $(div.section) returns a jQuery collection• You can call methods on it:    $(div.section).size() = no....
jQuery collections• $(div.section) returns a jQuery collection• You can call methods on it:    $(div.section).size() = no....
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: flickr});$(#intro).rem...
CSS futzing$(#intro).addClass(highlighted);$(#intro).removeClass(highlighted);$(#intro).toggleClass(highlighted);$(p).css(...
Grabbing values• Some methods return results from the first  matched element  var height = $(div#intro).height();  var src ...
Traversing the DOM• jQuery provides enhanced methods for  traversing the DOM  $(div.section).parent()  $(div.section).next...
Handling events$(a:first).click(function(ev) { $(this).css({backgroundColor: orange}); return false; // Or ev.preventDefaul...
Handling events$(a:first).click(function(ev) { $(this).css({backgroundColor: orange}); return false; // Or ev.preventDefaul...
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 means yo...
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  collection  ...
Ajax•   jQuery has excellent support for Ajax      $(div#intro).load(/some/file.html);•   More advanced methods include:   ...
Animation• jQuery has built in effects:    $(h1).hide(slow);    $(h1).slideDown(fast);    $(h1).fadeOut(2000);• You can ch...
Or roll your own...$("#block").animate({     width: "+=60px",     opacity: 0.4,     fontSize: "3em",     borderWidth: "10p...
Plugins• jQuery is extensible through plugins, which  can add new methods to the jQuery object  • Form: better form manipu...
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://sim...
Upcoming SlideShare
Loading in...5
×

Learning jquery-in-30-minutes-1195942580702664-3

3,076

Published on

Learning jquery

Published in: Education, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,076
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
126
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Learning jquery-in-30-minutes-1195942580702664-3

  1. 1. Learning jQuery in 30 minutesSimon 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 selectorsa[rel]a[rel="friend"]a[href^="http://"]ul#nav > lili#current ~ li (li siblings that follow #current)li:first-child, li:last-child, li:nth-child(3)
  9. 9. Magic selectorsdiv: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("Item " + i + " is ", 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...$("#block").animate({ width: "+=60px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×