• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery in 15 minutes
 

jQuery in 15 minutes

on

  • 298,850 views

A short introduction to jQuery.

A short introduction to jQuery.

Statistics

Views

Total Views
298,850
Views on SlideShare
228,083
Embed Views
70,767

Actions

Likes
204
Downloads
5,952
Comments
22

361 Embeds 70,767

http://www.learningjquery.com 35840
http://www.elwebmaster.com 5607
http://webtecker.com 4488
http://woork.blogspot.com 4321
http://miageprojet2.unice.fr 1847
http://www.dreamcss.com 1654
http://www.learningjquery.com. 1346
http://phpspot.org 1193
http://www.pinceladasdaweb.com.br 1028
http://www.slideshare.net 948
http://ajaxian.com 916
http://blog2js.appspot.com 842
http://www.barbarosalp.com 580
http://webprogrammer.tistory.com 458
http://www.webadictos.com.mx 458
http://feeds2.feedburner.com 437
http://woork.blogspot.in 425
http://jquery.collected.info 406
http://geekfreak.wordpress.com 388
http://flora.org.ru 357
http://cachina.wordpress.com 333
http://feeds.feedburner.com 330
http://podlipensky.com 278
http://swik.net 267
http://aspdotnetcodebook.blogspot.com 225
http://zhilinsky.ru 215
http://www.getincss.ru 189
http://www.jquery.allindoc.com 177
http://charlie-blog.com 172
http://d.hatena.ne.jp 171
http://www.iinterest.net 168
http://mydatum.tistory.com 161
http://learningjquery.com 158
http://www.cnblogs.com 136
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://www.sastgroup.com 86
http://theoldreader.com 83
http://knitinr.blogspot.com 72
http://barbarosalp.com 70
http://blog.cachina.com.br 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

110 of 22 previous next 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…

110 of 22 previous next

Post Comment
Edit your comment

    jQuery in 15 minutes jQuery in 15 minutes Presentation Transcript

    • jQuery in 15 minutes Torchbox, 7th August 2007
    • 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
    • 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() = no. of matched elements $('div.section').each(function(div) { // Manipulate the div }
    • 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');
    • 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()
    • 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()
    • 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(); });
    • 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 can chain methods together: $('div.section').hide().addClass('gone');
    • 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
    • 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)
    • 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
    • Further reading • http://jquery.com/ - official site • http://visualjquery.com/ - useful API reference