About Dave Methvin

CTO, PC Pitstop http://pcpitstop.com

jQuery 1.2.6 Released

Posted on by

This is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker

This is the next release immediately following jQuery 1.2.3. Releases 1.2.4 and 1.2.5 were skipped (1.2.4 was built incorrectly, rendering it effectively identical to 1.2.3, and 1.2.5 was missing a patch).

The entire jQuery team did a fantastic job in pulling this release together – I want to take this opportunity to thank them all for their continued hard work.

I’d also like to take this opportunity to welcome Ariel Flesler to the core jQuery development team. He provided valuable help in pulling this release together – contributing bug fixes, performance improvements, features, and test cases. You can see the result of his hard work all throughout this release. Welcome Ariel and thank him for all his contributions!

Downloading

jQuery 1.2.6:

Performance Improvements

Once again the jQuery team has worked hard to bring huge performance improvements in this release. As with previous releases we’ve expanded to look at many areas of the jQuery framework, looking for common pain points, and providing relief.

All data and test cases for the below performance improvements can be found in the following jQuery 1.2.3 v. 1.2.6 Google Spreadsheet (results for Internet Explorer 6 were excluded in favor of Internet Explorer 7 due to their virtually-identical results).

Event Handling is 103% Faster

In analyzing intense application code (specifically operations such as drag-and-drop) we looked for ways in which universal changes could be made that would affect all users. A frequently-called piece of code was that of the jQuery event handler, any optimizations to it would dramatically improve the performance of all resulting frequently-called events. By focusing improvements here all frequently-called events that you have should see immediate benefits.

CSS Selectors are 13% faster

A number of optimizations have been made to internal jQuery methods, dramatically improving their performance, while providing measurable benefit to some of the most commonly used code in jQuery (such as the CSS Selector code).

For example the jQuery.map() method is now 866% faster and jQuery.extend() is 19% faster. These two changes have allowed for dramatic improvements in performance all throughout the library.

.offset() is 21% faster

Together with the improvements to jQuery’s event handling code optimizations of .offset() have allowed intense mouse-based operations to become much faster. For example jQuery UI’s drag-and-drop code is now over 300% faster because of these change (allowing you to achieve faster, smoother, drag-and-drop operations).

.css() is 25% faster

A method that’s frequently called (both internally and externally). The optimizations to this method are easily felt in others (like .offset(), for example).

New Features and Major Changes

Dimensions Plugin is Now Part of Core

The remaining methods of the Dimensions plugin, by Brandon Aaron, have been introduced into jQuery core, along with additional bug fixes and performance improvements. This plugin has seen considerable use amongst developers and plugin authors and has become a solid part of the jQuery ecosystem. We’ve been, slowly, introducing the most-used methods from the Dimensions plugin over the past couple releases – but with the release of 1.2.6 all remaining methods are now part of core.

If you’re upgrading your copy of jQuery to version 1.2.6 you can now opt to exclude the Dimensions plugin from your code.

The full documentation for Dimensions can be found on the jQuery API docs site (and is in the process of becoming integrated with the core jQuery documentation).

.attr() overhaul

The .attr() method has been completely overhauled (resolving about 15 outstanding bugs). Additionally, the method has been significantly simplified and optimized.

.toggle() can now accept more functions

Historically jQuery’s .toggle() function has accepted two functions (to be toggled in an even/odd manner). However that has been changed so that any number of functions can be provided and toggled by a mouse click.

$("div").toggle(function(){
  $(this).removeClass("three").addClass("one");
}, function(){
  $(this).removeClass("one").addClass("two");
}, function(){
  $(this).removeClass("two").addClass("three");
});

You can now unbind bound .toggle() and .one() functions

function test(){ $(this).addClass("test"); }
$("div").one("click", test);
$("div").unbind("click", test);

$("div").toggle(test, test);
$("div").unbind("click", test);

.index() supports jQuery collections

