What does jQuery.fn mean?
这里的
1 | jQuery.fn.jquery |
在jquery中,
一个简单的构造函数函数:
1 2 3 4 5 6 7 8 | function Test() { this.a = 'a'; } Test.prototype.b = 'b'; var test = new Test(); test.a; //"a", own property test.b; //"b", inherited property |
类似于jquery架构的简单结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | (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" |
1 2 3 | jQuery.fn = jQuery.prototype = { // ... } |
这意味着
1 2 | // The current version of jQuery being used jquery:"@VERSION", |
这行代码在源代码中:
1 2 3 | jQuery.fn = jQuery.prototype = { //list of functions available to the jQuery api } |
但是
1 2 3 4 5 | $.fn.myExtension = function(){ var currentjQueryObject = this; //work with currentObject return this;//you can include this if you would like to support chaining }; |
这里有一个简单的例子。假设我想做两个扩展,一个放一个蓝色边框,一个给文本加蓝色,我想把它们链接起来。
1 2 3 4 5 6 7 8 9 10 11 12 | $.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; }; |
现在,您可以对这样的类使用它们:
1 | $('.blue').blueBorder().blueText(); |
(我知道这最好使用CSS,例如应用不同的类名,但请记住,这只是一个演示来展示这个概念)
这个答案有一个很好的完全扩展的例子。
在jquery源代码中,我们有
为了确认这一点,您可以检查