首页 > Web开发 > 详细

jquery学习(四)-如何书写自定义的jquery插件

时间:2015-12-08 23:46:20      阅读:291      评论:0      收藏:0      [点我收藏+]

来自锋利的jquery第二版

下面我们开始介绍如何通过现有的方法和函数,封装出既符合自己需求,有高效的插件。

  Jquery插件公分为3类,分别为:封装对象方法的插件、封装全局函数的插件、自定义选择器插件,在介绍插件的三种类型之前,我们先来了解书写插件的基本要点(这里转自aspwzmuma和锋利的jquery):

a.插件的文件命名推荐遵循jQuery.[插件名].js的规则,以便于与其他的js文件的区分,如新插件文件jquery.newplugin.js.

b.对象级别插件,所有的方法都应依附于jquery.fn主体对象;类级别插件,所有的方法都应依附于jquery对象

c.插件的内部,this所代表的是通过jQuery选择器所获取的对象,不像一般方法那样。如:click()方法,内部this指向的是绑定click的DOM对象。

d.可以通过$.each来遍历所有的元素。

e.无论是对象级别还是类级别插件,结尾都必须以分号结束,否则,在文件被压缩时,会出现错误提示信息.为了避免不要的麻烦,我们可以在插件的开头加上分号。

f.插件应该返回一个jquery对象,以保证可以链式操作。除非插件是需要返回字符串或数字等等量的参数。

g.插件内避免使用$作为jquery对象的别名,而是应该使用完整的Jquery来表示。这样做可以避免冲突。但是,如果坚持$也可以,我们可以通过闭包的方式来规避这个问题。

如以下代码:

;(function($){

Var foo;

Var bar=function(){

 

}

$.bar=bar;

})(jQuery)

h.jquery提供了两种用于拓展jquery功能的方法。第一种方法$.fn.extend(),适用于创建第一种类型的插件,第二种方法$.extend(),适用于后两种插件。

1、封装对象方法的插件

何为封装对象方法的插件呢?说白了就是将对象方法封装起来,然后可以通过jquery选择器获取的对象进行操作,如$(“element”).action(),这个action就是封装的对象,类似jqueryparent()addClass()方法。代码如下:

;(function($){
    $.fn.extend({
        //颜色设置
        "color":function(value){
            return this.css("color",value);
        }
        //表格隔行变色,选中高亮显示(checkBox选中,颜色高亮)
        ,"table":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);
                 $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                    .find(":checkbox").prop("checked",!hasSelected);
            });
            //如果单选框默认是选中的状态,则该行高亮显示
            $("tbody>tr:has(:checked)",this).addClass(options.selected);
            return this;  //返回this,使得方法可链
        }

    });
})(jQuery)

//调用

$(“div”).color(“red”);

$(“table”).table({

odd:"odd",
         even:"even",
         selected:"selected"
});

 

 

2、封装全局函数的插件

这类插件是在jQuery名空间里面添加的一个函数,下面以去除字符串左边或右边空格为例,代码如下:

;(function($){
    $.extend({
        ltrm:function(value){
            return (value || "").replace(/^\s/g,"");
        },
        rtrim:function(value){
            return (value || "").replace(/\s+$/g,"");
        }
    });
})(jQuery)

//调用

Var str1=$.ltrm(str);

 

3、自定义选择器插件

尽管jQuery的选择器已经很强大,但是不代表其已经尽善尽美,开发者有时候需要一些符合自己需求的强大选择器。这是jquery提供的用户可自定义选择器的方法就发挥了很大作用,使得jquery选择器功能更加完善。废话不多说了,直接上代码:

;(function($) {

$.extend(jQuery.expr[":"], {

between : function( a , i ,m ) {

         //将传递进来的m[3]以逗号为分隔符,切成一个数组

var tmp=m[3].split(","); 

return tmp[0]-0<i&&i<tmp[1]-0;

}

});

})(jQuery);

这里a指向的是当前遍历到的DOM元素;i指的是当前遍历到DOM元素的索引值,从0开始的;mjquery正则解析引擎进一步解析后的产物,返回的是一个数组,下面我们以$(“div:gt(1)”)为例解析m参数:
m[0]jquery要进一步匹配的内容,‘gt(1);

m[1]选择器的引导符,上面例子中为冒号‘:’,用户可以自定义引导符;

m[2]要调用的选择器函数,例子中是gt()函数;

m[3]表示选择器函数的参数。

jquery学习(四)-如何书写自定义的jquery插件

原文:http://www.cnblogs.com/hcw136156133/p/5031219.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!