jQuery in 15 minutes

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

11 comments

Comments 1 - 10 of 11 previous next Post a comment

Comments 1 - 10 of 11 previous next

Post a comment
Embed Video
Edit your comment Cancel

141 Favorites & 6 Groups

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

+ simonsimon, 3 years ago

custom

110435 views, 141 favs, 160 embeds more stats

A short introduction to jQuery.

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 110435
    • 98568 on SlideShare
    • 11867 from embeds
  • Comments 11
  • Favorites 141
  • Downloads 2890
Most viewed embeds
  • 2110 views on http://webtecker.com
  • 1569 views on http://www.elwebmaster.com
  • 1406 views on http://woork.blogspot.com
  • 974 views on http://phpspot.org
  • 916 views on http://ajaxian.com

more

All embeds
  • 2110 views on http://webtecker.com
  • 1569 views on http://www.elwebmaster.com
  • 1406 views on http://woork.blogspot.com
  • 974 views on http://phpspot.org
  • 916 views on http://ajaxian.com
  • 810 views on http://www.pinceladasdaweb.com.br
  • 458 views on http://www.webadictos.com.mx
  • 357 views on http://flora.org.ru
  • 283 views on http://geekfreak.wordpress.com
  • 215 views on http://zhilinsky.ru
  • 172 views on http://www.dreamcss.com
  • 172 views on http://charlie-blog.com
  • 122 views on http://podlipensky.com
  • 113 views on http://blog2js.appspot.com
  • 112 views on http://blog.aplicacionesweb.cl
  • 105 views on http://dreamcss.blogspot.com
  • 100 views on http://www.gfxdizayn.com
  • 99 views on http://www.webthreads.de
  • 92 views on http://teknodergi.org
  • 87 views on http://jsgt.org
  • 86 views on http://www.sastgroup.com
  • 86 views on http://www.getincss.ru
  • 84 views on http://aspdotnetcodebook.blogspot.com
  • 66 views on http://code-import.blogspot.com
  • 57 views on http://pegapacapa.wordpress.com
  • 54 views on http://ipm.pe.kr
  • 53 views on http://www.ajaxian.com
  • 51 views on http://www.barbarosalp.com
  • 49 views on http://checkengineusa.com
  • 46 views on http://jingjing.kr
  • 43 views on http://www.camondongs.com.br
  • 41 views on http://pviojo.net
  • 41 views on http://mayos-weblog.blogspot.com
  • 40 views on http://www.tableless.com.br
  • 36 views on http://acidminds.com
  • 33 views on http://www.ajax-tutorials.com
  • 32 views on http://www.jordimir.com
  • 30 views on http://www.sliversofmysoul.netsons.org
  • 30 views on http://www.net4java.com
  • 27 views on http://cachina.wordpress.com
  • 26 views on http://localhost
  • 26 views on http://www.agglom.com
  • 25 views on http://home.intesys.it
  • 25 views on http://webthreads.de
  • 24 views on http://webstandard.kulando.de
  • 24 views on http://netcultures.wordpress.com
  • 24 views on http://d.hatena.ne.jp
  • 23 views on http://www.geekomatik.com
  • 22 views on http://dev.citycash.fr
  • 19 views on http://mydatum.tistory.com
  • 15 views on http://argus.tistory.com
  • 15 views on http://kaloyan.info
  • 13 views on http://knitinr.blogspot.com
  • 13 views on http://static.slideshare.net
  • 12 views on http://www.netvibes.com
  • 11 views on http://blog.jowe.biz
  • 11 views on http://www.techbirbal.com
  • 10 views on http://gustavobarrientos.blogspot.com
  • 9 views on http://sc-net.blogspot.com
  • 9 views on http://www.yuiworld.kr
  • 9 views on http://dianasoares.blogspot.com
  • 9 views on http://diegusweb.blogspot.com
  • 9 views on http://www.eng.ajaxian.com
  • 8 views on http://techno-sphere.blogspot.com
  • 8 views on http://blog.useful-media.org
  • 8 views on http://blogs.globaltek.pt
  • 7 views on http://www.citycash.fr
  • 7 views on http://feeds.feedburner.com
  • 7 views on http://www.thinkingphp.org
  • 6 views on http://lj-toys.com
  • 6 views on http://markup.tistory.com
  • 6 views on http://www.webgox.com
  • 5 views on http://www.hanrss.com
  • 5 views on http://www.easy-coding.de
  • 5 views on http://blog.zeandesign.net
  • 5 views on http://yichaowang.com
  • 5 views on http://gongliang.blogspot.com
  • 5 views on http://webprogrammer.tistory.com
  • 5 views on http://riix.pe.kr
  • 5 views on http://weboverhauls.com
  • 4 views on http://alvar.laigna.ee
  • 4 views on http://s3.amazonaws.com
  • 4 views on http://www.code-import.blogspot.com
  • 4 views on http://www.beautiful-mindz.org
  • 3 views on http://webtutorials4u.com
  • 3 views on http://feeds2.feedburner.com
  • 3 views on http://64.233.169.104
  • 3 views on http://km2factory.sud.capgemini.fr
  • 3 views on http://www.borisding.com
  • 3 views on file://
  • 3 views on http://board.helpwing.org
  • 3 views on http://lcidral.blogspot.com
  • 3 views on http://blog.losfinkos.com
  • 3 views on http://ajaxus.net
  • 2 views on http://elanso.com
  • 2 views on http://72.14.235.132
  • 2 views on http://74.125.153.132
  • 2 views on http://www.paperblog.fr
  • 2 views on http://drfranca.com
  • 2 views on http://www.filescon.com
  • 2 views on http://www.ajax-blog.com
  • 2 views on http://brianrig.gs
  • 2 views on http://www.95concepts.com
  • 2 views on http://1nation.eu
  • 2 views on http://64.233.183.104
  • 2 views on http://www.teknodergi.org
  • 1 views on http://barbarosalp.com
  • 1 views on http://www.zhilinsky.ru
  • 1 views on http://monw3c.blogbus.com
  • 1 views on http://test2.citycash.fr
  • 1 views on http://citycash.fr
  • 1 views on http://openke.org
  • 1 views on http://74.125.39.132
  • 1 views on http://web-team.net.ua
  • 1 views on http://guilhermecavalcanti.com
  • 1 views on http://labs.friendsinteraction.com
  • 1 views on http://hghltd.yandex.net
  • 1 views on http://209.85.229.132
  • 1 views on http://64.233.163.132
  • 1 views on http://64.233.161.132
  • 1 views on http://www.kaloyan.info
  • 1 views on http://www.microsofttranslator.com
  • 1 views on http://74.125.47.132
  • 1 views on http://rssnews.org.ua
  • 1 views on http://www.eseltoeter.info
  • 1 views on http://localhost:8080
  • 1 views on http://egox.tumblr.com
  • 1 views on http://64.233.167.104
  • 1 views on https://s3.amazonaws.com
  • 1 views on http://www.studipf.de
  • 1 views on http://blog.ericsk.org
  • 1 views on http://sedat.web.tr
  • 1 views on http://www.jsgt.org
  • 1 views on http://fc6.web-4you.info
  • 1 views on http://panthers-page.de
  • 1 views on http://209.85.165.104
  • 1 views on http://www.croforumi.com
  • 1 views on http://189.70.166.96
  • 1 views on http://www.phpchina.com
  • 1 views on http://cristianosilva.wordpress.com
  • 1 views on http://thinkingphp.org
  • 1 views on http://www.thotcloud.com
  • 1 views on http://wildfire.gigya.com
  • 1 views on http://xss.yandex.net
  • 1 views on http://gfxdizayn.com
  • 1 views on http://gonzalolopez.net
  • 1 views on http://plappermäuse-welt.de
  • 1 views on http://borisding.com
  • 1 views on http://66.102.9.100
  • 1 views on http://mitchgroff.info
  • 1 views on http://web1.hotel392.server4you.de
  • 1 views on http://reader.youdao.com
  • 1 views on http://www.zhuaxia.com
  • 1 views on http://74.125.93.104
  • 1 views on http://www.rapidsharefresh.com
  • 1 views on http://blackboard.swan.ac.uk
  • 1 views on http://72.14.235.104
  • 1 views on http://test.citycash.fr
  • 1 views on http://209.85.215.104
  • 1 views on http://ejohn.org

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories