jQuery in 15 minutes

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 ﬁrst 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/ﬁle.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/ - ofﬁcial site • http://visualjquery.com/ - useful API reference

http://www.learningjquery.com	32030
http://www.elwebmaster.com	5177
http://woork.blogspot.com	4225
http://webtecker.com	3825
http://www.dreamcss.com	1577
http://www.learningjquery.com.	1346
http://miageprojet2.unice.fr	1324
http://phpspot.org	1188
http://www.pinceladasdaweb.com.br	1012
http://www.slideshare.net	948
http://ajaxian.com	916
http://blog2js.appspot.com	788
http://www.webadictos.com.mx	458
http://www.barbarosalp.com	455
http://feeds2.feedburner.com	381
http://jquery.collected.info	378
http://woork.blogspot.in	373
http://geekfreak.wordpress.com	369
http://flora.org.ru	357
http://cachina.wordpress.com	286
http://webprogrammer.tistory.com	284
http://podlipensky.com	278
http://swik.net	255
http://feeds.feedburner.com	238
http://aspdotnetcodebook.blogspot.com	215
http://zhilinsky.ru	215
http://www.getincss.ru	179
http://charlie-blog.com	172
http://learningjquery.com	158
http://www.iinterest.net	152
http://d.hatena.ne.jp	144
http://www.jquery.allindoc.com	142
http://mydatum.tistory.com	139
http://pegapacapa.wordpress.com	120
http://www.cnblogs.com	118
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://translate.googleusercontent.com	87
http://www.jordimir.com	86
http://www.sastgroup.com	86
http://code-import.blogspot.com	66
http://blog.cachina.com.br	66
http://janaksodha.com	65
http://knitinr.blogspot.com	63
http://www.camondongs.com.br	59

jQuery in 15 minutes

by Simon Willison

Accessibility

Categories

Upload Details

Usage Rights

337 Embeds 63,983

Statistics

jQuery in 15 minutes Presentation Transcript