打造自己的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 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
Vue数据双向绑定底层实现原理
Nov 22 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python实现多线程的两种方式
2016/05/22 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
生日宴会主持词
2014/03/20 职场文书
先进员工事迹材料
2014/12/20 职场文书
环卫工人慰问信
2015/02/15 职场文书
银行实习推荐信
2015/03/27 职场文书
党支部工作总结2015
2015/04/01 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
创业计划书之熟食店
2019/10/16 职场文书
python获取带有返回值的多线程
2022/05/02 Python