What happens when we extend objects

by queryj

HTML

<p>
    a test paragraph with spaces.
</p>
<input type="text" value="just some words in here." />

<span>
    just some other words to test only.
</span>

JavaScript

$.fn.extend({
    removeSpaces: function(){
        if ( this.is(":input"))
        {
           this.val(this.val().replace(/\s/g, ""));
        }
        
        else
        {
           this.text(this.text().replace(/\s/g, ""));
        }
        
        return this;
    },
    
    addBgColor: function(color){
        this.css({"background-color": color});
        return this;
    },
    
    addBorder: function(borderSettings)
    {
        this.css("border", borderSettings);
        return this;
    }

});

$(function(){
    var empty = {};
    var defaults = {size: 3, width: 5};
    var options = {size: 6, height: 10};
    var options2 = {color: "red", border: "none"};
    var opts = $.extend(empty, defaults, options, options2);
    
    console.log(defaults);
    console.log(opts);
    console.log(options);
    console.log(empty);
    
    $("p").removeSpaces();
    $("input").removeSpaces().addBorder("2px solid green");
    $("span").removeSpaces().addBgColor("red");
    
    console.log( $("p").is(":input"));
    
});