1、封装jQuery对象方法的插件
编写设置和获取颜色的插件color(),该插件用于实现以下两个功能:
(1)设置匹配元素的颜色
(2)获取匹配的元素(元素集合中的第一个)的颜色
由于是对jQuery对象的方法拓展,因此采用拓展第一类插件的方法jQuery.fn.extend()来编写,这里给这个方法提供了一个参数value,如果调用方法的时候传递了value这个参数,那么就是用这个值来设置字体颜色,否则就是获取匹配元素的字体颜色的值
;(function(){
jQuery.fn.extend({
"color":function(value){
if(value == undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
})(jQuery);实际上,CSS()方法内容已经有判断value是否为undefined的机制,所以才可以根据传递参数的不同而返回不同的值。因此,代码可以删减如下
;(function(){
jQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
<span id="test">测试文字</span>
<input type="color" id="color">
<script>
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
$('#color').on('change',function(){
$('#test').color($(this).val());
})
</script>另外,如果要定义一组插件,可以使用如下所示写法:
;(function(){
jQuery.fn.extend({
"color":function(value){
//插件代码
},
"border":function(value){
//插件代码
},
"background":function(value){
//插件代码
}
});
})(jQuery);2、封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数
例如新增两个函数,用于去除左侧和右侧空格。虽然jQuery已经提供了jQuery.trim()方法来去除两端空格,但在某些情况下,会只希望去除某一侧的空格
去除左侧、右侧的空格的函数分别写成如下jQuery代码。(text||””)部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态,如果text是undeined,则返回字符串””,否则返回字符串text。这个处理是为了保证接下来的字符串替换方法replace()方法不会出错
;(function($){
$.extend({
ltrim:function( text ){
return (text || "").replace(/^s+/g,"");
},
rtrim:function( text ){










