Category Archives: JQuery

What’s new JQuery1.7 ?

source:: http://www.sitepoint.com/

The web’s most popular JavaScript library has been updated. jQuery 1.7 can now be downloaded from docs.jquery.com/Downloading_jQuery. Alternatively, if you prefer a CDN, use any of the following URLs:

http://code.jquery.com/jquery-1.7.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js

So let’s look at what’s new…
Removed Features

Before we look at the new and shiny stuff, you should check your existing code. Are you using:

event.layerX or event.layerY
jQuery.isNaN() (undocumented utility function)
jQuery.event.proxy() (undocumented method)

If you are, jQuery 1.7 may break your system.
New Event APIs: on() and off()

The new on() and off() methods unify event handling in jQuery so there’s no need to use bind(), delegate() or the older live() calls. The syntax:

view plainprint?

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [events] [, selector] [, handler] );

Example 1 — bind a click event to a link:
view plainprint?

// onclick
$(“a#mylink”).on( “click”, MyHandler );
// identical
// to: $(“a#mylink”).bind( “click”, MyHandler );
// or: $(“a#mylink”).click( MyHandler );

Example 2 — bind a click event to all items in an unordered list using a delegate:
view plainprint?

// onclick
$(“ul#mylist”).on( “click”, “li”, MyHandler );
// identical to:
// $(“ul#mylist”).delegate( “li”, “click”, MyHandler );

The existing bind() and delegate() methods still exist, but the team recommend you use on() and off() for all new projects using jQuery 1.7.
HTML5 Support for IE6, 7 and 8

Methods such as html() now support HTML5 tags such as header, footer and article. Note that you’ll still require the HTML5 shiv in those browsers.
New isNumeric() method

As you probably guessed, the new isNumeric() function returns true if a value is a number, e.g.
view plainprint?

$.isNumeric(10); // true
$.isNumeric(“10”); // true
$.isNumeric(0); // true
$.isNumeric(“”); // false
$.isNumeric(true); // false
$.isNumeric(Infinity); // false

New Callbacks() object

The jQuery.Callbacks() object returns a multi-purpose object used to manage callback lists. In essence, it’s a generalized way to queue and trigger a series of handlers. It’s an advanced feature — in most situations, the higher-level jQuery.Deferred object will be preferable.
Miscellaneous Improvements and Bug Fixes

The following issues have been addressed:

Delegate event performance has doubled in 1.7. The jQuery team identified that delegation had become increasingly important in application frameworks and made further optimizations to the core code.
Toggling animations including slideToggle() and fadeToggle() now work correctly following a termination of queued effects using stop().
The is() method now correctly filters positional selectors such as :first, :last and :even against the document — not the jQuery object passed to is().
The .removeData() method now accepts one or more keys within an array or a space-separated string.
The .stop() method can be passed an optional string representing the name of the animation queue.
jQuery now supports the Asynchronous Module Definition (AMD) for defining modules and dependencies.

Documentation Updates

For further details of all the new features, refer to the 1.7 documentation page. All new features are tagged with “New in 1.7″.
Should You Upgrade?

That’s the million dollar question. The jQuery team work hard to minimize compatibility issues and version 1.7 is unlikely to break your code. That said, if you’re particularly risk-averse, delay updating for a week or two. Minor bugs are normally found, fixed and released quickly

jQuery best performance practices

1. Passing the jQuery function a context can improve query performance

(function($) {
alert($(‘a’, document.getElementById(‘context’)).context.id); // Alerts “context”
alert($(‘a’, ‘#context’).context.nodeName); // No speed gain. Alerts “document”
})(jQuery);

2. Cache sets of selected elements that are used more than once
// Slow example:
for (i = 0; i < $('ul li').length; i++) { // Runs $('ul li') every iteration
$('ul').eq(i).text(); // Runs $('ul') every iteration
}
// Fast example:
var list = $('ul'); // Store query
var listLength = list.find('li').length; // Store length
for (i = 0; i < listLength; i++) { // Query pulled from memory
list.eq(i).text() // Query pulled from memory
}

3. Keep DOM changes to a minimum
// Slow example:
var list = $(‘ul’);
for (i = 0; i < 100; i++) {
list.append('

  • List item ‘ + i + ‘
  • ‘); // Interacts with the DOM 100 times
    }
    // Fast example:
    var listItems = ”; // Empty string
    for (i = 0; i < 100; i++) {
    listItems += '

  • List item ‘ + i + ‘
  • ‘; // Single string containing DOM structure
    }
    $(‘ul’).html(myListItems); // Use innerHTML to update the DOM only once

    4. Optimize by passing jQuery methods a key/value object
    // Slow example:
    $(‘a’).css(‘display’, ‘block’);
    $(‘a’).css(‘color’, ‘red’);
    $(‘a’).attr(‘title’, ‘Title Txt’);
    $(‘a’).atrr(‘href’, ‘http://www.jquery.com&#8217;);
    // Fase example:
    $(‘a’)
    .css({‘display’: ‘block’, ‘color’: ‘red’})
    .attr({‘title’: ‘Title Txt’, ‘href’: ‘http://www.jquery.com&#8217;});

    5. Optimize by passing multiple selectors to the jQuery function
    // Slow example:
    $(‘#div1’).hide();
    $(‘#div2’).hide();
    $(‘#div3’).hide();
    // Fast example:
    $(‘#div1, #div2, #div3’).hide();

    6. Optimize by leveraging chaining
    // Slow example, creates three instances of jQuery object
    $(‘div .open’).hide();
    $(‘div .close’).show();
    $(‘div’).fadeIn();
    // Fast example, uses chaining to re-purpose the orginal wrapper set
    $(‘div’)
    .find(‘.open’)
    .hide()
    .end()
    .find(‘.close’)
    .show()
    .end()
    .fadeIn();
    // Alternatively, do this:
    var $div = $(div); // Cache the wrapper set
    $div.find(‘.open’).hide();
    $div.find(‘.close’).show();
    $div.fadeIn();
    Use

    7. Use the native for loop when dealing with big loops
    Native browser functions are always faster! The question that needs to be answered in most cases is:
    How much faster? In most cases the increase is negligible. If that is the case, go ahead and use the
    jQuery each() method or utility function over a native JavaScript for loop.
    The rule of thumb I follow is most small looping tasks (less than a 1000 iterations) are perfectly
    suited for the jQuery each() utility method. The abstracted jQuery solutions for looping allow for
    easier coding, which I value over the negligible speed increase won by using a native approach with
    smaller loops. Truth be told, if I cannot feel a significant difference when using a page, I do not worry
    about optimization.
    Once you get into bigger loops (1000+ iterations) you might start measuring the difference by
    documenting the time it takes for a native function to execute vs. a jQuery solution. This test
    becomes critical when it comes to Internet Explorer, which runs notoriously slow with big loops of any
    kind.

    8. Apply visual changes via ID and Class vs. manipulating style properties

    .newStyles {
    background-color: red;
    display:block;
    height:100px;
    width:100px;
    }

    (function($) {
    // Slow example:
    $(‘div’).css({
    ‘display’: ‘block’,
    ‘width’: ‘100px’,
    ‘height’: ‘100px’,
    ‘background-color’: ‘#f00’
    });
    // Fast example:
    $(‘div’).addClass(‘newStyles’);
    })(jQuery);