Defining your own functions in jQuery

22 בספטמבר 2008

תגיות: , , ,
22 תגובות

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:


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() {



הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

22 תגובות

  1. phim online13 בפברואר 2009 ב 8:15

    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 phim online good job!

  2. Sedat Kumcu13 באוקטובר 2009 ב 9:44

    Thanks for this great article man. Useful and understandable.
    Best regards.

  3. Frédéric Hewitt10 בנובמבר 2009 ב 23:48

    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:

  4. Clint16 בנובמבר 2009 ב 16:42

    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.


  5. theoni18 בנובמבר 2009 ב 10:04

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

  6. Hosting20 בדצמבר 2009 ב 11:58

    thank you for a very helpful article

  7. Avangelist10 במאי 2010 ב 11:43

    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?

  8. Pradeep Pathak20 ביולי 2010 ב 8:04

    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

  9. Lorem Ipsum24 באוגוסט 2010 ב 20:05

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

    $.fn.myFunction = function() {


    $(document).ready(function() {
    I will be thankful to getting the answer.

  10. Basil Goldman26 באוגוסט 2010 ב 16:23

    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

    // Code 2:
    var myFunction = function ($) {
    // Javascript code

  11. tuba13 ביולי 2011 ב 5:15

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

  12. Iror16 בדצמבר 2011 ב 23:29

    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

  13. Fiorenza20 במרץ 2012 ב 2:20

    Hi, just a question. are you allowed to assign the custom function return to a local variable? something like that
    var myvar=$mycustomfunction(argument).
    thanks in advance

  14. SINDHU5 באפריל 2012 ב 7:53

    Hi all,

    i need a jquery function to validate a textbox

    requirement: required field : true,
    min length:8,
    max length:16,
    should allow only alphabet, number.

    can any one please help me in this.
    Thanks in advance.


  15. SINDHU5 באפריל 2012 ב 9:08

    Hi all,
    i need a javascript function to validate a text-box. It should accept only numbers, decimal(14, 10) it should accept total 14 chars in that before "." 9 chars and after "." 4 chars should allow. if i won't enter any value after "." it should check for only 9 chars.


  16. blk27 באפריל 2012 ב 14:42 is way better

    you need to maintain chainability, make sure u wrap your plugin in a closure and don't redundantly wrap the this keyword in the immediate scope of your plugin's function.

  17. Anony Mouse15 ביוני 2012 ב 1:02

    Everything you said makes no sense. Thanks

  18. chandu1 בנובמבר 2012 ב 13:57

    Thanks for the information.