打造自己的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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
Jquery使用val方法读写value值
May 18 Javascript
js中常用的Math方法总结
Jan 12 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
webpack打包js的方法
Mar 12 Javascript
Node对CommonJS的模块规范
Nov 06 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
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python做文本按行去重的实现方法
2016/10/19 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
django admin 添加自定义链接方式
2020/03/11 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
会议接待欢迎词
2014/01/12 职场文书
租赁意向书范本
2014/04/01 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
社区工作者演讲稿
2014/05/23 职场文书
2014年民政工作总结
2014/11/26 职场文书
员工家属慰问信
2015/03/24 职场文书
保研推荐信范文
2015/03/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python