Saturday 24 November 2007

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

No comments: