话不多说,直接上代码
$.fn.highlight=function(options){
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;//注意返回this,以保证jquery对象的链式调用
}
//此函数从来绑定用户自定义方法。$.entend(targets,options1,options2,...)用来获取一些列样式对象到targets,遇到同名则后一个起作用,也就是越往后优先级越高。
//在这里,第一个参数就是我们的默认值,适用于无参调用的情况。
//第二个参数是我们传进去的样式参数。
//设置默认值是为了方便用户自定义和简便无参调用
$.fn.highlight.defaults={
backgroundColor:'blue',
color:'red'
}//设置默认的方法
// 也可以这样设置
// $.fn.highlight.defaults.backgroundColor='blue'
// $.fn.highlight.defaults.color='blue'
window.onload=function(){
var a=$('#test-highlight');
var b1=$('#b1');
var b2=$('#b2');
b1.click(function(){
// alert('success!');
a.highlight();//无参调用,高亮样式为用户设置的默认值
});
b2.click(function(){
a.highlight({
backgroundColor: 'red',
color:'green'
});//有参调用
});
}