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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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的FTP学习(一)
2006/10/09 PHP
JQuery小知识
2010/10/15 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Django之PopUp的具体实现方法
2019/08/31 Python
django rest framework 过滤时间操作
2020/07/12 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
家长对孩子评语
2014/01/30 职场文书
安全责任书范文
2014/08/25 职场文书
在职证明范本
2015/06/15 职场文书
婚宴父母致辞
2015/07/27 职场文书
小组口号霸气押韵
2015/12/24 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
用python实现监控视频人数统计
2021/05/21 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