jQuery扩展_动力节点Java学院整理

当我们使用jQuery对象的方法时，由于jQuery对象可以操作一组DOM，而且支持链式操作，所以用起来非常方便。

但是jQuery内置的方法永远不可能满足所有的需求。比如，我们想要高亮显示某些DOM元素，用jQuery可以这么实现：

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

总是写重复代码可不好，万一以后还要修改字体就更麻烦了，能不能统一起来，写个highlight()方法？

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

答案是肯定的。我们可以扩展jQuery来实现自定义方法。将来如果要修改高亮的逻辑，只需修改一处扩展代码。这种方式也称为编写jQuery插件。

编写jQuery插件

给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的。让我们来编写第一个扩展——highlight1()：

$.fn.highlight1 = function () {  // this已绑定为当前jQuery对象:  this.css('backgroundColor', '#fffceb').css('color', '#d85030');  return this;}

注意到函数内部的this在调用时被绑定为jQuery对象，所以函数内部代码可以正常调用所有jQuery对象的方法。

对于如下的HTML结构：

<!-- HTML结构 --><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库。

细心的童鞋可能发现了，为什么最后要return this;？因为jQuery对象支持链式操作，我们自己写的扩展方法也要能继续链式下去：

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

不然，用户调用的时候，就不得不把上面的代码拆成两行。

但是这个版本并不完美。有的用户希望高亮的颜色能自己来指定，怎么办？

我们可以给方法加个参数，让用户自己把参数用对象传进去。于是我们有了第二个版本的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结构：

<!-- HTML结构 --><div id="test-highlight2">  <p>什么是<span>jQuery</span> <span>Plugin</span></p>  <p>编写<span>jQuery</span> <span>Plugin</span>可以用来扩展<span>jQuery</span>的功能。</p></div>