1、擴展jQuery自身之全局函數
jQuery.logError={/*log error*/}
jQuery.logWarning ={/*log warning */}
jQuery.logDebug ={/*log debug */}
使用：jQuery.logError();
上面三個可以寫成
jQuery.log= {
Error:function(){/*log error*/},
Warning: function(){/*log warning */},
Debug: function(){/*log debug*/}
}
使用：jQuery.log.Error();
jQuery.foobar={/*do foobar*/}
使用：jQuery.foobar();
以上的方法等同于使用 jQuery. extend ()
jQuery. extend = {
log: { Error:function(){/*log error*/},
Warning: function(){/*log warning */},
Debug: function(){/*log debug*/}
},
foobar:function(){/*do foobar*/}
}
使用：
jQuery.log.Error();
jQuery.foobar();
2、添加實例方法，擴展jQuery.fn
jQuery.fn=jQuery.prototype
如：jQuery.fn.showMessage=function(){
alert(“message!!”)}
使用：$(“#div1”).showMessage();
l this是對當前jQuery對象的引用
l 使用each迭代當前對象
l 插件方法必須返回一個jQuery對象
Plug me:制作自己的插件
寫一個自己的jQuery插件是非常容易的,如果你按照下面的原則來做,可以讓其他人也容易地結合使用你的插件.
為你的插件取一個名字,在這個例子里面我們叫它"foobar".
創建一個像這樣的文件:jquery.[yourpluginname].js,比如我們創建一個jquery.foobar.js
創建一個或更多的插件方法,使用繼承jQuery對象的方式,如:
jQuery.fn.foobar = function() {
// do something
};
可選的:創建一個用于幫助說明的函數,如:
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};
你現在可以在你的插件中使用這些幫助函數了:
jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};
可選的l:創建一個默認的初始參數配置,這些配置也可以由用戶自行設定,如:
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};
現在可以無需做任何配置地使用插件了,默認的參數在此時生效:
$("...").foobar();
或者加入這些參數定義:
$("...").foobar({
value: 123,
bar: 9
});
如果你release你的插件, 你還應該提供一些例子和文檔,大部分的插件都具備這些良好的參考文檔.
現在你應該有了寫一個插件的基礎,讓我們試著用這些知識寫一個自己的插件.
很多人試著控制所有的radio或者checkbox是否被選中,比如:
$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});
無論何時候，當你的代碼出現each時，你應該重寫上面的代碼來構造一個插件,很直接地:
$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
這個插件現在可以這樣用:
$("input[@type='checkbox']").check();
現在你應該還可以寫出uncheck()和toggleCheck()了.但是先停一下,讓我們的插件接收一些參數.
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
這里我們設置了默認的參數,所以將"on"參數省略也是可以的,當然也可以加上"on","off", 或 "toggle",如:
$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');
如果有多于一個的參數設置會稍稍有點復雜,在使用時如果只想設置第二個參數,則要在第一個參數位置寫入null.
從上一章的tablesorter插件用法我們可以看到,既可以省略所有參數來使用或者通過一個 key/value 對來重新設置每個參數.
作為一個練習,你可以試著將第四章的功能重寫為一個插件.這個插件的骨架應該是像這樣的:
$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context
var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after the last one!
};
if(options) { // check if options are present before extending the settings
$.extend(settings, options);
} // ...
// rest of the code
// ...
return this; // if possible, return "this" to not break the chain
});