Learning jQuery in 30 minutes

Learning jQuery in 30 minutes Simon Willison http://simonwillison.net/ BarCamp London 3 24th November 2007

What is it? • A JavaScript library, just like... • Prototype • YUI • Dojo • mooTools

Why jQuery instead of...? • Unlike Prototype and mooTools... • ... it doesn’t interfere with your global namespace • Unlike YUI... • ... it’s extremely succinct • Unlike Dojo... • ... you can learn it in half an hour!

jQuery philosophy • Focus on the interaction between JavaScript and HTML • (Almost) every operation boils down to: • Find some stuff • Do something to it

Only one function! • Absolutely everything* starts with a call to the jQuery() function • Since it’s called so often, the $ variable is set up as an alias to jQuery • If you’re also using another library you can revert to the previous $ function with jQuery.noConﬂict(); * not entirely true

jQuery('#nav') jQuery('div#intro h2') jQuery('#nav li.current a')

$('#nav') $('div#intro h2') $('#nav li.current a')

CSS 2 and 3 selectors a[rel] a[rel=quot;friendquot;] a[href^=quot;http://quot;] ul#nav > li li#current ~ li (li siblings that follow #current) li:ﬁrst-child, li:last-child, li:nth-child(3)

Magic selectors div:ﬁrst, h3:last :header :hidden, :visible :animated :input, :text, :password, :radio, :submit... div:contains(Hello)

jQuery collections • $('div.section') returns a jQuery collection • You can call treat it like an array $('div.section').length = no. of matched elements $('div.section')[0] - the ﬁrst div DOM element $('div.section')[1] $('div.section')[2]

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() { console.log(this); });

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(i) { console.log(quot;Item quot; + i + quot; is quot;, this); });

HTML futzing $('span#msg').text('The thing was updated!'); $('div#intro').html('<em>Look, HTML</em>');

Attribute futzing $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');

CSS futzing $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted'); $('p').css('font-size', '20px'); $('p').css({'font-size': '20px', color: 'red'});

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() var hasFoo = $('p').hasClass('foo'); var email = $('input#email').val();

Traversing the DOM • jQuery provides enhanced methods for traversing the DOM $('div.section').parent() $('div.section').next() $('div.section').prev() $('div.section').nextAll('div') $('h1:ﬁrst').parents()

Handling events $('a:ﬁrst').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); });

Handling events $('a:ﬁrst').click(function(ev) { $(this).css({backgroundColor: 'orange'}); return false; // Or ev.preventDefault(); }); $('a:ﬁrst').click();

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

Going unobtrusive $(function() { alert('The DOM is ready!'); });

Chaining • Most jQuery methods return another jQuery object - usually one representing the same collection. This means you can chain methods together: $('div.section').hide().addClass('gone');

Advanced chaining • Some methods return a different collection • You can call .end() to revert to the previous collection

Advanced chaining • Some methods return a different collection • You can call .end() to revert to the previous collection $('#intro').css('color', '#cccccc'). ﬁnd('a').addClass('highlighted').end(). ﬁnd('em').css('color', 'red').end()

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)

Animation • jQuery has built in effects: $('h1').hide('slow'); $('h1').slideDown('fast'); $('h1').fadeOut(2000); • You can chain them: $('h1').fadeOut(1000).slideDown()

Or roll your own... $(quot;#blockquot;).animate({ width: quot;+=60pxquot;, opacity: 0.4, fontSize: quot;3emquot;, borderWidth: quot;10pxquot; }, 1500);

Plugins • jQuery is extensible through plugins, which can add new methods to the jQuery object • Form: better form manipulation • UI: drag and drop and widgets • $('img[@src$=.png]').iﬁxpng() • ... dozens more

jQuery.fn.hideLinks = function() { this.ﬁnd('a[href]').hide(); return this; } $('p').hideLinks();

jQuery.fn.hideLinks = function() { return this.ﬁnd('a[href]').hide().end(); } $('p').hideLinks();

Further reading • http://jquery.com/ • http://docs.jquery.com/ • http://visualjquery.com/ - API reference • http://simonwillison.net/tags/jquery/

http://www.dreamcss.com	1489
http://easyone.tistory.com	1433
http://miageprojet2.unice.fr	1294
http://achmatim.net	966
http://www.slideshare.net	477
http://cachina.wordpress.com	265
http://www.jquery.allindoc.com	243
http://www.consumingexperience.com	173
http://cotradeco.com	147
http://www.ajaxfreak.com	89
http://www.tsingfeng.com	81
http://www.jordimir.com	70
http://blog.cachina.com.br	65
http://webtutorials4u.com	62
http://yeonhee470.tistory.com	56
http://dreamcss.blogspot.com	54
http://www.doutdex.com	49
http://iyambae-on-net.blogspot.com	36
http://blog.csdn.net	33
http://francescoagati.wordpress.com	24
http://satrion.wordpress.com	24
http://www.istudyiwin.com	21
http://jsgod.wordpress.com	20
http://static.slidesharecdn.com	19
http://vothanhduy.wordpress.com	17
http://r-ednalan.blogspot.com	16
http://web-tech2008.blogspot.com	15
http://jsupdates.dev	15
http://sc-net.blogspot.com	15
http://static.slideshare.net	13
http://kms.sec.samsung.net	12
http://www.agglom.com	11
http://54.225.146.167	10
http://cdcjava.blogspot.tw	10
http://translate.googleusercontent.com	10
http://web2.c2.cyworld.com	10
http://jsupdates.com	9
http://blog.kwiat.org	9
http://js-pc.blogspot.com	7
http://web-tech2008.blogspot.in	7
http://cdcjava.blogspot.com	7
http://vothanhduy.com	5
http://blog.edatis.net	5
http://sc-net.blogspot.pt	5
http://www.webgox.com	5
http://www.helloks.com	4
http://www.weebly.com	3
http://wildfire.gigya.com	3
http://sc-net.blogspot.ru	3
http://spvalenc.blogspot.com	3
http://bucktowndigital.com	3

Learning jQuery in 30 minutes

by Simon Willison

Accessibility

Categories

Upload Details

Usage Rights

100 Embeds 7,484

Statistics

Learning jQuery in 30 minutes Presentation Transcript