How to create a custom jQuery plugin


The convenience of the jQuery plugin is that you can use the same code several times for different objects. In this case, copy-paste code is not needed. In addition, you can change the behavior of the plugin with different parameters. To write your jQuery plugin, you need to expand the $.fn object

In general, it looks like this:

$.fn.MyPlugin = function(){
    //plugin code

We write a plugin that will add a paragraph with the class "paragraph" after the selected object by clicking on it. By default we will set the red color of the text of our paragraph.

($ => {
    $.fn.myPlugin = function(options){
        let settings = $.extend({ //set default parameters
                color: 'red'
            }, options);
        //write the logic of our plugin
        $(this).on('click', function(){
            let par = '<p class="paragraph">An added paragraph</p>';
            $(this).next('.paragraph').css('color', settings.color);
        return this; //for call chains

The call for two different elements looks like this:

$(() => {
        color: 'green'


Paragraph with class "firstsel"

Paragraph with class "secondsel"

blog comments powered by Disqus