jQuery插件的使用视频教程和简介

今天和大家说说jQuery插件的使用，这个话题也是面试问的比较多的问题。

jQuery插件的使用：

当我们使用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对象实现的。让我们来编写第一个扩展——highlight()：

$.fn.highlight = 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>

来使用一下highlight插件：

$(“# test-highlight1”). highlight()

效果如下：


细心的同学可能发现了，为什么最后要 return this;？因为jQuery对象支持链式操作，我们自己写的扩展方法也要能继续链式下去：
$('span.hl').highlight().slideDown();

当然这个案例只是教你编写插件的思路，学会后可以编写任何插件，比如常用的模态框，alert，confirm，toast，下拉无线加载，轮番图，选项卡切换等等各式各样的插件。

jQuery插件的使用视频教程介绍如下：