扩展|2-10
原创
©著作权归作者所有:来自51CTO博客作者goStudyGo的原创作品,请联系作者获取转载授权,否则将追究法律责任
当我们使用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>