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实现DIV的一些简单控制
Jun 04 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 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
日本十大惊悚动漫
2020/03/04 日漫
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
jQuery技巧总结
2011/01/01 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python实现进程间通信简单实例
2014/07/23 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
详解python中*号的用法
2019/10/21 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
小学语文课后反思精选
2014/04/25 职场文书
数学教育专业求职信
2014/07/22 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
小王子读书笔记
2015/06/29 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
使用CSS连接数据库的方式
2022/02/28 HTML / CSS