• Matt Nowack
• Associate Consultant
• HMB Information System Developers

---

• 5 years experience in Web Design
• Using jQuery for the last 3.5 years
• First: Credit where credit is due

• Created by John Resig in 2006
• Lightweight, cross-browser JavaScript Library.
• Used by 30% of the Top 10,000 sites¹

• Microsoft ships jQuery with Visual Studio to support ASP.NET MVC
• Nokia uses jQuery with their widget platform
• Smalltalk's Seaside framework fully integrates jQuery
• Ruby on Rails is compatible with jQuery
• and many many more...

• Tons of internal cleanup
• YUI Min OUT, Closure Compiler IN
• Fragment Caching
• Pervasive Context

• Reduction of Interdependencies
• core is heading towards kernal
• $.ready moved to core

• YUI Minifier was replaced starting in 1.4
• Replaced by Google's Closure Compiler
• 13% decrease in minified filesize

• DOM Fragment Caching
• Pervasive use of context
• Internal helper methods and restructuring

• $.live() was introduced in version 1.3
• Similar to $.bind() but using dynamic event delegation
• Efficient and concise way to provide client-side interaction

$('select.example').live('change', function(e) {
  show( 'Value changed to ' + $(this).val(), 'live-change-console' );
});
            

$('form.example').live('submit', function(e) {
     show( e.target + ' has submitted', 'live-submit-console' );
     return false;
});            
            

$('input:text.example').live('focusout', function() {
    $(this).css('border', '10px dashed red');
});

$('input:text.example').live('focusin', function() {
    $(this).css('border', 'none');
});
            

$('div.hoverbox').live('mouseenter', function(e) {
  $(this).css('backgroundColor', 'red');
});
$('div.hoverbox').live('mouseleave', function(e) {
  $(this).css('backgroundColor', 'blue');
});        	 
        	 

$('p.example').live('myCustomEvent', function(e) {
  $(this).text("Hi there!");
});

<button onclick="$('p.example').trigger('myCustomEvent');">Trigger</button>

            

$('a.example', $('#live-context-area')[0]).live('click', function() { 
  show( 'Hello', 'live-context-console'); 
});
            

• Setter functions have been around since the beginning
• Includes things like .html(...) .val(...) .attr('something', '...')
• jQuery 1.4 changes the API to make them more versatile and powerful

$('a.setter').attr('href', function() {
  var newhref = $(this).attr('href') + '?' + +new Date();
  $(this).attr('href', newhref);                        
});
            

$('a.setter').attr('href', function(i, href) {
  return href + '?' + +new Date();
});
            

$('a.setter').attr('href', function() {
  var newhref = $(this).attr('href') + '?' + +new Date();
  $(this).attr('href', newhref);                        
});
            

$('a.setter').attr('href', function(i, href) {
  return href + '?' + +new Date();
});
            

• .css()
• .attr()
• .val()
• .html()
• .text()
• .append()

• .prepend()
• .offset()
• .addClass()
• .removeClass()
• .toggleClass()

• .before()
• .after()
• .replaceWith()
• .wrap()
• .wrapInner()

$('a').html(function(i, html) {
  return html.replace( /&amp;/gi, '<span class="amp">&amp;</span>');
});
            

$('#animateTarget').animate({
    width: ["+=200px", "linear"], 
    height: ["+=200px", "easeOutBounce"]
  }, 1000);        
            

$('#notice').fadeIn().delay(3000).fadeOut();
            

$('#cqTarget').clearQueue();
            

$('#multi-bind').bind({
  click: function() {
    $(this).text('Mouse Clicked');
  },
  mouseenter: function() {
    $(this).text('Mouse Entered');
  },
  mouseleave: function() {
    $(this).text('Mouse Left');
  }
});
            

var div = $('<div/>', {
  id: 'example',
  css: {
    height: '100px',
    width:  '100px',
    color:  'blue',
    backgroundColor: 'green'
  },
  click: function() {
    $(this).css('backgroundColor', 'red');
  }
});          
// <div id="example" 
//      style="height: 100px; width: 100px; color: blue; background: green"
//      onclick="$(this).css('backgroundColor', 'red');">