How to create a custom jQuery Plugin?

jQuery Web Development Front End Technology

To create a jQuery plugin, firstly create a file named jquery-myplugin.js with the following code. This is our plugin code. Here, myplugin is the name of our plugin.

(function ( $ ) {
   $.fn.myplugin = function( options ) {
      var web = $.extend({
         name: 'tutorialspoint'
      }, options );
      return this.append('Website: ' + web.name + '.com');
   };
}( jQuery ));

Now, to load it, add to the HTML file, new.html:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-myplugin.js"></script>
<script>
$(document).ready(function() {
   $('#myclass').myplugin();
});
</script>
</head>
<body>
<div id="myclass"></div>
</body>
</html>

Run the above code and you can see the text is visible, which shows your custom plugin is working correctly.

Amit D

Updated on: 12-Jun-2020

421 Views

Kickstart Your Career

Get certified by completing the course

Get Started