jQuery 1.2 Surveyed

An Exploration of jQuery 1.2's Best New Features Randy Morey, 11.Sep.2007

The latest jQuery release is a major leap forward in terms of simplicity, consistency, animation, and namespace compatibility. Here are some of the most important new features, complete with demonstrations. For all new features, see the official release notes.

:animated selector

This powerful new selector allows for simple queue control in animations. Combine it with the :not selector to prevent animation from queuing on a currently-animated element. This selector completely eliminates the need for ad-hoc animation queue control (which so often meant resorting to ugly global variables).

$('#x00 a').click(function(){
	$("#x00 .box:not(:animated)").animate({ width: "+50" }, 1000);
});
Animate Box Width
 

.hasClass() function

This is my new personal favorite jQuery function, as I often need to check if an element has a class. This is strictly a convenience, as it replicates the functionality of .is('.className').

if($('#x01 .box').hasClass('middle'))
	$('#x01 .box.middle').width(200);
 
 
 

.wrapInner() function

Wraps the contents of the selected elements. This works differently than .wrap(), which wraps the selected elements themselves.

$('#x02 .box:eq(1)').wrapInner('<div></div>');
not wrapped
inner wrapped

.offset() function

Gets the offset of an element from top and left of the document. Returns an object with top and left properties: $('p').offset().top and $('p').offset().left.

$('#x03 .box').html(
	'top: ' + $('#x03 .box').offset().top + '<br />' +
	'left: ' + $('#x03 .box').offset().left
);

.width() & .height() functions for document & window

Gets the width and height, respectively, of the document or the window.

$('#x04 .box').html(
	'document width: ' + $(document).width() + '<br />' +
	'window width: ' + $(window).width() + '
'
);

Cross-domain .getScript() (and color animation too!)

The new .getScript function is used here to load a script from the jquery.com domain. The script happens to be the new color animation plugin for jQuery 1.2. The following code snippet is taken from the official jQuery 1.2 documentation.

$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
	function(){
		$("#x05 a").click(function(){
			$("#x05 .box").animate( { backgroundColor: 'orange' }, 1000)
			.animate( { backgroundColor: 'indigo' }, 1000);
			return(false);
		});
	});
Animate Box Color

.serialize() function

This function, once part of the forms plugin and now merged with jQuery core, returns a query string representing the current values of form elements. This query string is useful in making ajax calls. Read the official serialization release notes for more information.

$('form').serialize();