zoukankan      html  css  js  c++  java
  • jquery学习(四)-如何书写自定义的jquery插件

    来自锋利的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]表示选择器函数的参数。

  • 相关阅读:
    图解 PHP运行环境配置和开发环境的配置
    PHP学习笔记(2)语法和数据类型
    Jquery调用 新浪微博API 用户资料
    [转载]并行计算部分总结
    Qt QTreeWidget节点的添加+双击响应+删除详解
    C/C++中函数参数传递详解
    C语言预处理——宏定义
    cuda工程在VS中使用心得
    MPI用于矩阵乘积示例
    开到荼蘼花事了,永世相守孟婆桥
  • 原文地址:https://www.cnblogs.com/hcw136156133/p/5031219.html
Copyright © 2011-2022 走看看