Your SlideShare is downloading. ×
0
jQuery in 15 minutes    Torchbox, 7th August 2007
What makes jQuery      interesting?• Built around CSS selectors• Well behaved • Doesn’t hijack your global namespace • Pla...
The jQuery() functionjQuery(div#intro h2)jQuery(div.section > p)jQuery(input:radio)$(div#intro h2)
jQuery collections• $(div.section) returns a jQuery collection• You can call methods on it:    $(div.section).size() = no....
Manipulating collections• Most jQuery methods operate on all of the  matched elements in the collection  $(div.section).ad...
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).next()  $(div.section).prev()...
Handling events• jQuery provides methods for assigning event  handlers to elements in a cross-browser way  $(a).click(func...
Going unobtrusive$(document).ready(function() { alert(The DOM is ready!);});$(function() { alert(This is a shortcut) });
Chaining• Most jQuery methods return another  jQuery object - often one representing the  same collection. This means you ...
Crazy chaining$(form#login)   // hide all the labels inside the form with the optional class   .find(label.optional).hide()...
Ajax•   jQuery has excellent support for Ajax      $(div#intro).load(/some/file.html);•   More advanced methods include:   ...
Plugins• jQuery is extensible through plugins, which  can add new methods to the jQuery object  • Form: better form manipu...
Further reading•   http://jquery.com/ - official site•   http://visualjquery.com/ - useful API reference
Upcoming SlideShare
Loading in...5
×

Jquery in-15-minutes1421

301

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
301
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Jquery in-15-minutes1421"

  1. 1. jQuery in 15 minutes Torchbox, 7th August 2007
  2. 2. What makes jQuery interesting?• Built around CSS selectors• Well behaved • Doesn’t hijack your global namespace • Plays well with other libraries• API designed with conciseness and convenience as the driving factors
  3. 3. The jQuery() functionjQuery(div#intro h2)jQuery(div.section > p)jQuery(input:radio)$(div#intro h2)
  4. 4. 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(div) { // Manipulate the div }
  5. 5. Manipulating collections• Most jQuery methods operate on all of the matched elements in the collection $(div.section).addClass(highlighted) $(img.photo).attr(src, /default.png); $(a.foo).html(<em>Click me now!</em>); $(p:odd).css(background-color, #ccc);
  6. 6. 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()
  7. 7. Traversing the DOM• jQuery provides enhanced methods for traversing the DOM $(div.section).next() $(div.section).prev() $(div.section).prev(a) $(div.section).parent() $(div.section).parents()
  8. 8. Handling events• jQuery provides methods for assigning event handlers to elements in a cross-browser way $(a).click(function(ev) { $(this).css({backgroundColor: orange}); ev.preventDefault(); });
  9. 9. Going unobtrusive$(document).ready(function() { alert(The DOM is ready!);});$(function() { alert(This is a shortcut) });
  10. 10. Chaining• Most jQuery methods return another jQuery object - often one representing the same collection. This means you can chain methods together: $(div.section).hide().addClass(gone);
  11. 11. Crazy chaining$(form#login) // hide all the labels inside the form with the optional class .find(label.optional).hide().end() // add a red border to any password fields in the form .find(input:password).css(border, 1px solid red).end() // add a submit handler to the form .submit(function(){ return confirm(Are you sure you want to submit?); }); From http://www.ibm.com/developerworks/library/x-ajaxjquery.html
  12. 12. 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)
  13. 13. Plugins• jQuery is extensible through plugins, which can add new methods to the jQuery object • Form: better form manipulation • Dimensions: lots of browser measurements • Interface: fancy effects, accordions • UI: drag and drop, and more
  14. 14. Further reading• http://jquery.com/ - official site• http://visualjquery.com/ - useful API reference
  1. A particular slide catching your eye?

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

×