打造自己的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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
微信小程序 开发之全局配置
May 05 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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合并数组+号和array_merge的区别
2015/06/25 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP微信分享开发详解
2017/01/14 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
《Python学习手册》学习总结
2018/01/17 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python属于跨平台语言码
2020/06/09 Python
如何在python中判断变量的类型
2020/07/29 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
施工协议书范本
2014/04/22 职场文书
环保项目建议书
2014/08/26 职场文书
员工年度工作总结2015
2015/05/18 职场文书
诚信教育主题班会
2015/08/13 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL