你所在的位置：首 页 >> 前台技术 >> 详细新闻页面

卓越前端窍门：如何快速掌握jQuery插件开发

作者：zhirong1230 创建时间：2017-07-12 阅读次数：1484

jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。

jQuery插件的使用方式就是jQuery对象方法的调用。

如何快速掌握jQuery插件开发？且看文章讲解~

一、最简单的jQuery插件封装

我们要做一个改变标签文字颜色的插件。

代码

审查元素>

二、链式调用

链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。

添加简单的一行代码return this，在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。

代码

三、使用立即执行函数避免

$

符号的污染

因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样就可以避免$符号的污染。

代码

四、带参数的jQuery插件

继上面的例子，增加一个可以改变文字大小的功能。

代码

执行结果 >

五、总结

定义插件的方式除了上面说的用$.fn来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。

代码

使用$.extend方法给插件设置默认属性，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象。

$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。