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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php算法实例分享
2015/07/14 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
浅谈mint-ui 填坑之路
2017/11/06 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python通过len函数返回对象长度
2020/10/22 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
入党积极分子思想汇报范文
2014/01/05 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
发展部经理职责规定
2014/02/22 职场文书
英文演讲稿
2014/05/15 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
重阳节主题班会
2015/08/17 职场文书
文艺委员竞选稿
2015/11/19 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android