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读取URL参数小例子
Aug 30 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
js实现小星星游戏
Mar 23 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
页面加载完后自动执行一个方法的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模板页面中分页代码的解析
2009/02/06 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
python 并发下载器实现方法示例
2019/11/22 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
铁路个人事迹材料
2014/01/30 职场文书
五年级数学教学反思
2014/02/11 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
选秀节目策划方案
2014/06/06 职场文书
节电标语大全
2014/06/23 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python