在实际开发工作中，总会碰到像滚动，分页，日历等展示效果的业务需求，对于接触过jQuery以及熟悉jQuery使用的人来说，首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件，都有多种jQuery插件可供选择，网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷，但是如果只是会简单使用，而对其中的原理不甚了解，那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。

进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？

第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。

我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件

知道了上面这些知识，我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色，就可以按下面的方式来实现这个插件：

 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr);
 }

然后按下面的方式来使用插件：

$("p").changeStyle("red");

插件调用的时候，插件内部的this就是当前调用插件的jQuery对象，这样的话每个使用$()方法选择的标签，在调用changeStyle()插件时都会使用css()方法重设color样式。

满足链式调用的jQuery插件

链式调用时jQuery的一大特色，一个通用的插件应该遵循jQuery风格，满足链式调用要求。实现链式调用的方式也很简单：

 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr);
 return this;
 }

然后使用的时候就可以链式调用其他方法了：

$("p").changeStyle("red").addClass("red-color");

实现链式调用的关键点就一行代码return this，插件中加了这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其它jQuery方法。

防止$符号污染的jQuery插件

有很多js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下：

 (function($){
 $.fn.changeStyle = function(colorStr){
 this.css("color",colorStr); 
 return this;
 }
 }(jQuery));

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

可以接受参数的jQuery插件

继续上面的例子，假如我还想为这个插件添加一个设置标签元素内容文字大小的功能，那么我可以这么来实现：

(function($){
 $.fn.changeStyle = function(colorStr，fontSize){
 this.css("color",colorStr).css("fontSize",fontSize+"px"); 
 return this;
 }
}(jQuery));

上面这种插件传参方式适用于参数比较少的情况，如果需要传给插件内部的参数比较多，我们可以定义一个参数对象，然后把需要传给插件的参数放在参数对象中。插件定义时如下：

(function($){
 $.fn.changeStyle = function(option){
 this.css("color",option.colorStr).css("fontSize",option.fontSize+"px"); 
 return this;
 }
}(jQuery));

使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值，例如：

(function($){
 $.fn.changeStyle = function(option){
 var defaultSetting = { colorStr:"green",fontSize:12};
 var setting = $.extend(defaultSetting,option);
 this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); 
 return this;
 }
}(jQuery));

上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。

这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。

使用方式：$("p").changeStyle({colorStr:"red"});

注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

总结

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

(function($){
 $.fn.extend({ 
 changeStyle:function(option){ 
 var defaultSetting = { colorStr:"green",fontSize:12};
 var setting = $.extend(defaultSetting,option);
 this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); 
 return this; 
 }
 });
}(jQuery));

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

参考资料

How to Create a Basic Plugin

http://www.jianshu.com/p/518d424d4994

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jQuery  # 插件开发  # 老司机带你解读jQuery插件开发流程  # jQuery插件开发精品教程(让你的jQuery更上一个台阶)  # jQuery插件开发的五种形态小结  # jQuery插件开发详细教程  # jquery插件开发之实现md5插件  # jQuery插件开发的两种方法及$.fn.extend的详解  # JQuery插件开发示例代码  # jquery插件开发注意事项小结  # jQuery插件开发基础简单介绍  # 详解jQuery插件开发方式  # 链式  # 就可以  # 第一个  # 我们可以  # 是在  # 操作方法  # 有很多  # 可以使用  # 来实现  # 的人  # 象中  # 那就是  # 就会  # 都有  # 在这里  # 会有  # 放在  # 就在  # 都在  # 也就 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何升级到最新版本？（升级指南和步骤）  如何用景安虚拟主机手机版绑定域名建站？  如何选择PHP开源工具快速搭建网站？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  Python并发异常传播_错误处理解析【教程】  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  如何在IIS中新建站点并配置端口与IP地址？  Mybatis 中的insertOrUpdate操作  如何快速启动建站代理加盟业务？  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  无锡营销型网站制作公司,无锡网选车牌流程？  js实现点击每个li节点，都弹出其文本值及修改  如何用腾讯建站主机快速创建免费网站？  Python结构化数据采集_字段抽取解析【教程】  如何在IIS服务器上快速部署高效网站？  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  高防服务器租用首荐平台，企业级优惠套餐快速部署  香港网站服务器数量如何影响SEO优化效果？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  JS经典正则表达式笔试题汇总  佛山企业网站制作公司有哪些,沟通100网上服务官网？  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  JavaScript如何实现音频处理_Web Audio API如何工作？  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  深圳网站制作培训,深圳哪些招聘网站比较好？  详解jQuery中的事件  如何有效防御Web建站篡改攻击？  网站制作免费,什么网站能看正片电影？  JS中对数组元素进行增删改移的方法总结  Laravel如何实现用户密码重置功能？（完整流程代码）  网易LOFTER官网链接 老福特网页版登录地址  Python3.6正式版新特性预览  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  打造顶配客厅影院，这份100寸电视推荐名单请查收  Python面向对象测试方法_mock解析【教程】  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  Laravel怎么调用外部API_Laravel Http Client客户端使用  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  iOS正则表达式验证手机号、邮箱、身份证号等  实例解析angularjs的filter过滤器  Laravel如何实现模型的全局作用域？（Global Scope示例）  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  三星网站视频制作教程下载,三星w23网页如何全屏？