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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
详解Vue之事件处理
Jul 10 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
javascript操作cookie
2017/01/17 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python CSV模块使用实例
2015/04/09 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
用C语言实现文件读写操作
2013/10/27 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
高校教师自荐信范文
2014/03/13 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
雷锋观后感
2015/06/10 职场文书
小学教师读书笔记
2015/07/01 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS