ashish shukla

jQuery is the most popular and commonly used JavaScript library.It makes it relatively easy to implement common functionalities .Also unlike JavaScript we don’t need to write lot of code for the common operations.Its sometimes referred to as “Do more write less” library.

Though jQuery provides lots of commonly functionality, out of the box, which is sufficient in most scenarios,but there may be certain requirements in which there is no inbuilt functionality provided by jQuery.In such scenarios we can either use the existing plugins which provides the same functionality which we require or we can create a new plugin if no such plugin already exists.

Plugin is a function which operates on a collection of elements.Whenever we use the $ or JQuery function it returns an object.This object contains a collection of elements.For example $(“div”) will return a collection of elements which matches the “div” selector or all the divs in the page.The jQuery object returned by calling the  $() function also contains methods apart from wrapping all the matched elements.

We can use the methods of the $ jQuery object for performing operations on the collection of elements.There are methods for common operations such as

• html() which sets the html of all the selected elements
• each() which is used to iterate over each of the matched elements.
• text() which gets or sets the value of an element.
• $(document).ready()  which ensures that page is in a ready state so that we can perform operations on it using jQuery

We use a jQuery object to select the elements on a page as:

$(“div”).html();

The above code uses the jQuery or the $ object to select the divs on the page,html() is a method contained by the jQuery object. The methods which are accessible using the jQuery object are actually contained by the $.fn object.

While creating a new plugin we define the plugin method on this $.fn object.We can add our methods to this object  as:

$.fn.MessagePlugin=function() {
return this.each(function() {
//...body of the plugin function.
});
};

In the above code we are assigning a function to the plugin named MessagePlugin .This is how we define the plugin.

One important point to consider is that the plugin function returns “this” object.This is because plugins are supposed to be used as a part of the jQuery methods chain.

In jQuery methods chain we append one method to another method.For example the below method chain selects a div named “div1”.The $(“#div1”) method returns a jQuery object using which we call the text() method.The text() method again returns the jQuery object on which we call the css method to set the color to red.

$(“#div1”).text(“jQuery”).css(“color”, “red”);

“this” represents the object which is returned by the $() function.As our plugin method is supposed to be used as a part of jQuery method chain so the  returned “this” object will be available to the other methods in the chain.

Since this plugin operates on a collection of elements rather than a single element so we access individual elements using “this.each()” function.This will ensure that the functionality defined by the each() method will be applied to all the selected elements.In other words each() will loop through all the elements in the collection.

Customizing Plugins using options

An option is a javascript object which is used for passing configuration information to a method.So we can use the options object to pass customization information to the jQuery plugin.Instead of pass multiple parameters we use the options parameter which can contain multiple values.

We define an options object just like a normal javascript object as:

var options = {
name: 'jquery',
width: '325px'
};

We can use the options parameter as a parameter to the jQuery plugin method  as:

$.fn.MessagePlugin=function(options) {
return this.each(function() {
$(this).append('<div>'+options.message+' '+options.name+'</div>');
});
};

Calling the Plugin method

Now we can call the above plugin and pass values for the message and name option values as:

$(document).ready( function() {
$('div').MessagePlugin({ name: 'javascript', message:Hello!});
});

Providing Default values 

We can provide the default values to the options parameter that will be used when values are not passed by the caller of the plugin:

$.fn.MessagePlugin=function(options) {

var settings = $.extend({
name : 'JQuery',
message'Hello!'
}, options);

return this.each(function() {
$(this).append('<div>'+opts.message+' '+opts.name+'</div>');
});
};

In the above code the options javascript object is passed to the plugin and it contains the values provided by the consumer of the plugin. The $.extend() function takes two objects as parameters and merges the second object into the first object.Here we are passing the user supplied values and the default values to the extend() method.So if the consumer of the plugin is not passing some values then the default values will be used.

Utility functions

We can also create utility functions which are used to provide a specific functionality.It is defined directly using the $ or the jQuery object.We define it as:

$.pluginName = function() {
//.... body of the function
}

Now to use the above pluginName function we can call it using the jQuery object as:

$.pluginName()

But unlike the plugin methods we can not chain the utility functions rather they return a particular value to the calling code.

So writing a simple jQuery plugin is a rather straightforward task.If none of the existing jQuery plugins are meeting our requirement then writing a new plugin for reusable functionality can be a good option.

ashish shukla

One of the common requirements while working with web applications is to execute some script as soon as the web page loads.

As the javascript or jQuery executes on the browser so we have to ensure that the document or the web page is loaded by the browser before the script can be executed.Two common ways to perform this check is by using the window.onload event handler method and the $(document).ready() method.

Javascript provides us the window.onload event to execute the script once the document is fully loaded.This event is specific to javascript.While working with jQuery we have another option to attach the startup script.We can use the $(document).ready() method to execute the script once the Document Object Model or DOM is loaded.

$(document).ready(function() {
alert('DOM is loaded');
});

Shorthand for the $( document ).ready() is $() so we can write the above code as:

$(function(){
alert('DOM is loaded');
});

We use the  onload event handler as:

<script>
function pageLoaded()
{
alert("Page loaded!");
}
</script>

<body onload="pageLoaded()">
...
</body>

One important point to note about the $( document ).ready() method is that if we are accessing images inside the $( document ).ready() method then that code could get failed if the images are not yet loaded by the web page.

jQuery’s document ready and the window onload are use for similar requirement but have few important differences.Understanding these differences is important if we are using scripts.

Following are the main differences between $(document).ready() and window.onload event

• One of the main differences is that ready() method will execute once the DOM is loaded but before the other page assets ,such as images are loaded.So ready() will fire at an early stage in the web page loading process than the window.onload event.

• $(document).ready() can significantly improve the performance of the web page if we are heavily using the images on the page or if the network connection is slow.

• We can have only one onload event handler method while we can have multiple  document ready methods in a page.

• We can use the $(document).ready() event handler method as many times as we require on the web page.This can help us to keep the code segregated.Having multiple document ready methods can be a good option if the html page is generated by merging dynamically generated server code and the static html.In this case both the parts of the html can define the $(document).ready() methods.

ashish shukla