jQuery插件开发详解：全局函数、对象方法与自定义选择器

jQuery插件的三种类型概述

jQuery插件主要包含三种类型：

绝大多数jQuery插件属于此类。这类插件将对象方法封装起来，在通过jQuery选择器获取jQuery对象的过程中执行操作，从而充分利用jQuery强大的选择器优势。

此外，还可以将自定义的功能函数独立附加到jQuery命名空间下，使其作为jQuery作用域内的一个公共函数使用。需要注意的是，全局函数并未绑定到jQuery对象上，因此无法直接在选择器获取的jQuery对象上调用。必须通过jQuery.fn()或$.fn()的方式进行引用。

如果认为jQuery提供的选择器不够用，或者使用不便，可以考虑创建自定义选择器。

使用jQuery.extend()创建全局函数

① 使用jQuery.extend()方法：该方法能够创建全局函数或选择器。

说明：所谓全局函数，实际上是指位于jQuery命名空间内部的函数，有时也被称为实用工具函数。这类函数的共同特征是不直接操作DOM元素，而是操作JavaScript的非元素对象，或者执行其他非特定对象的操作，例如jQuery的each()函数和noConflict()函数。

示例：在jQuery命名空间上创建两个公共函数

 
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);
}); 
}) 
<input type="button" value="jQuery插件扩展测试" />

※ 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全局函数

 
jQuery.css8 = {
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.css8.minValue(a,b);
var d = jQuery.css8.maxValue(a,b);
alert("你输入的最大值是：" + d + "\n你输入的最小值是：" + c);
}); 
}) 

说明：如果要向jQuery命名空间上添加一个函数，只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$，jQuery.css8==$.css8

使用jQuery.fn.extend()创建对象方法

② jQuery.fn.extend()方法：能够创建jQuery对象方法。

示例：来个最简单的jQuery对象方法

 
jQuery.fn.test = function(){
alert("这是jQuery对象方法！");
} 
$(function(){
$("div").click(function(){
$(this).test();
}); 
})