jQuery: $.fn.extend() and $.extend()

jQuery: $.fn.extend() and $.extend() 

There is a significant difference between using $.fn.extend()  and $.extend()

Extend jQuery for DOM Tags.

When you want to create your own method of your DOM Tag, i.e.

$(element).yourfunctionname();

$(#MyCheckBox).Check();

To achieve this, you have to define:

$.fn.yourfunctionname = function() {

    var o = $(this[0]) // It's your element

};

$.fn.extend({

     Check: function(){

          Return this.each(function() {this.checked = true});

}

});

We can extend multiple functions in a single “$.fn.extend” block.

$.fn.extend({

     Check: function(){

          Return this.each(function() {this.checked = true});

},

     UnCheck: function(){

          Return this.each(function() {this.checked = false});

}

});

// Use the newly created .check() method

$("input[type='checkbox']").check();

Extend jQuery using your own functions.

In jQuery, you can create your own functions. For example, you want to validate whether one field value is greater than other or not.

var minElement = document.getElementById(“txtMinAmount”);

var maxElement = document.getElementById(“txtMaxAmount”);

if (!$.MinMax(minElement, maxElement)) {

MessageBox(Resources.Warning + "...", "Maximum Amount must be greater than Minimum Amount.", "OK", "Info");

        return false;

}

$.extend({

MinMax: function(minElement, maxElement) {

        var isValid = true;

        var minValue = Number(minElement);

        var maxValue = Number(maxElement);

       

        if (minValue > maxValue)

            isValid = false;

           

        return isValid;

    }

});