10分钟学会写Jquery插件实例教程


Posted in Javascript onSeptember 06, 2014

有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法。分享给大家供大家参考之用。具体方法如下:
 
具体而言,其实就是把一些常用、实用、通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍。
 
现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的。信不信由你们,反正我信了。
 
接下来用简单的代码来讲解一下,如果大家看了还不会写插件的话,我只能表示无语了

具体步骤如下:

第一步:定义插件

$(function() { 
  $.fn.插件名称 = function(options) { 
   var defaults = { 
     Event : "click",    //触发响应事件 
     msg : "Holle word!"    //显示内容 
   }; 
   var options = $.extend(defaults,options); 
   var $this = $(this);    //当然响应事件对象 
   //功能代码部分 
   //绑定事件 
   $this.live(options.Event,function(e){ 
     alert(options.msg); 
   }); 
  } 
});

第二步:调用插件

$(function() { 
  //绑定元素事件 
  $("#test").插件名称({ 
   Event : "click",    //触发响应事件 
   msg : "插件原来就是这么简单!"   //显示内容 
  }); 
});

至此,最简单的插件搞定!10分钟不到!相信大家应该都看懂了吧!jQuery插件原来就这么简单。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
javascript如何实现create方法
Nov 04 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 #Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 #Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 #Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 #Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 #Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 #Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 #Javascript
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP概述.
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
php常量详细解析
2015/10/27 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python求众数问题实例
2014/09/26 Python
python实现泊松图像融合
2018/07/26 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
10条PHP编程习惯
2014/05/26 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
就业推荐自我鉴定
2013/10/06 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
试用期辞职信范文
2015/03/02 职场文书