jQuery.fn是什么意思?

2020/09/23 23:21 · javascript ·  · 0评论

这是什么fn意思?

jQuery.fn.jquery

在jQuery中,fn属性只是属性的别名prototype

jQuery标识符(或$)仅仅是一个构造函数,并用它创建的所有实例,从构造函数的原型继承。

一个简单的构造函数:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

一个类似于jQuery体系结构的简单结构:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"

jQuery.fn是的简写形式jQuery.prototype源代码

jQuery.fn = jQuery.prototype = {
    // ...
}

这意味着jQuery.fn.jquery是的别名jQuery.prototype.jquery,它返回当前的jQuery版本。再次从源代码

// The current version of jQuery being used
jquery: "@VERSION",

fn从字面上指的是jquery prototype

这行代码在源代码中:

jQuery.fn = jQuery.prototype = {
 //list of functions available to the jQuery api
}

但是背后的真正工具fn是它的可用性,可以将您自己的功能连接到jQuery。请记住,jquery将成为函数的父作用域,因此this将引用jquery对象。

$.fn.myExtension = function(){
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
};

所以这是一个简单的例子。可以说我想进行两个扩展,一个扩展带有一个蓝色边框,并且给文本加上蓝色,然后将它们链接起来。

jsFiddle Demo

$.fn.blueBorder = function(){
 this.each(function(){
  $(this).css("border","solid blue 2px");
 });
 return this;
};
$.fn.blueText = function(){
 this.each(function(){
  $(this).css("color","blue");
 });
 return this;
};

现在,您可以将它们用于此类:

$('.blue').blueBorder().blueText();

(我知道最好通过CSS来完成,例如应用不同的类名,但是请记住,这只是一个演示概念的演示)

这个答案是完整扩展的一个很好的例子。

在jQuery源代码中,我们jQuery.fn = jQuery.prototype = {...}既然jQuery.prototype是对象,则的值jQuery.fn将只是对jQuery.prototype已经引用的同一对象的引用。

为了确认这一点,您可以检查(jQuery.fn === jQuery.prototype如果true这样做),然后他们引用相同的对象

本文地址:http://javascript.askforanswer.com/jquery-fnshishenmeyisi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!