首先介紹$.fn:
寫(xiě)一個(gè)簡(jiǎn)單更改css樣式插件
$.fn.highlight = function() {
this.css("backgroundColor", "#ffced"）
.css("color", "#d85030");
return this;//為了支持鏈?zhǔn)讲僮?}
//函數(shù)內(nèi)部的this在調(diào)用時(shí)被綁定為jQuery對(duì)象，所有函數(shù)內(nèi)部代碼可以正常調(diào)用所有jQuery對(duì)象的方法;
highilght()就是一個(gè)簡(jiǎn)單的插件悯搔，a.highlinght()即可調(diào)用灾常；
用戶可以自己設(shè)置樣式插件，添加一個(gè)參數(shù)鲫惶；
$.fn.highlight = function(option) {
//默認(rèn)樣式
var bgColor = option && option.backgroundColor || "red";
var color = option && option.color || "gary;
this.css("backgroundColor", bgColor).css("color", color);
return this;
}
可以直接使用highliht()調(diào)用蜈首，也可以為highliht({backgroungdColor: "#2223dd",color: "#FFFFFF"});
$.extend方法
$.extend(boolean target [obj1],[obj2]...)方法是把多個(gè)object對(duì)象的屬性合并到target目標(biāo)對(duì)象中呈驶，遇到同名屬性炒刁，總是使用靠后的對(duì)象值医男。默認(rèn)第一個(gè)參數(shù)是false嗽仪，如果為true文捶，即深度合并筛严，也會(huì)把對(duì)象中對(duì)象也加合并框沟；
$.fn.highlight = function(options) {
//把默認(rèn)值和用戶設(shè)置的值合并晋修；
var opts = $.extend({}, $.fn.highlight.deaults, options);
this.css("backgrouandColor", opts.backgroundColor).css("color", opts.color);
return this;
}
//設(shè)置默認(rèn)值
$.fn.highlight.defaults = function() {
color: "#dd8043",
backgroundColor: "#fff8de"
};
//修改默認(rèn)值六水，
$.fn.highlight.defaults.backgroundColor = "red";
$.fn.highlight.defaults.color = "green";
#("p").highlight()//使用的是默認(rèn)值
#("p").highlight({color: ""yellow})//使用的是用戶設(shè)置的值
再來(lái)看一個(gè)完整的超鏈接跳轉(zhuǎn)提示的插件例子吧俺孙；
<p>超鏈接跳轉(zhuǎn)提示插件</p>
<a target="_blank" id="info">百度</a>
//js
$.fn.external = function() {
//return結(jié)果辣卒，用來(lái)支持鏈?zhǔn)? return this.filter("a").each(function() {
//filter() 匹配選中的元素，each()遍歷每個(gè)匹配的元素
//each()內(nèi)部的回調(diào)函數(shù)的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();
一個(gè)較為完整的jQuery插件
