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应用于login页面的问题及解决
Oct 17 Javascript
php与js的区别是什么
Aug 05 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
js判断两个数组相等的5种方法
May 06 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 URL参数获取方式的四种例子
2014/02/28 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python内存动态分配过程详解
2019/07/15 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
民生工作实施方案
2014/05/31 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
运动会100米加油稿
2015/07/21 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA