Answers:
在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"
function func1 (a) { ... }
,而属性在这里是'a'变量var foo = {}; foo.a = 'a'
。
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来完成,例如应用不同的类名,但是请记住,这只是一个演示概念的演示)
这个答案是完整扩展的一个很好的例子。
each
示例代码中的吗?$.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };
将可以正常工作,因为.css()
Alerady会遍历所有元素。
css
函数将自动在每个内部对其进行迭代。这只是一个示例,显示了this
外部对象是jquery对象而内部对象是元素本身的区别。