Description
A jQuery plugin is nothing but a new software extending the features of already software with some specific features. A jQuery plugin extends the new prototype object of jQuery.
A jQuery has so many in-built methods to work on the selected elements. Even new single method can be implemented with the help of existing methods so that new methods will extend some of the functionalities by replacing few lines of code.
Description
jQuery is a user friendly light weight plugin means it supports extensive plugins. Thousands of plugins are already available in online which are third-party plugins. In these plugins, a suitable plugin can be found out and used. Of course, these all plugins are developed by developers across world but not sure whether these plugins are well coded or not but can use in own websites.
Before including any plugin into the website, it is better to check whether this plugin is suitable or not which can be done in two ways. Either by using any of the popular search engines or directly going to the jQuery plugins registry at http://plugins.jquery.com/. This site also provides a search box to search for the plugin directly.
Once after finding matched plugin from couple of plugins, don’t use immediately. First check that plugin is authenticated and well documented or not before. Go through that documentation.Then download zip file and unzip that file.Keep in local server folder and add this plugin to page with the help of
script tag. Description
Suppose if suitable perfect plugin is not found even after doing searching then the best option is to develop own plugins.
[javascript]
$("p").fadeToggle();
[/javascript]
In above example, $ returns jQuery Object which contain all methods of jQuery Object. JQuery Object get all methods from
$.fn object. So that, one can access all methods from $.fn object and can add own method to $.fn object. Syntax
The syntax for creation of new method.
[javascript]
$.fn.methodName = methodDefinition;
[/javascript]
To know the id of the clicked element create new file called
jQuery.getId.js
[javascript]
$.fn.getID = function()
{
return this.each(function()
{
alert('ID of Clicked Element:"' + $(this).attr("id") + '".');
}
}
[/javascript]
The jQuery.getId.js is the new plugin file. In this file, create new method getID() to know the ids of clicked elements with the help of existing method attr().
Link the own plugin file into the website with the help of script tag. Check this below example for more help.
[html]
<!DOCTYPE html>
<head>
<title>jQuery Plugins</title>
<script src="jquery.js"></script>
<script src="jquery.getid.js"></script>
</head>
<body>
<p>This is a paragraph</p>
<div>This is a div</div>
<button id="btnClick">Click</button>
</body>
</html>
[/html]
Key Points
- jQuery plugins extends the new prototype object of jQuery.
- JQuery Object get all methods from $.fn object.