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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
JavaScript实现简单图片切换
Apr 29 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php实现文件下载实例分享
2014/06/02 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
详谈python read readline readlines的区别
2017/09/22 Python
python中class的定义及使用教程
2019/09/18 Python
python爬虫 正则表达式解析
2019/09/28 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
药品采购员岗位职责
2014/02/08 职场文书
初中班主任评语
2014/04/24 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书