jQuery

jQuery is the most popular JavaScript library in use today. It is released by John Resig in January 2006 under the MIT and GNU General Public licenses. It is the library that is beloved by most of the web developers for scripting. It is very easy to learn, have a good documentation and a big community. In this article I'm going to share you some of the interesting things from that library. If you do like jQuery and know some interesting things please post a comment.

1. Using mutiple selectors

You can use multiple selectors using the comma operator. For examples to select all the <p> and <span> elements you could use

$("div,span")

2. Selecting elements by attribute values

You can select elements not only by using their tag, class or id but also by their attribute value. For ex. you can select all the <a> elements links to PDF resources by

$("a[href$='pdf']")

3. Selecting form elements based on state

Apart from the CSS selectors jQuery has its own custom selectors that has their own advantages. It is usually difficult to select form elements based on its state. One example is selecting all the checkboxes that are checked and that can be easily done by

$("input:checked")

4. Creating HTML

The $() is a multipurpose function. It can be used to query using selectors or setting an event-handler for the document ready event or even to create new HTML. Here is an example of creating a new paragraph and appending to element #main.

$("<p>this is a new para</p>").appendTo("#main");

Creating empty elements can be shortly done as,

$("<p>").appendTo("#main") // instead of 

5. Storing/Reading data on elements

We can easily add custom data to an element using the data() method.

$("img#my-photo").data("size", "big");

This will create an attribute named data-size and set it's value as big. Notice jquery prefixes data- in adhere to HTML5 specification.

Reading stored data can be done by just passing the name to the method.

$("img#my-photo").data("size");

Also you can remove the stored data by using the removeData().

6. Cloning elements

Copying html elements using the clone() method.

$("div").clone().appendTo("#main");

If you want to copy the associated event-handlers along with the element you should pass boolean parameter as true.

$("div").clone(true).appendTo("#main");

7. Creating one-time event handlers

To create an event-handler that is executed only once can be done by using the one() method

$("img").one('click', function(){
	alert("I won't fire again");
});

The handler is removed once it is executed.

8. Live event handling

This is a very nice feature in jQuery. Usually we bind event handlers to existing elements but some times we need to bind handlers automatically to newly created elements and this can be done by live() method.

$("img").live("click", function(){ alert("some one touched me!"); });

If a new <img> is element added to DOM the click handler will automatically set. You can remove the live event handling by using the die() method.

9. Circular event handlers

We can assign a set of event handlers to click event and make them execute in a circular fashion.

$("img").toggle(handler1, handler2, handler3, ..);

When an image is clicked first time handler1 will be executed and second time handler2 and so on, once all the handlers are executed again the execution start from handler1 for the next event.

10. Hover event handling

Most of the times we write javascript to do some action when the mouse enters an element and do some other action when the mouse leaves out. jQuery gives a cross-browser solution by hover() method.

$("img").hover(function(){
	// show watermark
},
function(){
	// hide watermark
});

11. Showing and hiding elements with animation

We can show and hide elements with animation by passing "fast", "slow" values to the show() and hide() methods.

$("img.selected").show("slow");

12. Turning off animations

We can easily turn off animations in jquery by setting,

$.fx.off = false;

13. Combining objects

We can combine two objects by using the extend() method. This method is very famous in plugin development to combine the options passed by user and the default options.

var passedOptions = {
    width: 200,
    height: 200
};

var options = {
	width: 50,
	opacity: 0.7
};

$.extend(options, passedOptions);

The result is

options = {
	width: 200,
	height: 200,
	opacity: 0.7
};

14. JSON Parsing

Parsing a string into JSON can be done by parseJSON().

var obj = $.parseJSON('{ "name" : "state", "value" : "CA"}');

15. Dynamically loading scripts

Scripts can be loaded dynamically at any time using the getScript() method.

$.getScript("dynamic.js", function(){
	alert("script is loaded");
});

16. Loading content through AJAX

One nice utility function in jquery is load() method. Frequently we have to make an ajax call to server, get some html and update the html into particular element. This all things can be done using this method.

$("#stock-div").load("/getstockinfo.php");

We can event pass parameters or setup a callback.

17. Global AJAX events

Whenever you are making an AJAX call you would be likely doing some actions like showing a gif image or something to user, this can be quite easily done by listening into the global events.

$('body').bind("ajaxStart", function(){
	// show gif image
});

$('body').bind("ajaxStop", function(){
	// hide gif image
});

18. Using other libraries without conflict

It's not jQuery but other libraries also use $. By using the noConflict() we can relinquish control of $ from jQuery or even we can assign some other in that place.

$.noConflict();

var jQ = $.noConflict();

jQ(“div”).hide();

Hope you enjoyed reading this.