How to create a jQuery function (a new jQuery method or plugin)?


How to create a jQuery function (a new jQuery method or plugin)?

I know that in JavaScript the syntax is as follows:
function myfunction(param){
//some code

Is there a way to declare a function in jQuery that can be added to an element? For example:


Solution 1:

From the Docs:

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
})( jQuery );

Then you do


Solution 2:

In spite of all the answers you already received, it is worth noting that you do not need to write a plugin to use jQuery in a function. Certainly if it’s a simple, one-time function, I believe writing a plugin is overkill. It could be done much more easily by just passing the selector to the function as a parameter. Your code would look something like this:

function myFunction($param) {
   $param.hide();  // or whatever you want to do


Note that the $ in the variable name $param is not required. It is just a habit of mine to make it easy to remember that that variable contains a jQuery selector. You could just use param as well.

Solution 3:

While there is a plethora of documentation / tutorials out there, the simple answer for your question is this:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah

Inside that function, the this variable corresponds to the jQuery wrapped set you called your function on. So something like:

$.fn.myfunction = function () {


… will flush to the console the number of elements with the class foo.

Of course, there is a bit more to semantics than that (as well as best practices, and all that jazz), so make sure you read up on it.

Solution 4:

To make a function available on jQuery objects you add it to the jQuery prototype (fn is a shortcut for prototype in jQuery) like this:

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector

This is usually called a jQuery plugin.

Example –

Solution 5:

Yup — what you’re describing is a jQuery plugin.

To write a jQuery plugin, you create a function in JavaScript, and assign it to a property on the object jQuery.fn.


jQuery.fn.myfunction = function(param) {
    // Some code

Within your plugin function, the this keyword is set to the jQuery object on which your plugin was invoked. So, when you do:


Then this inside myfunction will be set to the jQuery object returned by $('#my_div').

See for the full story.

Solution 6:

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;

$(document).ready(function () {
    //call function