New features of jQuery 1.7.0

If you are a web designer than you must would have heard about jQuery. And I am sure you are using jQuery any of the version. Latest version of jQuery is 1.7.0 was launched at the end of 2011. Many people would be curious about new added features of this version. So, here I am just trying to post some of the best or all jQuery 1.7.0 updated featured API (Application Programming Interface).

As previous versions of jQuery were also very useful and worth-giving but you will notice that jQuery 1.7.0 is stupendous.

Aspects of the APIs those were changed in the new corresponding version of jQuery i.e. 1.7.0. API changes in jQuery 1.7.0 dealt primarily with the new features and provide better Support for HTML5 in IE6/7/8. And also has toggling animations features those work intuitively.

Underneath I am going to explain new APIs, please read them all.

Note: Somewhere in the following explanation I will use $ sign in place of jQuery.

jQuery.Callbacks()

A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

jQuery.Callbacks( flags )

flags argument is an optional list of space-separated flags argument that can be used to change the behavior of the callback list.

This function can be internally used to provide the base functionality behind the jQuery's jQuery.ajax() and jQuery.Deferred() components also.

This function supports the following methods:

callbacks.add()

callbacks.remove()

callbacks.fire()

callbacks.disable()

See the following example carefully, This example is using the jQuery.Callbacks() API:

The following given two samples of methods named myFunc1 and myFunc2:

function myFunc1(value){

console.log(value);

}

function myFunc2(value){

myFunc1("myFunc2 says:" + value);

return false;

}

Above functions can be added as callbacks to a $.Callbacks list as followings:

var callbacks = $.Callbacks();

callbacks.add(myFunc1);

callbacks.fire("hello admec!"); // outputs: hello admec!

callbacks.add(myFunc2);

callbacks.fire("multimedia institute!"); // outputs: multimedia institute!, myFunc2 says:

multimedia institute!

The result of this is that it becomes simple to construct complex lists of callbacks where input values can be passed through to as many functions as needed with ease.

Two specific methods were being used above: .add() and .fire(). The function .add() supports adding new callbacks to the callback list, whilst fire() provides a way to pass arguments to be processed by the callbacks in the same list.

callbacks.disable()

Disable a callback list from doing anything more.

Example

Using callbacks.disable() to disable further calls being made to a callback list:

Within the above example if we use this method in the following way, then it wouldn't show anything in result when you will fire it.

// disable further calls being possible

callbacks.disable();

// attempt to fire with ' multimedia institute' as an argument

callbacks.fire( 'multimedia institute' ); // multimedia institute isn't output

callbacks.empty()

This function is very helpful when you want to remove all of the callbacks from a list.

Example

Using callbacks.empty() to empty a list of callbacks:

// a sample logging function to be added to a callbacks list

var newFunc1 = function( value1, value2 ){

console.log( 'foo:' + value1 + ',' + value2 );

}

// another function to also be added to the list

var newFunc2 = function(value1, value2 ){

console.log( 'bar:' + value1 + ',' + value2 );

}

var callbacks = $.Callbacks();

// add the two functions

callbacks.add(newFunc1);

callbacks.add(newFunc2);

// empty the callbacks list

callbacks.empty();

// check to ensure all callbacks have been removed

console.log(callbacks.has(newFunc1)); // false

console.log(callbacks.has(newFunc2)); // false

callbacks.fired()

It tracks for the callbacks have already been called at least once or not.

Example

// a sample logging function to be added to a callbacks list

var newFunc1 = function( value ){

console.log( 'newFunc1:' + value );

}

var callbacks = $.Callbacks();

// add the function ' newFunc1' to the list

callbacks.add(newFunc1);

// fire the items on the list

callbacks.fire('admec'); // outputs: 'newFunc1: hello'

callbacks.fire('multimedia'); // outputs: 'newFunc1: world'

// test to establish if the callbacks have been called

console.log(callbacks.fired());

callbacks.fireWith()

Call and collect all callbacks in a list along with all given arguments and context.

• callbacks.fireWith( [context] [, args] )

