jquery插件入门基础
1 jQuery插件的类型
jQuery插件主要分为三种类型;
1.1 jQuery方法
这种类型的插件是把一些常用或重复使用的功能定义为函数，然后绑定到jQuery对象上，从而成为jQuery对象的一个扩展方法。
1.2 全局函数
也可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jquery作用域下的一个公共的函数使用。如，jquery的ajax()方法就是利用这种途径内部定义的全局函数。
由于全局函数没有被绑定到jQuery对象上，故不能够在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或者$.fn()方式进行引用。
1.3 选择器
自定义选择器。
2 解析jQuery插件机制
为了方便用户创建插件，jquery自定义了jQuery.extend()和jQuery.fn.extend()方法。
jQuery.extend()方法能够创建全局的函数或者选择器。
jQuery.fn.extend()方法能够创建jquery对象方法。
|
<script type="text/javascript"> jQuery.extend({ minValue:function(a,b){ return a<b?a:b; }, maxValue:function(a,b){ return a<b?b:a; } });
$(function(){ $('input').click(function(){ var a=prompt("请输入一个数值？"); var b=prompt("请再输入一个数值？"); var c = jQuery.minValue(a,b); var d = jQuery.maxValue(a,b); alert("你输入的最大值是:"+d+"\n你输入的最小值是："+c); }); }); |
jQuery.extend()和jQuery.fn.extend()方法都包含一个参数，该参数仅接受名/值对结构的对象，其中名表示函数或方法名，而值表示函数体。
jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。如，调用jQuery.extend()方法把对象a和b合并为一个新的对象，并返回合并对象将其值赋给变量c。
在合并操作中，如果存在同名属性，则后面参数对象的属性值会覆盖前面参数对象的属性值。
|
var a = { name:"zhu", pass:123 } var b = { name:"wang", pass:456, age:1 } var c = jQuery.extend(a,b); $(function(){ for(var name in c){ $("div").html($("div").html()+"<br>"+name+":"+c[name]); } }); |
在实际开发中，常常使用jQuery.extend()方法为插件方法传递系列选项结构的参数。
|
function fn(options){ var options = jQuery.extend({//默认参数选项列表 name1:value1, name2:value2, name3:value3 },options); //使用函数的参数覆盖或合并到默认参数选项列表中 }
fn({name1:value2,name2:value3,name3:value1}); //覆盖新值 fn({name4:value4,name5:value5}); //添加新选项 fn(); //保持默认值 |
jQuery.extend()方法的对象合并机制，比传统的逐个检测参数不仅灵活且简洁，使用命名参数添加新选项也不会影响已编写的代码风格，让代码变得更加直观明白。
3 创建jQuery全局函数
就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数。
这些函数有一个共同的特征，既是不直接操作DOM元素，而是操作javascript的非元素对象，或者执行其他非对象的特定操作，如jquery的each()函数和noConflict()函数。
Ajax()方法，它便是一个典型的jquery全局函数，$.ajax()所做的一切都可以通过调用名称ajax()的全局函数来实现。
使用jQuery.extend()方法可以扩展jQuery对象的全局函数。当然我们也可以使用下面的方法快速定义jQuery全局函数。
|
jQuery.minValue = function(a,b){ return a<b?a:b; }; jQuery.maxValue = function(a,b){ return a<b?b:a; }; |
也既是说，如果要向jQuery命名空间上添加一个函数，只需要将这个新函数指定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$。
考虑到jQuery插件越来越多，因此在使用时可能会遇到自己的插件名与第三方插件名发生冲突。为了避免这个问题，建议把自己的插件都封装在一个对象中。
|
jQuery.css8 = { minValue : function(a,b){ return a<b?a:b; }, maxValue : function(a,b){ return a<b?b:a; } }
var c = jQuery.css8.minValue(a,b); var c = jQuery.css8.maxValue(a,b); |
4 使用jQuery.fn对象创建 jquery对象方法
创建全局函数只需要通过为jQuery对象添加属性即可，而创建jQuery对象方法也可以通过为jQuery.fn对象添加属性来实现。实际上jQuery.fn对象就是jQuery.prototype原型对象的别名。
|
jQuery.fn.test = function(){ alert("这是jQuery对象方法！"); } $(function(){ $("input").click(function(){ $(this).test(); }); }); |
|
jQuery.fn.test = function(){ return this.each(function(){ alert(this.nodeName); }); } $(function(){ $("body *").click(function(){ $(this).test().html(this.nodeName).hide(4000); //连写 }); }); |
5 使用extend()方法创建jQuery对象方法
jQuery.extend()方法能够创建全局函数，而jQuery.fn.extend()方法可以创建jQuery对象方法。
jQuery.fn.extend({
test : function(){
return this.each(function(){
alert(this.nodeName);
});
}
});
6 封装jQuery插件
封装jQuery插件的第一步是定义一个独立域，代码如下所示：
(function($){
//自定义插件代码
})(jQuery);
确定创建插件类型，选择创建方式。
(function($){
$.extend($.fn,{ //jquery对象方法扩展
//函数列表
})
})(jQuery);
(function($){
$.extend($.fn,{ //jquery对象方法扩展
color : function(options){
Var options
=$.extend({
bcolor:’white’,
fcolor:’black’
},options);
//函数体
}
})
})(jQuery);
(function($){
$.extend($.fn,{ //jquery对象方法扩展
color : function(options){
Var options
=$.extend({
bcolor:’white’,
fcolor:’black’
},options);
return
this.each(function(){
$(this).css(‘color’,options.fcolor);
$(this).css(‘backgroundColor’,options.bcolor);
});
}
})
})(jQuery);
$(function(){
$(“h1”).color({
Bcolor:’#eea’,
fcolor:’red’
});
})
7 优化jQuery插件—开放公共参数
续上面的代码为例进行说明，把其中的参数默认值作为$.fn.color对象的属性单独进行设计，然后借助jQuery.extend()方法覆盖原来参数选项即可。
|
(function($){ $.extend($.fn,{ color:function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } })(jQuery);
$(function(){ $.fn.color.defaults = { bcolor:"#eea", fcolor:"black" } $("h1").color(); $("p").color({bcolor:"#fff"}); $("div").color(); }); |
8 优化jQuery插件—开发部分功能
继续以上一节的示例为基础，为其添加一个格式化的扩展功能，这样用户在设置颜色的同时，还可以根据需要适当进行格式化功能设计，如加粗、斜体、放大等功能操作。
|
(function($){ $.extend($.fn,{ color:function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); var _html = $(this).html(); _html = $.fn.color.format(_html); $(this).html(_html); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } $.fn.color.format = function(str){ return str; } })(jQuery);
$(function(){ $.fn.color.defaults = { bcolor:"#eea", fcolor:"black" } $.fn.color.format = function(str){ return "<strong>"+str+"</strong>"; } $("h1").color(); $("p").color({bcolor:"#fff"}); $.fn.color.format = function(str){ return "<span style='font-size:30px;'>"+str+"</span>"; } $("div").color(); }); |
9 优化jQuery插件—保留插件隐私
若插件包含很多函数，在设计时我们希望这么多函数不搅乱命名空间，也不会被完全暴露，惟一的方法就是使用闭包。为了创建闭包，可以将整个插件封装在一个函数中。
继续以上一个为例，为了验证用户在调用color()方法时所传递的参数是否合法，我们不妨在插件中定义一个参数验证函数，但是该验证函数是不允许外界侵入或者访问的，此时我们可以借助闭包把它隐藏起来，只允许在插件内部进行访问。
|
(function($){ $.extend($.fn,{ color:function(options){ if(!filter(options)){ return this; } var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); var _html = $(this).html(); _html = $.fn.color.format(_html); $(this).html(_html); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } $.fn.color.format = function(str){ return str; } function filter(options){//定义隐藏函数，外界无法访问 return !options || (options && typeof options==="object")?true:false; } })(jQuery);
$(function(){ //以下访问非法 $("p").color("#ffffff"); }); |
