How to add a function to jQuery?

Jquery

Jquery Problem Overview


What's the easiest way to define a new jQuery member function?

So that I can call something like:

$('#id').applyMyOwnFunc()

Jquery Solutions


Solution 1 - Jquery

Please see "Defining your own functions in jQuery" by Basil Goldman:

> In this post, I want to present how > easy define your own functions in > jQuery and using them.

Modified, based on the code in the blog post linked above:

jQuery.fn.yourFunctionName = function() {
    // `this` is the jQuery Object on which the yourFunctionName method is called.
    // `arguments` will contain any arguments passed to the yourFunctionName method.
    var firstElement = this[0];

    return this; // Needed for other methods to be able to chain off of yourFunctionName.
};

Just use:

$(element).yourFunctionName();

Solution 2 - Jquery

This is the pattern that I prefer to define my own plugins.

(function($) {

    $.fn.extend({
        myfunc: function(options) {
            options = $.extend( {}, $.MyFunc.defaults, options );

            this.each(function() {
                new $.MyFunc(this,options);
            });
            return this;
        }
    });
   
    // ctl is the element, options is the set of defaults + user options
    $.MyFunc = function( ctl, options ) {
         ...your function.
    };

    // option defaults
    $.MyFunc.defaults = {
        ...hash of default settings...
    };
   
})(jQuery);

Applied as:

$('selector').myfunc( { option: value } );

Solution 3 - Jquery

The jquery documentation has a section on plugin authoring, where I found this example:

jQuery.fn.debug = function() {
  return this.each(function(){
    alert(this);
  });
};

Then you'd be able to call it this way:

$("div p").debug();

Solution 4 - Jquery

jQuery has the extend function to do that

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

you can see the documentation there

Solution 5 - Jquery

Here's a plugin, in it's simplest form...

jQuery.fn.myPlugin = function() {
  // do something here
};

You'll really want to consult the documentation though:

http://docs.jquery.com/Plugins/Authoring

Solution 6 - Jquery

/* This prototype example allows you to remove array from array */

Array.prototype.remove = function(x) {
var i;
for(i in this){
    if(this[i].toString() == x.toString()){
        this.splice(i,1)
    }
  }
 }


----> Now we can use it like this :

var val=10;
myarray.remove(val);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMaskView Question on Stackoverflow
Solution 1 - JquerykeyboardPView Answer on Stackoverflow
Solution 2 - JquerytvanfossonView Answer on Stackoverflow
Solution 3 - JqueryMarcel LevyView Answer on Stackoverflow
Solution 4 - JqueryRageZView Answer on Stackoverflow
Solution 5 - JqueryJGarridoView Answer on Stackoverflow
Solution 6 - JqueryAouidane Med AmineView Answer on Stackoverflow