How to create a jQuery plugin with methods?

Jquery is a Javascript library that is built to design or simplifies HTML, CSS, AJAX, DOM as well as event handling for web development. It is Open Source Software and free to all. More than 10 million websites use jquery. Jquery simply converts a line of javascript into methods that can be called in a single line of code. These plugins are implemented.

Approach: In Jquery Plug-in is a code that is needed in a standard javascript file. Plugins help in providing different methods that can be used with different jquery library methods.

  • Create a method
    jQuery.fn.methodName = methodDefinition;

    where .methodname is the name of a method and
    methoddefinition defines a method

  • To Obtain a perfect or compatible code use this.each which is is used to perform over a set of matched elements.
  • Prefix should conclude with .js.

Syntax: Here is the syntax of a plugin file

(function($){
    $.fn.myFunction(settings){
        settings = $.extend({setting_A: 'default_A', setting_B: 'default_B'...});
         ...code away!
    };
}(jQuery);

Example 1: Here is a plug-in example.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title></title>
    <script src="jquery-3.4.1.js" 
            type="text/javascript">
    </script>
  
    <script src="custom.js" 
            type="text/javascript">
    </script>
  
</head>
<script>
    (function($) {
  
            $.fn.myFunction(settings) {
  
                settings = $.extend({
                    setting_A: 'default_A',
                    setting_B: 'default_B'...
                });
  
                ...code away!
  
            };
  
        }(jQuery);
</script>
  
<body>
    <h1>GeeksForGeeks</h1>
    <p>A Computer Portal For Geeks</p>
    <button> Click To Get Started </button>
  
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert('My first jquery code');
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output:



  • Before clicking on the button:
    output 1
  • After clicking on the button:
    output2

Example 2:
The following method is an example of having a warning method. Just Take a look into the syntax of file plugin.js

(function($) {
    $.fn.targetBlank = function () {
    alert('Working');
}
}) (jQuery);

Now Take a Look into the Example which shows how to link the plugin with HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"
          type="text/css" 
          href="css/style.css">
</head>
<script>
    (function($) {
        $.fn.targetBlank = function() {
  
            alert('Working');
  
        }
    })(jQuery);
</script>
  
<body>
    <a href="https://www.google.co.in/" 
       target="_blank">Google</a>
  
    <script type="text/javascript" 
            src="jquery-3.4.1.js"></script>
    <script type="text/javascript" 
            src="plugin.js"></script>
    <script type="text/javascript" 
            src="ext.js"></script>
</body>
  
</html>

chevron_right


Output:
Output




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.