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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
Angular4 中内置指令的基本用法
Jul 31 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
工程质量承诺书范文
2014/03/27 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python