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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
Js之软键盘实现(js源码)
Jan 30 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
页面加载完后自动执行一个方法的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下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP 图片水印类代码
2012/08/27 PHP
php中explode与split的区别介绍
2012/10/03 PHP
php中session使用示例
2014/03/29 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python字符串的修改方法实例
2019/12/19 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
小学生元旦感言
2014/02/26 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers