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:

$(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…

הוסף תגובה
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:
    http://www.learningjquery.com/2007/10/a-plugin-development-pattern

    להגיב
  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.

    Thanks,
    Clint

    להגיב
  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

    (function($){
    $.fn.myFunction = function() {
    // CODE IN HERE
    };
    })(jQuery);

    and

    $(document).ready(function() {
    aFunction();
    });
    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
    })(jQuery)

    // Code 2:
    var myFunction = function ($) {
    // Javascript code
    };
    myFuntion(jQuery);

    להגיב
  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.

    -Sindhu.A

    להגיב
  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.

    -Sindhu.A

    להגיב
  16. blk27 באפריל 2012 ב 14:42

    http://docs.jquery.com/Plugins/Authoring 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.

    להגיב