jQuery’s .index() function has allowed you to find the location of a DOM element in the jQuery collection – now you can also specify a jQuery collection (the first element of which will be extracted and located in the original set).

var test = $("div.test");
$("div").index( test ) == 3

jQuery.makeArray can convert ANYTHING to an array.

jQuery’s internal .makeArray() method now converts any array-like object into a new array. Additionally it wraps all other objects as an array and returns the resulting set.

jQuery.makeArray( document.getElementsByTagName("div") )
// => [ div, div, div ]

jQuery.makeArray( true )
// => [ true ]

jQuery.makeArray()
// => []

beforeSend can cancel Ajax calls

The beforeSend Ajax callback has allowed developers to execute a piece of code prior to a request occurring – now that code can also verify the integrity of some parameters and cancel the resulting Ajax request (useful for tasks like form validation).

$.ajax({
  beforeSend: function(){
    return $("#input").val() == "";
  },
  url: "test.php"
});

Exposed Speeds

jQuery has a number of named animation speeds (such as ‘slow’, ‘fast’, and ‘default’) you can now provide your own names for animation speeds, or modify the existing ones, by manipulating the jQuery.fx.speeds object.

jQuery.fx.speeds.slow = 1000;
$("#test").slideDown("slow");

jQuery 1.2.3 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.3:

.data() and .removeData()

These methods complement the already included jQuery.data and jQuery.removeData methods introduced in jQuery 1.2. The important change, however, is that they’ve been tailored for plugin developers. You can now namespace data additions – like you can with event binding/unbinding. For example:

  $("div").data("test", "original");
  $("div").data("test.plugin", "new data");
  alert( $("div").data("test") == "original" ); // true
  alert( $("div").data("test.plugin") == "new data" ); // true

Additionally, getting or setting data values can be overridden by a plugin. For example, the following code is from the, recently updated, draggables in jQuery UI:

  $(element).bind("setData.draggable", function(event, key, value){
     self.options[key] = value;
  }).bind("getData.draggable", function(event, key){
     return self.options[key];
  });

The above makes it such that all attempts to get and set draggable-namespaced data will be intercepted and handled by the plugin directly (rather than being bound directly to the element). The result is a powerful new interface for dealing with internalized data within a plugin.

.unbind(“.namespace”)

In jQuery 1.2 you could add and remove namespaced events, however you always had to include a name for the type of event being used. With this addition you can now remove all bound events that match a particular namespace, for example:

  $("div").bind("click.plugin", function(){});
  $("div").bind("mouseover.plugin", function(){});
  $("div").unbind(".plugin"); // All handlers removed

The above removes all bound event handlers that are within the “plugin” namespace.

jQuery 1.2.2 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.2:

Important Changes

A lot of hard work was put into this release by Brandon Aaron and David Serduke. David is a new addition to the jQuery core development team and has been making significant contributions – please help us in welcoming him!

Primarily, this has been a bug fix and optimization release. We landed over 120 bug fixes and our test suite now has over 1157 tests in it – which we are quite proud of.

300% Speed Improvements to $(DOMElement)

Once again, we’ve taken a step at micro-improving the most-used features in jQuery. Specifically, the use of passing a DOM element into the jQuery function. (Most frequently used when you see stuff like $(this) in your code.)

Here’s a quick peek at some of the speed jumps that you can expect in all the major browsers:

Browser 1.2.1 (ms) 1.2.2 (ms)
Firefox 2 0.041 0.015
Firefox 3 0.033 0.01
Safari 3 0.017 0.005
Opera 9 0.023 0.004
Internet Explorer 6 0.04 0.03

.ready() Overhaul

The document ready function has been long due for some extra love. We’ve made a number of specific changes.

  • Internet Explorer document ready drastically improved. We use a new technique inspired by Diego Perini. It allows us to not have to do a document.write() anymore, which is really fantastic.
  • All browsers now wait for CSS to be ready, in addition to just the DOM. In reality, it’s not just a vanilla document ready anymore – but we found that users, overwhelmingly, needed to wait for document styling to be active (such as knowing if an element is visible, or what its height is). Specifically we’ve added improvements to Safari and Opera to make this possible.
  • $(document).bind("ready", fn); – You can now watch for the document ready event via the traditional .bind() function. Of course, .ready() still works as you would expect it to.

