Jquery 的插件编写
0. 插件的种类
一. 封装对象方法的插件
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件
有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式"插"在内核上，例如 parent()方法、appendTo()方法等不少DOM的操作方法。
二. 封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。 例如jQuery.noConfilict()方法 、常用的jQuery.ajax()方法等都是jQuery内部作为全局函数的插件附加到内核上的。
三. 选择器插件
个别情况下，会需要用到选择器插件。随软jQuery的选择器十分强大，但还是需要扩充一些自己喜欢的选择器。例如用：color(red）来选择所有红色字的元素之类的想法。
1. 闭包
利用闭包的特性，既可以避免内部临时变量影响全局空间，有可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的：
代码
//注意为了更好的兼容性，开始前有个分号
; (function ($) { //此处将$作为匿名函数的形参
/* 这里放置代码，可以使用$作为jQuery的缩写别名*/
//定义一个局部变量foo,仅函数内部可以访问 ，外部无法访问
var foo;
var bar=function(){
/*
在匿名函数内部的函数都可以访问foo，即便是在匿名函数的外部调用bar()的时候，可以在bar()的内部访问到foo,但在匿名函数的外部直接访问foo是做不到的
*/
}
/*
下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内，这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义的函数bar();丙炔内部函数bar()也能访问匿名函数的变量foo
*/
$.BAR=bar;
}) ///这里就将jQuery作为实参传递给匿名函数了
jQuery 提供了两个用于扩展jQuery功能的方法，即：jQuery.fn.extend()方法和jQuery.extend()方法。 前者用于扩展之前提到的3中类型插件的第1种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object 对象的"名/值"对 分别代表“函数或方法名/函数主体” 。
jQuery.extend()除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展已有的Object的对象。
jQuery.extend(target,obj1,....[objN])
用于一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。
代码
var settings={ validate:false, limit:5,name:"foo"};
var options={validate:true, name:"bar"};
var newOptions=jQuery.extend(settings,options);
///结果为
newOptions={ validate:true, limit:5, name:"bar"};
jQuery.extend（） 方法经常被用于设置插件方法的一系列默认参数，
function foo(options){
options=jQuery.extend({
name:"bar",
length:5,
dataType:"XML"
}, options)
};
foo({ name:"a",length:"4"});
foo();
color的插件：
gt: function (a, i, m){
return i>m[3]-0;
}
第一个参数为a，指向的是当前遍历到的DOM元素
第二个参数为i, 指的是当前遍历到的DOM元素的索引值，从0开始
第三个参数m最为特别 ,它是由jQuery正则解析引擎进一步解析后的产物，是一个数组
m[0], 以上面的$("div:gt(1)")这个例子来讲，是:gt(1)这部分。它是jQuery选择器进一步要匹配的内容
m[1], 即选择器的引导符， 匹配例子中的":" ，即冒号。 用户还可以自定义其他选择引导符
m[2], 即例子中的“1”,它非常有用，是编写选择器函数最重要的参数
m[3], 比较罕见
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插件1，color</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.a{
color : red;
}
</style>
<script type="text/javascript" src="http://www.cnblogs.com/scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
//插件编写
;(function($) {
$.fn.extend({
"color":function(value){
if (value==undefined) {
return this.css("color");
} else {
return this.css("color",value);
}
}
});
})(jQuery);
//插件应用
$(function () {
//查看第一个div的color样式值
alert($("div").color() + "\n返回字符串，证明此插件可用。");
//把所有的div的字体颜色都设为红色
alert($("div").color("red") + "\n返回object证明得到的是jQuery对象。");
$("div").color("red").text("ff")
})
</script>
</head>
<body>
<div class="a">red</div>
<div style="color:blue">blue</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
</body>
</html>
使table颜色变色的插件
代码
<!-- 引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)',this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
//插件应用
$(function(){
$("#table2")
.alterBgColor() //应用插件
.find("th").css("color","red");//可以链式操作
})
2. 封装成全局函数的插件
代码
<script type="text/javascript">
//插件编写
;(function($) {
$.extend({
ltrim : function( text ) {
return (text || "").replace( /^\s+/g, "" )
},
rtrim : function rtrim( text ) {
return (text || "").replace( /\s+$/g, "" )
}
});
})(jQuery);
//插件应用
$(function(){
$("#trimTest").val(
jQuery.trim(" test ") + "\n" +
jQuery.ltrim(" test ") + "\n" +
jQuery.rtrim(" test ")
);
})
3. 选择器的插件
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插件4，between</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;(function($) {
$.extend(jQuery.expr[":"], {
between : function( a , i ,m ) {
var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0]-0<i&&i<tmp[1]-0;
}
});
})(jQuery);
//插件应用
$(function(){
alert("执行前");
$("div:between(2,5)").css("background","white");
alert("执行后");
})
</script>
</head>
<body>
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>
</body>
</html>
