jQuery plugin writing

by Ivan Gerasimenko

HTML

<p>Here goes some text</p>
<p class="green">Here goes some other text</p>
<p class="third">Here goes some text</p>
<p class="fourth">Here goes some other text</p>

JavaScript

console.clear();

(function($) { // <-- protecting $ alias (псевдоним)
    // not to muddy up the jQuery and jQuery.fn namespaces
    
    $.fn.colorify = function (options) { // <-- options
        // avoid creating lots of $.fn.xxxxx - use options instead
        var settings = $.extend({
            color: "green"
        }, options);

        this.css("color", settings.color);
        
        return this; // <-- make method chainable
    }
}(jQuery));

$(".green").colorify();

$(".third")
    .colorify({color: "green"})
    .addClass("greenified"); // <-- chaining

$(".fourth").colorify({color: "red"});