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>

 

转载于:https://www.cnblogs.com/jackyweb/archive/2010/11/01/1866215.html