context A reference to the context in which the callbacks in the list should be fired.

Args An argument, or array of arguments, to pass to the callbacks in the list.

Example

Using callbacks.fireWith() to fire a list of callbacks with a specific context and an array of arguments:

// a sample logging function to be added to a callbacks list

var myFunc1 = function( value1, value2 ){

console.log( 'Received: ' + value1 + value2 + ' institute' );

}

var callbacks = $.Callbacks();

// add the myFunc1 method to the callbacks list

callbacks.add(myFunc1);

// fire the callbacks on the list using the context 'window'

// and an arguments array

callbacks.fireWith( window, ['admec','multimedia']);

// outputs: Received: admec multimedia institute

callbacks.has()

callbacks.has() function checks in the list for a supplied callback, see the explanation:

• callbacks.has( callback )

callback The callback to search for.

Example

// adding a sample function as a logging to be added to the callbacks list

var myFunc1 = function( value1, value2 ){

console.log('Received:' + value1 + ',' + value2 );

}

// a second function which will not be added to the list

var myFunc2 = function( value1, value2 ){

console.log('foobar');

}

var callbacks = $.Callbacks();

// add the log method to the callbacks list

callbacks.add(myFunc1);

// following lines will result booleans after determining which callbacks are in the list and which is not:

console.log(callbacks.has(myFunc1)); // true

console.log(callbacks.has(myFunc2)); // false

callbacks.lock()

You can use this function to lock a callback list in its current state.

Example

// adding a sample function as a logging to be added to the callbacks list

var myFunc1 = function( value ){

console.log( 'foo:' + value);

}

var callbacks = $.Callbacks();

// add the logging function to the callback list

callbacks.add(myFunc1);

// fire the items on the list, passing an argument

callbacks.fire( 'hello' );

// outputs 'foo: hello'

// lock the callbacks list

callbacks.lock();

// try firing the items again

callbacks.fire('world');

// as the list was locked, no items were called so 'world' isn't logged

callbacks.remove()

Nice and very helpful function when one wants to remove a callback or a collection of callbacks from a callback list.

• callbacks.remove( callbacks )

callbacks A function, or array of functions, that are to be removed from the callback list.

Example

// a sample logging function to be added to a callbacks list

var myFunc1 = function( value ){

console.log( 'hello:' + value );

}

var callbacks = $.Callbacks();

// add the function 'myFunc1' to the list

callbacks.add(myFunc1);

// fire the items on the list

callbacks.fire( 'admec' ); //outputs: 'hello: admec'

// remove 'myFunc1' from the callback list

callbacks.remove(myFunc1);

// fire the items on the list again

callbacks.fire('world');

// nothing output as 'myFunc1' is no longer in the list

jQuery.Deferred()

This method was introduced in version 1.5 of jQuery. This method is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. This function provides better support for chaining functions with each other with superior response than JavaScript. In JavaScript it is common to invoke functions that optionally accept callbacks that are called within that function.

jQuery.Deferred() introduces several enhancements, which provide a better way to callbacks to manage and invoke.

Some of the methods of jQuery.Deferred() I am writing down here:

deferred.notify()

Call the progressCallbacks on a Deferred object with the given args.

• deferred.notify( args )

args Optional arguments that are passed to the progressCallbacks.

Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state or reporting status by returning a restricted promise object through deferred.promise().

deferred.notifyWith()

This function helps in calling the progressCallbacks on a Deferred object with the given context and arguments:

• deferred.notifyWith( context [, args] )

context Context passed to the progressCallbacks as the this object.

args Optional arguments that are passed to the progressCallbacks.

When deferred.notifyWith is called, any progressCallbacks added by deferred.then or deferred.progress are called. Callbacks are executed in the order they were added. Each callback is passed the args from the .notifyWith(). Any calls to .notifyWith() after a Deferred is resolved or rejected (or any progressCallbacks added after that) are ignored

deferred.pipe()

Ultimate method to filter and/or chain Deferreds.

• deferred.pipe([doneFilter] [,failFilter])

doneFilter An optional function that is called when the Deferred is resolved.

