打造自己的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中for in的缺陷浅析
Dec 02 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
桌面中心(二)数据库写入
2006/10/09 PHP
php中autoload的用法总结
2013/11/08 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python实现字典依据value排序
2016/02/24 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
利用python画出折线图
2018/07/26 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python实现简单坦克大战
2020/03/27 Python
pandas分组聚合详解
2020/04/10 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
大学生应聘自荐信
2013/10/11 职场文书
商场促销活动总结
2014/07/10 职场文书
关于召开会议的通知
2015/04/15 职场文书
毕业生入职感言
2015/07/31 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python