DCSIMG
Defining your own functions in jQuery - Client-Side with Basil Goldman

Defining your own functions in jQuery

Defining your own functions in jQuery.
In this post i want to present how easy define your own functions in jQuery and using them.

As you know, jQuery it's a very rich JavaScript library and it's a pity not to use all it resources.
Ok. Do you want to create your own jQuery function to work with elements look like this:

$(element).yourfunctionname()
What is your steps to define it?
At first, define "jQuery.fn" and add to this object your function name see below. (jQuery.fn is a prototype of jQuery object)
jQuery.fn.yourfunctionname = function() {
var o = $(this[0]) // It's your element
};
Now you have your own jQuery function working with HTML elements.
Also you want to call this function and set any attributes see below.
$(elem).yourfunctionname({dataSource: [], pagingStart: 5});

jQuery.fn.yourfunctionname = function() {
var args = arguments[0] || {}; // It's your object of arguments
var dataSource = args.dataSource;
var pagingStart = args.pagingStart;
};
Extend jQuery using your own functions.
Come to say... You want to create function for validation object or variable to is nullable (null).

Like this:
if( !jQuery.isNull(object) )
Do next
jQuery.extend( {
    isNull: function(o) { 
        if(o == null && o == undefined) { 
          return true; 
        } 
        return false
    }
});
Or. You want to extend someone your own jQuery function
jQuery.fn.yourfunctionname.constructor.prototype.clearData = function() {
// TODO
};

 

 Enjoy...



Comments

# 50+ jQuery Tutorials und mehr f??r Einsteiger und Fortgeschrittene said:

Pingback from  50+ jQuery Tutorials und mehr f??r Einsteiger und Fortgeschrittene

Tuesday, January 06, 2009 9:29 AM
# phim online said:

Very informative, very good. I've been looking for a way to write functions in jquery. this blog is just what i ned - not too full of words and directly to the point.

- sincerely <a href="http://coiphimhay.com">phim online</a> good job!

Friday, February 13, 2009 8:15 AM
# Sedat Kumcu said:

Thanks for this great article man. Useful and understandable.

Best regards.

Tuesday, October 13, 2009 9:44 AM
# the rasx() context » Blog Archive » jQuery Samples (Maybe) for SonghaySystem.com said:

Pingback from  the rasx() context  &raquo; Blog Archive   &raquo; jQuery Samples (Maybe) for SonghaySystem.com

Tuesday, October 20, 2009 2:35 PM
# Frédéric Hewitt said:

It work, but many information are missing : how to preserve chaining ? How to define default parameters ? What are best practices for plugin development ?

The best reading I've never found on the topic is on Learning jQuery and cover all these questions:

www.learningjquery.com/.../a-plugin-development-pattern

Tuesday, November 10, 2009 11:48 PM
# Clint said:

Thanks for this, I'm an ActionScript 3 guy, so I didn't think jQuery would be too difficult to learn, but this tutorial is just what I needed.

I would have never figured out the jQuery.fn part on my own.

Thanks,

Clint

Monday, November 16, 2009 4:42 PM
# theoni said:

thank you for a very helpful article I have been looking for hours for something like this online

Wednesday, November 18, 2009 10:04 AM
# Micah Smith said:

Thx! Helpedful!

Wednesday, December 16, 2009 9:05 PM
# Hosting said:

thank you for a very helpful article

Sunday, December 20, 2009 11:58 AM
# Andras Simon said:

Thank you! Useful help!

Monday, March 15, 2010 12:48 PM
# Avangelist said:

not stupified enough for me unfortunately.

None of that abstract example code makes any sense.

When you say "(jQuery.fn is a prototype of jQuery object)" is a prototype of the jquery function what does that mean exactly?

Monday, May 10, 2010 11:43 AM
# Pradeep Pathak said:

This is simple yet good example. There is nothing much to understand. Simply add your own function using the jQuery object with the keyword "fn". One more thing it should have return statement  like  "return this"  so that chaining can be perforemd

Tuesday, July 20, 2010 8:04 AM
# Lorem Ipsum said:

Thanks for this valuable tut. I have a question that how many ways to write function in jquery? What is the difference between

(function($){

$.fn.myFunction = function() {

// CODE IN HERE

};

})(jQuery);

and

$(document).ready(function() {

aFunction();

});

I will be thankful to getting the answer.

Tuesday, August 24, 2010 8:05 PM
# Basil Goldman said:

NOTE: The following two javascript codes are equivalent (See below), instead your example, because in your example -> //Code 2 is it jQuery function "$.ready" -> that run/call in his callback YOUR javascript code ONLY after DOM READY -> that mean all html elements + sources are exists and initialized in html.

===============================

// Code 1:

(function ($) {

   // Javascript code

})(jQuery)

// Code 2:

var myFunction = function ($) {

   // Javascript code

};

myFuntion(jQuery);

Thursday, August 26, 2010 4:23 PM
# kash said:

thanks a lot :)

Tuesday, September 07, 2010 12:04 PM
# how to define your own functions in jquery | Web Design & SEO said:

Pingback from  how to define your own functions in jquery  | Web Design & SEO

Tuesday, October 19, 2010 11:23 PM
# the rasx() context » Blog Archive » jQuery Notes said:

Pingback from  the rasx() context  &raquo; Blog Archive   &raquo; jQuery Notes

Wednesday, November 17, 2010 11:09 PM
# Defining your own functions in jQuery : TrieuTuanNghia's blog said:

Pingback from  Defining your own functions in jQuery : TrieuTuanNghia&#039;s blog

Friday, May 06, 2011 4:05 PM
# tuba said:

Nice help to learn how to code custom jQuery function. Thank you for the post

Wednesday, July 13, 2011 5:15 AM
# Iror said:

jQuery.fn.yourfunctionname = function() {

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

};

is the same like

jQuery.fn.yourfunctionname = function() {

   var o = this;

};

you are creazy man ;P

Friday, December 16, 2011 11:29 PM

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above: