jQuery in 15 minutes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery in 15 minutes

on

  • 301,341 views

A short introduction to jQuery.

A short introduction to jQuery.

Statistics

Views

Total Views
301,341
Views on SlideShare
229,317
Embed Views
72,024

Actions

Likes
203
Downloads
5,977
Comments
22

367 Embeds 72,024

http://www.learningjquery.com 36718
http://www.elwebmaster.com 5663
http://webtecker.com 4491
http://woork.blogspot.com 4321
http://miageprojet2.unice.fr 1936
http://www.dreamcss.com 1662
http://www.learningjquery.com. 1346
http://phpspot.org 1193
http://www.pinceladasdaweb.com.br 1029
http://www.slideshare.net 948
http://ajaxian.com 916
http://blog2js.appspot.com 847
http://www.barbarosalp.com 592
http://webprogrammer.tistory.com 487
http://www.webadictos.com.mx 458
http://feeds2.feedburner.com 438
http://woork.blogspot.in 425
http://jquery.collected.info 406
http://geekfreak.wordpress.com 390
http://flora.org.ru 357
http://feeds.feedburner.com 337
http://cachina.wordpress.com 333
http://podlipensky.com 278
http://swik.net 267
http://aspdotnetcodebook.blogspot.com 225
http://www.iinterest.net 224
http://zhilinsky.ru 215
http://www.getincss.ru 192
http://www.jquery.allindoc.com 183
http://d.hatena.ne.jp 177
http://charlie-blog.com 172
http://mydatum.tistory.com 162
http://learningjquery.com 158
http://www.cnblogs.com 142
http://pegapacapa.wordpress.com 127
http://acidminds.com 117
http://blog.aplicacionesweb.cl 112
http://dreamcss.blogspot.com 105
http://www.gfxdizayn.com 100
http://www.webthreads.de 99
http://www.ferdeso.es 98
http://jsgt.org 94
http://teknodergi.org 92
http://www.jordimir.com 90
http://translate.googleusercontent.com 88
http://theoldreader.com 87
http://barbarosalp.com 86
http://www.sastgroup.com 86
http://knitinr.blogspot.com 73
http://code-import.blogspot.com 66
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 22 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Gostei, vou aplicar no site: http://www.professordelphi.com
    Are you sure you want to
    Your message goes here
    Processing…
  • hay wa!
    Are you sure you want to
    Your message goes here
    Processing…
  • como siempre en ingles, pero es bueno de todas formas
    Are you sure you want to
    Your message goes here
    Processing…
  • Excellent and very helpful. Great Presentation.

    Thanks for sharing.
    Parcel delivery from http://www.clickandsendparcel.com
    Are you sure you want to
    Your message goes here
    Processing…
  • Could have been longer and still concise.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery in 15 minutes Presentation Transcript

  • 1. jQuery in 15 minutes Torchbox, 7th August 2007
  • 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. The jQuery() function jQuery('div#intro h2') jQuery('div.section > p') jQuery('input:radio') $('div#intro h2')
  • 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. 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. 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. 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. 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. Going unobtrusive $(document).ready(function() { alert('The DOM is ready!'); }); $(function() { alert('This is a shortcut') });
  • 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. 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. 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. 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. Further reading • http://jquery.com/ - official site • http://visualjquery.com/ - useful API reference