BarCamp London: Learning jQuery - Simon Willison

• simpler than Dojo
• Prototype & mooTools stick lots of functions in your namespace — don’t interact well

Step 1: get some stuff

e.g. jQuery('div#intro') — find DIVs with id # intro

jQuery provides lots of CSS 2&3 selectors

• e.g. li#current ~ li (LI siblings that follow #current)

also lots of magic selectors (begin with colons)

essentially a domain-specific language for querying the DOM

Step 2: do stuff

return a jQuery collection

• can be treated as a javascript array
• can also call methods on it (e.g. ~.each(function() { ... }) )
• can also modify it by calling methods like .attr()

can also control css properties & html content, including animations

using Simon’s bookmarklet called “inject jQuery” that injects the jQuery object into any HTML page live

• can then use Firebug console to try things out interactively

jQuery also lets you introspect the DOM objects

• e.g. can call height & width — very useful for drag & drop etc.
• traversing DOM — parent, next, etc

in functions that you add to jQuery objects, often refer to $(this) in order to set something on the page that’s just been called

Unobtrusive javascript — get the page working without and then add a bunch of javascript to enhance the functionality

• in order to do that, need to call javascript when DOM is ready
• jQuery has $(document).ready(), but has been overloaded into $(function() {...}) call

jQuery allows method chaining (like LiFT) to provide concise representations, and end() method provides descoping:

• methods that change context can then be descoped to get back to previous context
• works well with find() method

AJAX & Animation

can load any external URI into the innerHTML of jQuery collection

can chain animations — one will happen after the other

can also roll your own animations

Plugins

one to fix PNGs in IE, another to help with drag & drop

can write your own

Further reading

Good API reference — http://visualjquery.com