打造自己的jQuery插件入门教程


Posted in Javascript onSeptember 23, 2016

本文实例讲述了打造自己的jQuery插件的方法。分享给大家供大家参考,具体如下:

写js插件并不麻烦,js插件有两类,类型插件和对象插件。首先举例:

$.post(url);

这个是类型插件,换句话说该插件在调用的时候不需要指定对象。那么:

$('p').click();

这个是对象插件,也就是说使用该插件的时候需要指定对象。

在写jQuery插件的时候,都是有固定的模板:

jQuery.plugin1 = function(text) {
  alert(text);
};//类型级别框架,类似 $.post();
$.fn.plugin2 = function(options) {
  var defaults = {
    text: 'Hello, world!'
  };
  // 合并默认值
  var opts = $.extend(defaults, options);
  // 你的代码写到这里
  alert(opts.text);
};//对象级别框架,类似 $(this).click();

以上就是plugin1是类型级别插件用的时候直接调用就可以了,plugin2是对象级别框架,使用的时候也需要对象。

在写类型级别框架的时候,jQuery.plugin1中的jQuery.不能省略,同样在写对象级别框架的时候,$.fn.也是不能省略的。

这里我要说的时候对象级别框架中 var opts = $.extend(defaults, options);这句话一定要有,这句话的意思就是合并参数。当用户没有设置参数的时候使用默认值中的参数,否则就用用户设置的参数。下面我们看一下调用方法:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./myplugin.js"></script>
<script type="text/javascript">
$.plugin1('Hello');
$(document).ready(function(){
  $('#tmp').click(function(){
    $(this).plugin2({
      text: 'https://3water.com'
    });
  });
});
</script>

首先在使用自己的jQuery插件的时候,需要包含进来,同时之前要包含jQuery,你懂的。后面就是调用方法了哦!

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 #Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 #Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
You might like
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php数据库备份还原类分享
2014/03/20 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
学生自我鉴定范文
2013/10/04 职场文书
专科毕业生学习生活的自我评价
2013/10/26 职场文书
大学运动会入场词
2014/02/22 职场文书
文员岗位职责范本
2014/03/08 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年圣诞节寄语
2014/12/08 职场文书