Improve Your Web App with jQuery


Improve Performance

Event Delegation


$("table").delegate("td", "hover", function(){

Live Events

$("").live("hover", function(){
  return false;

Caching with Fragments


Document Fragments

var div = document.createElement("div");
div.innerHTML = "<li><a></a></li>";
var fragment = document.createDocumentFragment();
while ( div.firstChild ) {
  fragment.appendChild( div.firstChild );

Document Fragments

someDiv.appendChild( fragment ); // one operation!

jQuery from a CDN

<script src=''></script>

Minified and Gzipped

Improve Accessibility

Unobtrusive Scripting

  return false; // stop the browser from visiting the link

Ready Event

	// Your jQuery code goes in here

Click and Load

  $(this).next().load( this.href );
  return false;

Extra Header


.load() page fragment

$("div.load").load("file.html h2");

Reduce Complexity

Data Storage

$("div").data("test", 5);
$("div").data("test") === 5;

Internal Data Storage

// Get all event handlers bound to an element

Removing Data

// Remove all data bound to an element
$("div").remove(); // also removes data

Data Events

$("div").bind("getData.value", function(){
  return myPlugin.realValue;

Custom Events

$("div").bind("myplugin", someFn);

Event Namespaces

$("div").bind("click.plugin", someFn);
$("div").bind("focus.plugin", otherFn);

Events and Plugins

$("div").bind("remove.pluginA", someFn);
$("div").bind("remove.pluginB", otherFn);

Special Events


if ( document.addEventListener ) {
  jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
    jQuery.event.special[ fix ] = {
      setup: function() {
        this.addEventListener( orig, handler, true );
      teardown: function() { 
        this.removeEventListener( orig, handler, true );

    function handler( e ) { 
      e = jQuery.event.fix( e );
      e.type = fix;
      return this, e );


$(document).bind("keydown", "ctrl+a", function(){
  return false; // Prevent selecting all the text

Simplify Design

jQuery UI


What are we working on?

More Information