當(dāng)我們使用jQuery對象的方法時，由于jQuery對象可以操作一組DOM，而且支持鏈?zhǔn)讲僮鳎杂闷饋矸浅７奖恪?br />

但是jQuery內(nèi)置的方法永遠(yuǎn)不可能滿足所有的需求。比如，我們想要高亮顯示某些DOM元素，用jQuery可以這么實(shí)現(xiàn)：

$('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');$('p a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

總是寫重復(fù)代碼可不好，萬一以后還要修改字體就更麻煩了，能不能統(tǒng)一起來，寫個highlight()方法？

$('span.hl').highlight();$('p a.hl').highlight();

答案是肯定的。我們可以擴(kuò)展jQuery來實(shí)現(xiàn)自定義方法。將來如果要修改高亮的邏輯，只需修改一處擴(kuò)展代碼。這種方式也稱為編寫jQuery插件。

編寫jQuery插件

給jQuery對象綁定一個新方法是通過擴(kuò)展$.fn對象實(shí)現(xiàn)的。讓我們來編寫第一個擴(kuò)展——highlight1()：

$.fn.highlight1 = function () {  // this已綁定為當(dāng)前jQuery對象:  this.css('backgroundColor', '#fffceb').css('color', '#d85030');  return this;}

注意到函數(shù)內(nèi)部的this在調(diào)用時被綁定為jQuery對象，所以函數(shù)內(nèi)部代碼可以正常調(diào)用所有jQuery對象的方法。

對于如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) --><div id="test-highlight1">  <p>什么是<span>jQuery</span></p>  <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>庫。</p></div>

來測試一下highlight1()的效果：

'use strict';$('#test-highlight1 span').highlight1();

什么是jQuery

jQuery是目前最流行的JavaScript庫。

細(xì)心的童鞋可能發(fā)現(xiàn)了，為什么最后要return this;？因?yàn)閖Query對象支持鏈?zhǔn)讲僮鳎覀冏约簩懙臄U(kuò)展方法也要能繼續(xù)鏈?zhǔn)较氯ィ?br />

$('span.hl').highlight1().slideDown();

不然，用戶調(diào)用的時候，就不得不把上面的代碼拆成兩行。

但是這個版本并不完美。有的用戶希望高亮的顏色能自己來指定，怎么辦？

我們可以給方法加個參數(shù)，讓用戶自己把參數(shù)用對象傳進(jìn)去。于是我們有了第二個版本的highlight2()：

$.fn.highlight2 = function (options) {  // 要考慮到各種情況:  // options為undefined  // options只有部分key  var bgcolor = options && options.backgroundColor || '#fffceb';  var color = options && options.color || '#d85030';  this.css('backgroundColor', bgcolor).css('color', color);  return this;}

對于如下HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) --><div id="test-highlight2">  <p>什么是<span>jQuery</span> <span>Plugin</span></p>  <p>編寫<span>jQuery</span> <span>Plugin</span>可以用來擴(kuò)展<span>jQuery</span>的功能。</p></div>