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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
零基础php编程好学吗
2019/10/11 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
利用python求积分的实例
2019/07/03 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
物业管理应届生求职信
2013/10/28 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
城管大队整治方案
2014/05/06 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
车辆年检委托书范本
2014/10/14 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android