Cómo crear un plugin jQuery personalizado

La ventaja del plugin jQuery es que puedes usar el mismo código varias veces para diferentes objetos. En este caso, no es necesario copiar y pegar el código. Además, puedes cambiar el comportamiento del plugin con diferentes parámetros. Para escribir tu plugin jQuery, necesitas expandir el objeto $.fn

En general se ve así:

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

Escribimos un plugin que añadirá un párrafo con la clase “paragraph” después del objeto seleccionado al hacer clic en él. Por defecto, estableceremos el color rojo del texto de nuestro párrafo.

(($) => {
    $.fn.myPlugin = function(options) {
        const settings = $.extend({ //set default parameters
            color: 'red'
        }, options);

        //write the logic of our plugin
        $(this).on('click', function() {

            const par = '<p class="paragraph">An added paragraph</p>';
            $(this).after(par);
            $(this).next('.paragraph').css('color', settings.color);

        });

        return this; //for call chains
    }
})(jQuery);

La convocatoria de dos elementos diferentes se ve así:

$(() => {
 
    $('.firstsel').myPlugin({
        color: 'green'
    });
     
    $('.secondsel').myPlugin();
     
});

Puedes ver un ejemplo de cómo funciona esto en Codepen: https://codepen.io/igorrybalko/pen/WberZOY