Question

Possible Duplicate:
What does jQuery.fn mean?

I have some script on a page trying to work out what its doing:

(function ($, window, undefined)
{

    var 
    // String constants for data names
    dataFlag = "watermark",
    dataClass = "watermarkClass",
    dataFocus = "watermarkFocus",
    dataFormSubmit = "watermarkSubmit",
    dataMaxLen = "watermarkMaxLength",
    dataPassword = "watermarkPassword",
    dataText = "watermarkText",

    // Copy of native jQuery regex use to strip return characters from element value
    rreturn = /\r/g,

    // Includes only elements with watermark defined
    selWatermarkDefined = "input:data(" + dataFlag + "),textarea:data(" + dataFlag + ")",

    // Includes only elements capable of having watermark
    selWatermarkAble = "input:text,input:password,input[type=search],input:not([type]),textarea",

    // triggerFns:
    // Array of function names to look for in the global namespace.
    // Any such functions found will be hijacked to trigger a call to
    // hideAll() any time they are called.  The default value is the
    // ASP.NET function that validates the controls on the page
    // prior to a postback.
    // 
    // Am I missing other important trigger function(s) to look for?
    // Please leave me feedback:
    // http://code.google.com/p/jquery-watermark/issues/list
    triggerFns = [
        "Page_ClientValidate"
    ],

    // Holds a value of true if a watermark was displayed since the last
    // hideAll() was executed. Avoids repeatedly calling hideAll().
    pageDirty = false,

    // Detects if the browser can handle native placeholders
    hasNativePlaceholder = ("placeholder" in document.createElement("input"));


    /*******************************************************/
    /* Enable / disable other control on trigger condition */
    /*******************************************************/
    $.fn.TriggerContol = function (options)
    {

Im struggling with the last two lines. Why has the developer used fn, what does this mean?

I understand that this whole file is basically a self invoking anonymous function designed to attach functions to the Jquery library so you can do jQuery(x).TriggerControl. Im just wondering what this particular construct means.

Answer 1

In jQuery, jQuery.fn is simply a reference to jQuery.prototype.

So to understand what is happening, you really need to understand prototypal inheritance.

All objects created from the jQuery constructor will inherit any property that exists on the jQuery.prototype object.

Take this simplified example:

function jQuery() {
      // empty constructor function
}

jQuery.fn = jQuery.prototype;  // Make a "fn" property that simply references the 
                               //    jQuery.prototype object.

// So assigning a property to jQuery.fn 
//    is the same as assigning it to jQuery.prototype
jQuery.fn.sayHello = function() { alert( "Hi!" ); };

// Create an object from the jQuery constructor
var obj = new jQuery;

// Our new object will automatically inherit the "sayHello" function
obj.sayHello();  // "Hi!"

This is obviously very simple, and jQuery does much more than just this, but it is the prototypal inheritance that allows all jQuery objects to have the same set of methods.

To add a new method to all jQuery objects, you just add to its prototype.

jQuery.fn.sayGoodbye = function() { alert("Goodbye!"); };

// call the new method on our original object
obj.sayGoodbye();  // Goodbye!

As you can see, the sayGoodbye properly magically appeared, even though we didn’t directly add that property to our obj.

---

JSFIDDLE DEMO of the above code.

---

I would assume that the reason they offer jQuery.fn as a property is simply because it is shorter, and perhaps easier to understand for someone who doesn’t know how prototypal inheritance works.