首先介绍$.fn:
写一个简单更改css样式插件
$.fn.highlight = function() {
this.css("backgroundColor", "#ffced"）
.css("color", "#d85030");
return this;//为了支持链式操作
}
//函数内部的this在调用时被绑定为jQuery对象，所有函数内部代码可以正常调用所有jQuery对象的方法;
highilght()就是一个简单的插件，a.highlinght()即可调用；
用户可以自己设置样式插件，添加一个参数；
$.fn.highlight = function(option) {
//默认样式
var bgColor = option && option.backgroundColor || "red";
var color = option && option.color || "gary;
this.css("backgroundColor", bgColor).css("color", color);
return this;
}
可以直接使用highliht()调用，也可以为highliht({backgroungdColor: "#2223dd",color: "#FFFFFF"});
$.extend方法
$.extend(boolean target [obj1],[obj2]...)方法是把多个object对象的属性合并到target目标对象中，遇到同名属性，总是使用靠后的对象值。默认第一个参数是false，如果为true，即深度合并，也会把对象中对象也加合并；
$.fn.highlight = function(options) {
//把默认值和用户设置的值合并；
var opts = $.extend({}, $.fn.highlight.deaults, options);
this.css("backgrouandColor", opts.backgroundColor).css("color", opts.color);
return this;
}
//设置默认值
$.fn.highlight.defaults = function() {
color: "#dd8043",
backgroundColor: "#fff8de"
};
//修改默认值，
$.fn.highlight.defaults.backgroundColor = "red";
$.fn.highlight.defaults.color = "green";
#("p").highlight()//使用的是默认值
#("p").highlight({color: ""yellow})//使用的是用户设置的值
再来看一个完整的超链接跳转提示的插件例子吧；
<p>超链接跳转提示插件</p>
<a href="http://www.baidu.com" target="_blank" id="info">百度</a>
//js
$.fn.external = function() {
//return结果，用来支持链式
return this.filter("a").each(function() {
//filter() 匹配选中的元素，each()遍历每个匹配的元素
//each()内部的回调函数的this绑定为dom自身；
var a = $(this);
var url = a.attr("href");
if (url && (url.indexOf("http://") === 0 || url.indexOf("https://") === 0)) {//判断url是否存在
a.attr("href", "#0”)//更改url
.removeAttr("target")
.append("<i class='uk-icon-external-link'></i>")
//bootstrap样式
.click(function () {
if (confirm("确切前往" + url + "?")) {
window.open(url)
}
})
}
});
};
$("a").external();
一个较为完整的jQuery插件
