一、类级别（$.extend）
? ??类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
? ? 开发扩展其方法时使用$.extend方法，即jQuery.extend(object);?
?
$.extend({
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;}
});
//页面中调用：
var i = $.add(3,2);
var j = $.minus(3,2);
?
?
?
二、 对象级别
????对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);?
?
$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
页面中调用：
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
?
?
?
三、 jQuery插件开发过程
????1、定义作用域：为插件定义私有作用域，外部代码不能直接访问插件内部的代码，插件内部的代码不污染全局变量、
????????? ?
(function ($){
//内部插件代码实现
})(jQuery)
?
?
? ? 2、为jQuery扩展一个插件：为jQuery的实例添加一个宽展方法。该宽展方法可以接收一些参数。
? ? ? ? ? ??
(function ($){
$.fn.myTable = function (options){
//具体代码实现
}
})(jQuery)
?? ??????? ?
?
????3、设置默认值：为扩展方法设置默认值，一般会将默认属性对象定义为defaults。使用$.extend(defaults,options)将默认值和传入的参数进行合并
?
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options);
}
})(jQuery)
?
?
? ? 4、支持jQuery的连接调用：循环把每个元素返回。
?
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options||{});
return this.each(function(){
//对每个元素进行操作
});
}
})(jQuery)
?
? ?
?
? ? 5、插件里的方法：为了使代码结构化可视化，需要用到function。在插件里的方法不能被外界调用。
?
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
var showName = function (obj){
$(obj).append(function(){
return "name";
});
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options);
return this.each(function(){
showName(this);
});
}
})(jQuery)
?
?
? ? 6、自定义回调函数：使用call和apply方法执行回调函数，
?
<!DOCTYPE html>
<html lang="en">
<body>
<div>Out And In Fade</div>
<div>Out And In Fade</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function ($) {
$.fn.outAndInFade = function (customOptions) {
var options = $.extend({}, $.fn.outAndInFade.defaultOptions, customOptions || {});
return this.each(function () {
$(this).on('click', function () {
if ($.isFunction(options.complete)) {
options.complete.apply(this);
}
});
});
};
$.fn.outAndInFade.defaultOptions = {
complete: null
};
})(jQuery);
jQuery('div').outAndInFade({
complete: function () {
$(this).css('background', '#ff9');
}
});
</script>
</body>
</html>
?
?