.bind(“mouseenter”) / .bind(“mouseleave”)

The functionality that was the core of the .hover() function has been split out into two new cross-browser events: mouseenter and mouseleave. These are different from mouseover and mouseout as those events will fire as you move in and out of child elements (which is generally not desired). For example, the following are both valid and work perfectly in jQuery 1.2.2:

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});
$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
});

.bind(“mousewheel”)

We have [http://dev.jquery.com/browser/trunk/plugins/mousewheel/jquery.mousewheel.js a new plugin], written by Brandon Aaron, based on the new Event API which adds mousewheel event support to jQuery core. This will allow you to write things like:

$("div").bind("mousewheel", function(event, delta){
  if ( delta < 0 )
    $(this).append("up");
  else
    $(this).append("down");
});

Complex :not()

Even though it's not part of the CSS 3 specification it's been a common feature request - so you can now do complex expressions in your :not() selectors. For example, the following now work:

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

Accept Headers

For normal jQuery Ajax operations we now send an extra Accept header to let the server know what kind of content we're looking for. If you specify a dataType argument then we'll take care of all the header setting for you. We currently send the following headers for each dataType.

  • xml "application/xml, text/xml"
  • html "text/html"
  • script "text/javascript, application/javascript"
  • json "application/json, text/javascript"
  • text "text/plain"
  • Everything else: "*/*"

Bug Fixes

Here's a sampling of some of the functionality that's seen some important overhauling.

  • .clone() overhaul
  • Script evaluation overhaul
  • height() / width() overhaul
  • Cross-frame DOM manipulation
  • A few memory leaks have been resolved

Event API

There's a new API for dealing with events. You can now create your own custom event types (with custom ways of being set up and torn down). Effectively, it allows you to go beyond simple event triggering and create a full scheme for attaching, handling, and tearing down events on an element. A [http://dev.jquery.com/browser/trunk/plugins/mousewheel/jquery.mousewheel.js demonstration plugin] was created by Brandon Aaron that you can use to learn the powerful new API.

jQuery 1.2.1 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery Minified (14kb with gzipping)
jQuery Packed (26kb)
Regular (77kb)

Important Changes

Relative Animations

There was a serious error in the API for the new relative animations that caused a conflict with existing animation styles. To resolve this, in order to do a relative animation, you must now use the following syntax:
$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

With += meaning “Add to the current position” and -= meaning “Take away from the current position”.

.eq()

Due to some very-persuasive arguments, and a great deal of reconsideration, .eq() has been brought back. A great number of plugins rely on this single method – and the alternative provided by .slice() simply wasn’t as elegant a solution as what was originally provided.

jQuery 1.2 Released

Posted on by

Downloading

jQuery 1.2:
jQuery Minified (14kb with gzipping)
jQuery Packed (26kb)
jQuery Regular (77kb)

New Features

Partial .load()

Partial .load() allows you to load chunks of HTML documents into your page, filtered by a jQuery selector. This works just like a normal Ajax .load(), but you just specify a selector immediately following the URL that you’re retrieving.

Cross-Domain $.getScript

You can now use getScript to dynamically load, and execute, remote scripts. This could be used to load in jQuery plugins or other code modules.

Cross-Domain $.getJSON (using JSONP)

JSONP is a technique that allows you to transfer JSON data across multiple domains.

jQuery now supports JSONP natively – if you attempt to load JSON (via $.getJSON or $.ajax) from a remote URL then an extra callback will be provided for the server to interpret. Additionally, if the server requires a special field for specifying your own callback name you can provide it by having a “=?” in your query string.

Serialization Overhaul

The .serialize() method has seen a significant overhaul, porting the functionality provided by the jQuery Forms plugin back into the jQuery core. This will mean that the serialization of form data should now closely represent what is normally sent by the browser, to the server.

Additionally, a new .serializeArray() method has been introduced which serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with. This can be especially useful when working with large forms that you wish to process.

Disable Caching

In an $.ajax call you can now prevent requests from being cached by the browser by providing an extra cache: false flag. This will ensure that any GET requests that you might be performing will absolutely be retrieving the latest version of the page.
cache: false always sends a new request to server.

« Back to the full [[Release:jQuery 1.2|jQuery 1.2 Release Notes]].

.val() Overhaul

The simple .val() method has seen some much-needed love, making it much more useful. You can now set the checked state of groups of radios buttons and checkboxes along with setting the selected state of select options. You can achieve this by passing in an array of values, or names, of the items that you’d like to select/check. (Fails in Firefox2, radio buttons fail in IE7) It’s now possible to call .val() on select elements, to get their values.

.offset()

Brought over from the [http://jquery.com/plugins/project/dimensions Dimensions plugin], the [[CSS/offset|.offset()]] method allows you to find the offset of the element (as ‘top’ and ‘left’) from the top-left corner of the document.

.height() / .width() for document and window

The .height() and .width() now work on the document and window objects; allowing to get the height and width of the document body and the window viewport.

.stop()

Stops all the currently running animations on all the specified elements. If any animations are queued to run, then they will begin immediately.

%/em Animation

Animations can now be done using em values or percentages as well as pixel values. They can even be mixed within the same animate() call.

Color Animations

A new [http://jquery.com/plugins/project/color official jQuery plugin] that supports animating CSS colors of elements by using the new jQuery.fx.step.

Supported CSS properties: ‘backgroundColor’; ‘borderBottomColor’; ‘borderLeftColor’; ‘borderRightColor’; ‘borderTopColor’; ‘color’; ‘outlineColor’.

Colors can be specified as one of a pre-set range of named colours; in rgb format (ie ‘rgb(221,221,221)’); hex (ie ‘#dddddd’); or shorthand hex (ie ‘#ddd’).

Relative Animations

Relative animations behave just like normal animations, but their units are specified as being relatively position according to the current position of the element, rather than being an absolute position.

You can specify a relative animation by writing the number and (optional) units as string, preceded by a “+=” (for a relative animation that adds to the current position) or “-=” (that takes away from the current position).

Simultaneous Animations

As has always been the case, animations in jQuery are automatically queued, which allows animate() calls to be chained.

Now, if a queue: false flag is included in the options of animate(), then that animation will not go in the queue and will begin running immediately.

.queue() / .dequeue()

Two existing internal jQuery queueing methods have been tweaked and made more useful, for general animation use.

.queue() can be used to access and manipulate the animation queue for a particular element.

The following queueing methods were added:
* .queue()
Returns a reference to the first element’s queue (which is an array of functions).
* .queue(Function)
Adds a new function, to be executed, onto the end of the queue of all matched elements.
* .queue(Array)
Replaces the queue of all matched element with this new queue (the array of functions).

And the following dequeueing method was added: .dequeue() Removes a queued function from the front of the queue and executes it.

Extensible Animations

You can now extend jQuery animations with a function that is fired on every step of the animation that changes the style of the element being animated. It can be extended for specific css properties, or even to create a custom animation type.

For example, you can pass in an extra step function to .animate() to perform actions like animation synchronization.

Namespaced Events

This is a piece of functionality that’s especially useful for plugin authors. You can now provide a private name for the event handlers that you bind, allowing you to remove them again later (without having to maintain a private cache of all the handlers that you’re overseeing).

.triggerHandler()

A new method that can be used in addition to the original .trigger(). This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.

.wrapInner() / .wrapAll()

.wrapInner() is designed to wrap the inner child contents of each matched element (including text nodes); .wrapAll() will wrap all the elements in the matched set into a single wrapper element (this is different from .wrap() where each element in the matched set would get wrapped with an element).

.replaceWith() / .replaceAll()

replaceWith replaces all matched elements with the specified HTML or DOM elements. .replaceAll replaces the elements matched by the specified selector with the matched elements.

Cloning with Events

The .clone() method can now take an optional argument where, if true, it will also clone all the event handlers on all the cloned elements.

:has(selector)

This matches all elements that contain at least one element that matches the specified selector. This is a replacement for the XPath selector: [selector], included in jQuery 1.1 and older – :has() behaves identically.

:header

This matches all headers (h1, h2, h3, h4, h5, and h6 tags). This can be very useful for building Table of Contents for a page (especially where the order of the headers matters).

:animated

Matches elements that are currently being animated by, at least, one animation.

XPath Selector Plugin

Since XPath selectors were removed form jQuery in 1.2, a new [http://jquery.com/plugins/project/xpath XPath Selector Plugin] has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

.map()

Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values – or even perform special, custom, selector transformations. This is provided as a convenience method for using $.map().

.prevAll() / .nextAll()

Allows you to find all sibling elements before, or after, the current element.

.slice()

This method behaves just like an array’s native .slice() method, allowing you to cut up the jQuery set into reusable portions.

.hasClass()

The new .hasClass() method is a simple convenience method that sits on top of [[Traversing/is|.is()]], handling its most common use case (checking for a class name).

.andSelf()

Combine the two previous sets on the jQuery stack into a single matched set.

.contents()

Find all the child nodes inside the matched elements (this included text nodes). If you perform it against an iframe element, it returns its inner document.

How To Upgrade

If you have not done so already, please upgrade to jQuery 1.1.4. This should help to remove most of the surprises in between the last version of jQuery your code was using and the current release. Go through the list of deprecated and removed features and make sure that you’re not using any of them in your code. If any plugins that you’re using still require some of the old functionality, you can feel free to include the jQuery 1.1 Compatibility Plugin or the XPath Compatibility Plugin, depending on the situation.

jQuery 1.1 Compatibility Plugin

A few pieces of functionality were removed in the jQuery 1.2 release. Including this plugin allows you have all of the features that were removed in your copy of jQuery 1.2.

The plugin would typically be used like so:

XPath Compatibility Plugin

Since XPath selectors were removed from jQuery in 1.2, a new XPath Selector Plugin has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

Color Animation Plugin

A new, official, jQuery plugin that supports animating CSS colors of elements by using the new jQuery Animation API. Supported CSS properties include: ‘backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’.

Removed Functionality

We’ve removed a number of methods in jQuery 1.2 that were relatively unused, causing confusion, or were inefficient. Wherever possible, we’ve provided alternate methods for performing the actions.

With jQuery 1.2, as with the jQuery 1.1 release, a backwards compatibility plugin has been provided. Thus, if you wish to continue using these particular methods, you’ll be able to use that plugin and continue doing so.

Additionally, in order to handle the XPath changes another, separate, plugin has been made available that will handle XPath selector functionality in jQuery.

DOM Manipulation

Calling the clone method with an argument is being deprecated (the clone method, as a whole, is being kept). Instead of calling .clone(false) you should now do: .clone().empty() instead.

DOM Traversing

The .eq() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method). You can duplicate .eq() like so:

$("div").slice(0,1);

The .lt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .gt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .contains() method is being deprecated in favor of just using a regular .filter() statement. You can duplicate .contains() like so:

$("div").filter(":contains(Your Text)");

Ajax

$("#elem").loadIfModified("some.php"): This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php"): This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000): This convenience method is being removed in favor of the long form use of the more-explicit $.ajaxSetup():

$.ajaxSetup({timeout: 3000});

$(...).evalScripts(): This method is no longer necessary in jQuery – all scripts included in HTML strings are automatically evaluated when injected into the document. No substitute method is needed.