How to create a jQuery function (a new jQuery method or plugin)?
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
...
}
myFunction($('#my_div'));
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.
From the Docs:
(function( $ ){
$.fn.myfunction = function() {
alert('hello world');
return this;
};
})( jQuery );
Then you do
$('#my_div').myfunction();
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 - http://jsfiddle.net/VwPrm/
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 () {
console.log(this.length);
};
$('.foo').myfunction();
... 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.