jquery插件方法$.fn/$.extend

首先介绍$.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插件