Question

可能重复：
What does jQuery.fn mean?

我在页面上有一些脚本试图找出它的作用：

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

我在最后两行中挣扎。为什么开发人员使用fn，这是什么意思？

据我所知，整个文件基本上是一个自调用匿名函数，用于将函数附加到Jquery库，因此你可以执行jQuery（x）.TriggerControl。我只是想知道这个特殊的构造意味着什么。

Answer 1

在jQuery中，jQuery.fn只是对jQuery.prototype的引用。

因此，要了解正在发生的事情，您真的需要了解原型继承。

从jQuery构造函数创建的所有对象都将继承jQuery.prototype对象上存在的任何属性。

采用这个简化的例子：

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!"

这显然非常简单，jQuery做的不仅仅是这个，而是原型继承允许所有jQuery对象拥有相同的方法集。

要向所有jQuery对象添加新方法，只需添加到其原型。

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

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

正如您所看到的，即使我们没有直接将该属性添加到我们的sayGoodbye，obj也会神奇地出现。

上述代码的

JSFIDDLE DEMO 。

我认为他们提供jQuery.fn作为属性的原因仅仅是因为它更短，并且对于不知道原型继承如何工作的人来说可能更容易理解。

Answer 2

使用fn运算符，您可以为（一组）元素创建自己的方法。在这种情况下，该方法称为TriggerControl，可以像：

一样调用

$('.someclass').TriggerControl(someoptions);

请查看this页面了解详情。

javascript和fn发生了什么？

2 个答案: