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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 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错误机制知识汇总
2016/03/24 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
javascript学习之json入门
2016/12/22 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python实现身份证号码解析
2015/09/01 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python中的Numpy矩阵操作
2018/08/12 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
财务部岗位职责
2013/11/19 职场文书
学历公证委托书
2014/04/09 职场文书
秋天的雨教学反思
2014/04/27 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
公司演讲稿开场白
2014/08/25 职场文书
岳庙导游词
2015/02/04 职场文书
学生通报表扬范文
2015/05/04 职场文书
七一慰问简报
2015/07/20 职场文书
如何写通讯稿
2015/07/22 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Golang Web 框架Iris安装部署
2022/08/14 Python