jQuery 1.4

What you need to know

This presentation is an HTML5 website

Who are you?

  • 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

Paul Irish: jQuery 1.4 Hawtness

http://jQuery14.com

jQuery History

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

Who's using jQuery

  • 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...

Who Else?

jQuery 1.4
==
Awesome to the Max

Internal Changes

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

Modularization

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

Minification

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

Performance

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

New Stuff

Let's jump into some new features

Improvements to $.live()

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

Support for the "change" event

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

Support for the "submit" event

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

Support for "focusin" and "focusout"

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

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

Support for "mouseenter" and "mouseleave"

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

Support for custom events

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

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

            

Example <p>

Contexts lead to Performance Gain

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

That's it for $.live()


On to Setters!

Improvements to Setter Functions

  • 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

Let's look at an example!

Old 1.3 Way

$('a.setter').attr('href', function() {
  var newhref = $(this).attr('href') + '?' + new Date();
  $(this).attr('href', newhref);                        
});
            
Works fine, kind of cumbersome
If only there were a better way...

New Rocket Sauce in 1.4

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

What now?!

$('a.setter').attr('href', function(i, href) {
  return href + '?' + new Date();
});
            
The function is now passed an index and the current value
The attribute is set to the return value

Rocket Sauce

Setters with Current Value

  • .css()
  • .attr()
  • .val()
  • .html()
  • .text()
  • .append()
  • .prepend()
  • .offset()
  • .addClass()
  • .removeClass()
  • .toggleClass()

Setters without Current Value

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

One more example

$('a').html(function(i, html) {
  return html.replace( /&amp;/gi, '<span class="amp">&amp;</span>');
});
            
Wrap all &'s with span tags to allow for styling

Time for some shiny



ANIMATIONS!

Per-property easing

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

New $.delay API

$('#notice').fadeIn().delay(3000).fadeOut();
            
I'm the notice!

clearQueue: animation anti-lock brakes

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

Enough shiny

Let's talk multi-bind

Seriously, write less, do more

$('#multi-bind').bind({
  click: function() {
    $(this).text('Mouse Clicked');
  },
  mouseenter: function() {
    $(this).text('Mouse Entered');
  },
  mouseleave: function() {
    $(this).text('Mouse Left');
  }
});
            
I'm bound to lot's of things

Last but not least

New Element Creation syntax

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');">
            

Thank you

Go get your jQuery on