jQuery插件的作用：完善、擴(kuò)充jQuery庫(kù)中的功能.
比如用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)animate并沒(méi)有提供顏色改變的功能。我們便可以引入一個(gè)簡(jiǎn)單的顏色插件如jquery.animate-colors.js
引用順序如下

<script src="js/jquery-3.1.0.js"></script>
//必須要在jquery之后引用，以防插件中獲取不到一些jQuery方法
<script src="js/jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function(){   
//引入之后我們便可以自定義顏色改變的動(dòng)畫(huà)了  
$("#div1").animate({backgroundColor:"pink"},3000);
})
</script>

在插件開(kāi)發(fā)前先介紹一個(gè)jQuery工具

$.extend([d],tgt,obj1,[objN])

用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。

舉例

var obj1 = {
             name: 'Jay',
             age: 88
}
var obj2 = {
             name: 'yxt',
             size: 100
}
            
// 使用extend（）方法合并多個(gè)對(duì)象：會(huì)把多個(gè)對(duì)象的屬性合并在第一個(gè)對(duì)象里，并返回。如果有同名屬性，則屬性值是最后一個(gè)對(duì)象的值
var obj = $.extend(obj1, obj2);
console.log(obj);//age:88 name:"yxt" size:100
console.log(obj1);//age:88 name:"yxt" size:100
//可以看出obj1被修改了
怎么才能不修改呢？
只需在傳參的時(shí)候 前置一個(gè)空對(duì)象
var obj = $.extend({}，obj1, obj2);
console.log(obj1);//age:88 name:"Jay"

使用extend給jQuery擴(kuò)展新功能.

參數(shù)類(lèi)型是一個(gè)對(duì)象，屬性名就是新方法的名字，屬性的值就是新方法的功能函數(shù)

//通過(guò)$.extend()向jQuery添加了一個(gè)sayHello函數(shù)，
//然后通過(guò)$直接調(diào)用。這就算是一個(gè)小插件
$.extend({sayHello: function(name){
        console.log('hello' + (name ? name : 'World'));
            }
});
$.sayHello();//helloWorld
$.sayHello("Jay");//helloJay

下面自定義console，輸出特定格式的信息，定義一次后可以通過(guò)jQuery在程序中任何需要的地方調(diào)用它。

$.extend({
        log: function(message){
        // 1、獲取到當(dāng)前的年月日、時(shí)分秒
        var now = new Date(),
        y = now.getFullYear(), // 年
        m = now.getMonth()+1,    // 月
        d = now.getDate(),     // 日
        h = now.getHours(),    // 時(shí)
        min = now.getMinutes(),  // 分
        s = now.getSeconds(),   // 秒
        time = y+"/"+m+"/"+d+" "+h+":"+min+":"+s;
        console.log(time + message);
        }
});
$.log("飄移青春");
//2016/9/12 22:13:49飄移青春

另一種方式的jQuery插件開(kāi)發(fā)

$.fn.方法名 = 方法函數(shù)

//給jQuery添加一個(gè)新插件，傳入顏色關(guān)鍵字，讓標(biāo)簽字體變色
$.fn.setColor = function(color) {   
// this 指代的是當(dāng)前調(diào)用者，也就是方法操作的jQuery對(duì)象
// 當(dāng)插件內(nèi)部調(diào)用了jQuery方法實(shí)現(xiàn)功能時(shí)，
//可以直接把操作函數(shù)返回出去， 
//因?yàn)閖Query中的方法執(zhí)行完畢后會(huì)返回這個(gè)操作對(duì)象，
//也就間接的把當(dāng)前操作的對(duì)象返回出去。
//如果沒(méi)有使用jQuery來(lái)實(shí)現(xiàn)功能，則需要手動(dòng)把this指針?lè)祷爻鰜?lái)
// 我們把操作對(duì)象返回出去的目的是
//為了讓自定義的插件能夠像jQuery方法那樣支持鏈?zhǔn)秸Z(yǔ)法
        return  this.css('color', color);
}

jQuery里有鏈?zhǔn)讲僮?/p>

鏈?zhǔn)讲僮鲀H僅是通過(guò)對(duì)象上的方法最后 return this

例:取出a標(biāo)簽中的href屬性的值，然后顯示在a標(biāo)簽中

$.fn.readHref = function (){
// .each(function):遍歷調(diào)用者的數(shù)據(jù)方法
    return this.each(function(){
       $(this).append(':' + $(this).attr('href'));
  })
}
//注意 這里 this的指向 以及 return語(yǔ)句是為了支持鏈?zhǔn)秸{(diào)用            

讓插件支持傳參

// 通過(guò)傳遞一個(gè)對(duì)象，包含color屬性及fontSize屬性來(lái)修改便簽的 
//字體顏色和字號(hào)
$.fn.setFont = function(option) {
// 定義一個(gè)對(duì)象，當(dāng)沒(méi)有傳參時(shí)，字體的樣式就是這個(gè)對(duì)象里保存的樣式
var defaultStyle = {
  color: 'black',
  fontSize: '16px'
}
// 判斷當(dāng)前有沒(méi)有參數(shù)，有則用參數(shù)中的樣式，沒(méi)有則用默認(rèn)樣式
var setting = $.extend({},defaultStyle, option);
// 修改當(dāng)前標(biāo)簽的CSS樣式
  return this.css({
            'color': setting.color,
            'fontSize': setting.fontSize
});
}

    // 調(diào)用setFont插件實(shí)現(xiàn)修改字體效果
    $('p').setFont({color: 'red'});