failFilter An optional function that is called when the Deferred is rejected.

• version added: 1.7deferred.pipe([doneFilter] [,failFilter] [,progressFilter])

doneFilter An optional function that is called when the Deferred is resolved.

failFilter An optional function that is called when the Deferred is rejected.

progressFilter An optional function that is called when progress notifications are sent to the Deferred.

The deferred.pipe() method returns a new promise that filters the status and values of a deferred through a function. The doneFilter and failFilter functions filter the original deferred's resolved / rejected status and values. As of jQuery 1.7.0, the method also accepts a progressFilter function to filter any calls to the original deferred's notify or notifyWith methods

Examples:

Example:

Filter resolve value: var defer = $.Deferred(),

filtered = defer.pipe(function( value ) {

return value * 2;

});

defer.resolve( 5 );

filtered.done(function( value ) {

alert( "Value is ( 2*5 = ) 10: " + value );

});

Example:

Filter reject value: var defer = $.Deferred(),

filtered = defer.pipe( null, function( value ) {

return value * 3;

});

defer.reject( 6 );

filtered.fail(function( value ) {

alert( "Value is ( 3*6 = ) 18: " + value );

});

Example:

Chain tasks: var request = $.ajax( url, { dataType: "json" } ),

chained = request.pipe(function( data ) {

return $.ajax( url2, { data: { user: data.userId } } );

});

chained.done(function( data ) {

// data retrieved from url2 as provided by the first request

});

deferred.progress()

Add handlers to be called when the Deferred object generates progress notifications.

• deferred.progress( progressCallbacks )

progressCallbacks A function, or array of functions, that is called when the Deferred generates progress notifications.

deferred.state()

Determine the current state of a Deferred object.

Determine the current state of a Deferred object.

The deferred.state() method returns a string representing the current state of the Deferred object. The Deferred object can be in one of three states:

• "pending": The Deferred object is not yet in a completed state (neither "rejected" nor "resolved").

• "resolved": The Deferred object is in the resolved state, meaning that either deferred.resolve() or deferred.resolveWith() has been called for the object and the doneCallbacks have been called (or are in the process of being called).

• "rejected": The Deferred object is in the rejected state, meaning that either deferred.reject() or deferred.rejectWith() has been called for the object and the failCallbacks have been called (or are in the process of being called).

This method is primarily useful for debugging to determine, for example, whether a Deferred has already been resolved even though you are inside code that intended to reject it.

deferred.then()

Add handlers to be called when the Deferred object is resolved or rejected.

• deferred.then(doneCallbacks, failCallbacks)

doneCallbacks A function, or array of functions, called when the Deferred is resolved.

failCallbacks A function, or array of functions, called when the Deferred is rejected.

• version added: 1.7deferred.then (doneCallbacks, failCallbacks [,progressCallbacks])

doneCallbacks A function, or array of functions, called when the Deferred is resolved.

failCallbacks A function, or array of functions, called when the Deferred is rejected.

progressCallbacks A function, or array of functions, called when the Deferred notifies progress.

Since deferred.then returns the deferred object, other methods of the deferred object can be chained to this one, including additional .then() methods. For more information, see the documentation for Deferred object.

Example:

Since the jQuery.get method returns a jqXHR object, which is derived from a Deferred object, we can attach handlers using the .then method.

event.delegateTarget()

This function is useful when, you want to identify and remove event handlers at the delegation point.

Example:

Click a button from any box class, it changes the box's background color to red.

.is()

Check the current matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments else returns false if not matched.

• .is( selector )

Selector A string containing a selector expression to match elements against.

• version added: 1.6.is( function(index) )

function(index) A function used as a test for the set of elements. It accepts one argument, index, which is the element's index in the jQuery collection. Within the function, this refers to the current DOM element.

• version added: 1.6.is( jQuery object )

jQuery object An existing jQuery object to match the current set of elements against.

• version added: 1.6.is( element )

element An element to match the current set of elements against.

Unlike other filtering methods, .is() does not create a new jQuery object. Instead, it allows you to test the contents of a jQuery object without modification. For example; you have a list with two of its items containing a child element:

