jQuery in 15 minutes
    Torchbox, 7th August 2007
What makes jQuery
      interesting?
• Built around CSS selectors
• Well behaved
 • Doesn’t hijack your global namespace
 ...
The jQuery() function

jQuery('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(...
Manipulating collections
• Most jQuery methods operate on all of the
  matched elements in the collection


  $('div.secti...
Grabbing values
• Some methods return results from the first
  matched element


  var height = $('div#intro').height();
  ...
Traversing the DOM
• jQuery provides enhanced methods for
  traversing the DOM
  $('div.section').next()
  $('div.section'...
Handling events
• jQuery provides methods for assigning event
  handlers to elements in a cross-browser way
  $('a').click...
Going unobtrusive

$(document).ready(function() {
 alert('The DOM is ready!');
});


$(function() { alert('This is a short...
Chaining

• Most jQuery methods return another
  jQuery object - often one representing the
  same collection. This means ...
Crazy chaining
$('form#login')
   // hide all the labels inside the form with the 'optional' class
   .find('label.optional...
Ajax
•   jQuery has excellent support for Ajax
      $('div#intro').load('/some/file.html');

•   More advanced methods inc...
Plugins
• jQuery is extensible through plugins, which
  can add new methods to the jQuery object
  • Form: better form man...
Further reading


•   http://jquery.com/ - official site
•   http://visualjquery.com/ - useful API reference
Upcoming SlideShare
Loading in...5
×

jQuery in 15 minutes

328,236

Published on

A short introduction to jQuery.

Published in: Technology
21 Comments
204 Likes
Statistics
Notes
No Downloads
Views
Total Views
328,236
On Slideshare
0
From Embeds
0
Number of Embeds
140
Actions
Shares
0
Downloads
6,132
Comments
21
Likes
204
Embeds 0
No embeds

No notes for slide

jQuery in 15 minutes

  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() function jQuery('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.

×