教你读懂jquery插件

摘要

在目前流行的web程序开发和设计中,jquery一定是必不可少的,无论你是在百度,还是淘宝,你都能找到它,为了代码或者方法的重用,往往我们会根据功能自己去封装或者是扩展jquery,也就是jquery

在目前流行的web程序开发和设计中,jquery一定是必不可少的,无论你是在百度,还是淘宝,你都能找到它,为了代码或者方法的重用,往往我们会根据功能自己去封装或者是扩展jquery,也就是jquery插件的开发。

    Jquery的插件有三种类型。

    1.封装对象方法的插件:

      这种插件是将对象方法进行封装起来,可以通过选择器来获取对象的操作,如下面的一个对jquery的color()插件,该插件通过选择器来设置匹配元素的颜色,这就是对jquery对象的方法扩展,写法如下(也是标准的写法).

;(function($){
    $.fn.extend({
        //属性
        "color":function(value){
            if(value==undefined){
                return this.css("color");//返回元素的颜色
            }
            return this.css("color",value);//设置元素的颜色
        }
    });
})(jQuery);

插件的使用方法,比如我们要获取div下面第一个元素字体的颜色,并且把div下面的字体全部设置为红色。

$("div").color();//返回一个颜色字符串
$("div").color("red");//把字体设置为红色

    2.封装全局函数的插件

    在jquery空间内容增加一个自定义函数

    如增加一个使用jquery去除字符串右边或者是左边空格的函数,jquery已经有去除字符串两边空格的函数,写法如下,也是标准的写法:

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

调用方式:jQuery.ltrim("   sss");

          jQuery.rtrim("sss  ");

IT家园
IT家园

网友最新评论 (0)