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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
浅析javascript的return语句
Dec 15 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
python常见数制转换实例分析
2015/05/09 Python
改进Django中的表单的简单方法
2015/07/17 Python
全面了解python字符串和字典
2016/07/07 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
教研处工作方案
2014/05/26 职场文书
股权转让协议范本
2014/12/07 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server