How to Troubleshoot Apps for the Modern Connected Worker
Ā
Learning jQuery in 30 minutes
1. Learning
jQuery
in 30 minutes
Simon Willison http://simonwillison.net/
BarCamp London 3 24th November 2007
2. What is it?
ā¢ A JavaScript library, just like...
ā¢ Prototype
ā¢ YUI
ā¢ Dojo
ā¢ mooTools
3. 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!
4. jQuery philosophy
ā¢ Focus on the interaction between JavaScript
and HTML
ā¢ (Almost) every operation boils down to:
ā¢ Find some stuff
ā¢ Do something to it
5. 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
8. 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)
10. 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]
11. 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);
});
12. 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);
});
16. 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();
17. 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()
22. 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');
23. Advanced chaining
ā¢ Some methods return a different collection
ā¢ You can call .end() to revert to the previous
collection
24. 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()
25. 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)
26. Animation
ā¢ jQuery has built in effects:
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);
ā¢ You can chain them:
$('h1').fadeOut(1000).slideDown()
27. Or roll your own...
$(quot;#blockquot;).animate({
width: quot;+=60pxquot;,
opacity: 0.4,
fontSize: quot;3emquot;,
borderWidth: quot;10pxquot;
}, 1500);
28. 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