Year: 2025

Plugins

A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.

There are plenty of jQuery plug-in available which you can download from repository link at https://jquery.com/plugins.

How to use Plugins

To make a plug-in’s methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document.

We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.

Following example shows how to include jquery.plug-in.js plugin −

<html><head><title>The jQuery Example</title><script type ="text/javascript" 
     src ="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"&gt;&lt;/script&gt;&lt;script src ="jquery.plug-in.js" type ="text/javascript"&gt;&lt;/script&gt;&lt;script src ="custom.js" type ="text/javascript"&gt;&lt;/script&gt;&lt;script type ="text/javascript" language ="javascript"&gt;$(document).ready(function(){.......your custom code.....});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;.............................&lt;/body&gt;&lt;/html&gt;</pre>


How to develop a Plug-in



This is very simple to write your own plug-in. Following is the syntax to create a a method −



jQuery.fn.methodName = methodDefinition;




Here methodNameM is the name of new method and methodDefinition is actual method definition.



The guideline recommended by the jQuery team is as follows −




Any methods or functions you attach must have a semicolon (;) at the end.



Your method must return the jQuery object, unless explicity noted otherwise.



You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.



Prefix the filename with jquery, follow that with the name of the plugin and conclude with .js.



Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via noConflict() method.




For example, if we write a plugin that we want to name debug, our JavaScript filename for this plugin is −



jquery.debug.js




The use of the jquery. prefix eliminates any possible name collisions with files intended for use with other libraries.



Example



Following is a small plug-in to have warning method for debugging purpose. Keep this code in jquery.debug.js file −



jQuery.fn.warning=function(){returnthis.each(function(){alert('Tag Name:"'+$(this).prop("tagName")+'".');});};



Here is the example showing usage of warning() method. Assuming we put jquery.debug.js file in same directory of html page.



<html><head><title>The jQuery Example</title><script type = "text/javascript" 
     src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"&gt;&lt;/script&gt;&lt;script src = "jquery.debug.js" type = "text/javascript"&gt;&lt;/script&gt;&lt;script type = "text/javascript" language = "javascript"&gt;
     $(document).ready(function() {
        $("div").warning();
        $("p").warning();
     });
  &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is paragraph&lt;/p&gt;&lt;div&gt;This is division&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This would alert you with following result −



This is paragraph
This is division

August 21, 2025

Utilities

Jquery provides serveral utilities in the formate of $(name space). These methods are helpful to complete the programming tasks.a few of the utility methods are as show below.

$.trim()

$.trim() is used to Removes leading and trailing whitespace

$.trim( "    lots of extra whitespace    " );

$.each()

$.each() is used to Iterates over arrays and objects

$.each(["foo","bar","baz"],function(idx, val){
   console.log("element "+ idx +" is "+ val );});
 
$.each({ foo:"bar", baz:"bim"},function(k, v){
   console.log( k +" : "+ v );});

.each() can be called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection.

$.inArray()

$.inArray() is used to Returns a value’s index in an array, or -1 if the value is not in the array.

var myArray =[1,2,3,5];if( $.inArray(4, myArray )!==-1){
   console.log("found it!");}

$.extend()

$.extend() is used to Changes the properties of the first object using the properties of subsequent objects.

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$.proxy()

$.proxy() is used to Returns a function that will always run in the provided scope â that is, sets the meaning of this inside the passed function to the second argument

varmyFunction=function(){
   console.log(this);};var myObject ={
   foo:"bar"};myFunction();// windowvar myProxyFunction = $.proxy( myFunction, myObject );myProxyFunction();

$.browser

$.browser is used to give the information about browsers

jQuery.each( jQuery.browser,function(i, val){$("<div>"+ i +" : <span>"+ val +"</span>").appendTo( document.body );});

$.contains()

$.contains() is used to returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply.

$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );

$.data()

$.data() is used to give the information about data

<html lang = "en"><head><title>jQuery.data demo</title><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body><div>
     The values stored were &lt;span&gt;&lt;/span&gt;
        and &lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;script&gt;
     var div = $( "div" )[ 0 ];			
     jQuery.data( div, "test", {
        first: 25,
        last: "tutorials"
     });			
     $( "span:first" ).text( jQuery.data( div, "test" ).first );
     $( "span:last" ).text( jQuery.data( div, "test" ).last );
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


An output would be as follows



The values stored were 25 and tutorials




$.fn.extend()



$.fn.extend() is used to extends the jQuery prototype



<html lang = "en"><head><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body><label><input type = "checkbox" name = "android"> 
     Android&lt;/label&gt;&lt;label&gt;&lt;input type = "checkbox" name = "ios"&gt; IOS&lt;/label&gt;&lt;script&gt;
     jQuery.fn.extend({			
        check: function() {
           return this.each(function() {
              this.checked = true;
           });
        },
        uncheck: function() {
           return this.each(function() {
              this.checked = false;
           });
        }
     }); 
     // Use the newly created .check() method
     $( "input[type = 'checkbox']" ).check();			
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It provides the output as shown below −https://www.tutorialspoint.com/jquery/src/fn.utilities.htm



$.isWindow()



$.isWindow() is used to recognise the window



<!doctype html><html lang = "en"><head><meta charset = "utf-8"><title>jQuery.isWindow demo</title><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body>
  Is 'window' a window? &lt;b&gt;&lt;/b&gt;&lt;script&gt;
     $( "b" ).append( "" + $.isWindow( window ) );
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It provides the output as shown below −https://www.tutorialspoint.com/jquery/src/iswindow.htm



$.now()



It returns a number which is representing the current time



(new Date).getTime()




$.isXMLDoc()



$.isXMLDoc() checks whether a file is an xml or not



jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )




$.globalEval()



$.globalEval() is used to execute the javascript globally



functiontest(){
   jQuery.globalEval("var newVar = true;")}test();



$.dequeue()



$.dequeue() is used to execute the next function in the queue



<!doctype html><html lang = "en"><head><meta charset = "utf-8"><title>jQuery.dequeue demo</title><style>
     div {
        margin: 3px;
        width: 50px;
        position: absolute;
        height: 50px;
        left: 10px;
        top: 30px;
        background-color: green;
        border-radius: 50px;
     }
     div.red {
        background-color: blue;
     }
  &lt;/style&gt;&lt;script src = "https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;button&gt;Start&lt;/button&gt;&lt;div&gt;&lt;/div&gt;&lt;script&gt;
     $( "button" ).click(function() {
        $( "div" )
        .animate({ left: '+ = 400px' }, 2000 )
        .animate({ top: '0px' }, 600 )
			
        .queue(function() {
           $( this ).toggleClass( "red" );
           $.dequeue( this );
        })
			
        .animate({ left:'10px', top:'30px' }, 700 );
     });
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 21, 2025

Year: 2025

Slideshow.js

Progressbar.js

Alertify.js

Rowgrid.js

Slidebar.js

Multiscroll.js

flickerplate

Page Pilling

Plugins

How to use Plugins

How to develop a Plug-in

Example

Utilities

$.trim()

$.each()

$.inArray()

$.extend()

$.proxy()

$.browser

$.contains()

$.data()

$.fn.extend()

$.isWindow()

$.now()

$.isXMLDoc()

$.globalEval()

$.dequeue()