编写jQuery插件

本文由清尘发表于2012-01-06 16:38最后修改于2014-09-28属于jQuery分类

编写jQuery插件:
1.封装jQuery对象方法的插件
插件代码必须放置在下面这两句代码内就可以了。
(function($){
    //此处编写jQuery插件代码
    })(jQuery)
例一:编写一个color插件,该插件用于实现以下两个功能。
(1)设置匹配元素的颜色。
(2)获取匹配的元素(元素集合中的第1个)的颜色。
插件名jquery.color.js

(function($){
    $.fn.extend({
        "color":function(value){
            if(value==undefined){
                return this.css("color");
            }else{
            return    this.css("color",value);
            }

        }
    });
    })(jQuery)

使用插件:

$(function(){
    $(".test2").color("red");
})

例二:编写一个设置页面背景色的插件

(function($){
	$.fn.changBgColor=function(options){
		var defaults={
			bgcolor:"red",
			bordercolor:"yellow"
		};
		// Extend our default options with those provided.
		var opts=$.extend(defaults,options);
		this.css({"background":opts.bgcolor,"border-color":opts.bordercolor});
		return this;
	}
})(jQuery)

HTML部分:

<div id="test1"></div>
<div id="test2"></div>

CSS部分:

#test1,#test2{ width:100px; height:100px; border:3px solid #ccc;}

使用插件代码

$(function(){
		$("#test1").changBgColor();
		$("#test2").changBgColor({
			bgcolor:"blue",
			bordercolor:"#ccc"
		});
	});

2.封装全局函数的插件

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

$("#trimTest").val(
    jQuery.trim("    test    ")+"\n"+
    jQuery.ltrim("    test    ")+"\n"+
    jQuery.rtrim("   test    ")
);