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的模态div层弹出效果
Aug 21 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
firefox下input type="file"的size是多大
Oct 24 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python中super的用法实例
2015/05/28 Python
python一键升级所有pip package的方法
2017/01/16 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
分层教学实施方案
2014/03/19 职场文书
汇源肾宝广告词
2014/03/20 职场文书
班级读书活动总结
2014/06/30 职场文书
幼师求职自荐信
2015/03/26 职场文书
毕业设计致谢语
2015/05/14 职场文书
小学感恩主题班会
2015/08/12 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Python数据处理的三个实用技巧分享
2022/04/01 Python