You can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:

Using a Function

The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns true, .is() returns true as well. For example, given a somewhat more involved HTML snippet:

You can attach a click handler to every <li> that evaluates the number of <strong> elements within the clicked <li> at that time like so:

Example:

Shows a few ways is() can be used inside an event handler.

jQuery.isNumeric()

With the help of the function one can determine whether its argument is a number or not. If the value is number, it returns a Boolean value 1 otherwise 0.

• jQuery.isNumeric( value ) value The value to be tested.

Example:

Sample return values of $.isNumeric with various inputs.

.off()

If you are working on jQuery project, you might have a requirement to remove an event handler. This function will surely will help you out.

• .off( events [, selector] [, handler(eventObject)] )

Events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".

Selector A selector which should match the one originally passed to .on() when attaching event handlers.

handler(eventObject) A handler function previously attached for the event(s), or the special value false.

• version added: 1.7.off( events-map [, selector] )

events-map A map where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).

selector A selector which should match the one originally passed to .on() when attaching event handlers.

The off() method removes event handlers that were attached with .on().

As with .on(), you can pass an events-map argument instead of specifying the events and handler as separate arguments. The keys are events and/or namespaces; the values are handler functions or the special value false.

Example:

Add and remove event handlers on the colored button.

.on()

Attach an event handler function for one or more events to the selected elements.

• .on( events [, selector] [, data], handler(eventObject) )

Events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

Selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

Data Data to be passed to the handler in event.data when an event is triggered.

handler(eventObject) A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

• version added: 1.7.on( events-map [, selector] [, data] )

events-map A map in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

selector A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

data Data to be passed to the handler in event.data when an event occurs.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

Examples:

Example:

The following example displays a paragraph's text in an alert when some one click on it:

Example:

You can pass data to the event handler in the following way, which is specified here by name:

Example:

With the small following code you can cancel an action for form submits and can use false Boolean value in return to prevent the event from bubbling up:

Example:

In the following code, you can see that it cancels only the default action by using .preventDefault().

Example:

stopPropagation() method is really helpful when you want to stop submit events from bubbling without preventing form submit action.

Example:

Attach and trigger custom (non-browser) events.

.removeAttr()

Remove an attribute from each element in the set of matched elements.

• .removeAttr( attributeName )

attributeNameAn attribute to remove; as of version 1.7, it can be a space-separated list of attributes.

The .removeAttr() method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.

Example:

Clicking the button enables the input next to it.

.removeData()

Remove a previously-stored piece of data as name as string argument and list as array argument in jQuery 1.7.0 version.

• .removeData( [name] )

Name A string naming the piece of data to delete.

• version added: 1.7.removeData( [list] )

list An array or space-separated string naming the pieces of data to delete.

Example:

Set a data store for 2 names then remove one of them.

.stop()

It stops the currently-running animations on any of the matched elements.

• .stop( [clearQueue] [, jumpToEnd] )

clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.

• version added: 1.7.stop( [queue] [, clearQueue] [, jumpToEnd] )

queueThe name of the queue in which to stop animations.

clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.

Example:

The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave events:

Example:

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

Toggling Animations

Animations may be stopped globally by setting the property $.fx.off to true. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

Example:

Test the following code in appropriate environment and click buttons and notice the functionality. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

I hope you have enjoyed this article on "What's new in jQuery 1.7" or this article can be called as "New APIs or methods in jQuery 1.7.0". I just kept brief overview that I grabbed from jQuery website.

For more information, see the Release Notes/Change log at

http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Thanks

Ravi Bhadauria

Web Designer, Developer and Programmer

(ADMEC Multimedia Institute)

Other resources:

Read about jQuery or similar courses from our institute:

http://www.admecindia.co.in/courses.html

Read and post questions and answers at my forum related with jQuery:

http://forum.admecindia.co.in

Read more related articles:

http://www.admecindia.co.in/articles-animation-web-design1.html

http://www.admecindia.co.in/html5-new-version.html