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 相关文章推荐
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery常用选择器详解
Jul 17 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
页面加载完后自动执行一个方法的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实现图片添加水印功能
2014/02/13 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP 实现重载
2021/03/09 PHP
html下载本地
2006/06/19 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
javascript编写简易计算器
2017/05/06 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python编程之string相关操作实例详解
2017/07/22 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python实现UDP协议下的文件传输
2020/03/20 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
主治医师岗位职责
2013/12/10 职场文书
法人委托书
2014/07/31 职场文书
甲午风云观后感
2015/06/02 职场文书
《落花生》教学反思
2016/02/16 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers