打造自己的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 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
js实现登录验证码
Dec 22 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
ant-design-vue按需加载的坑的解决
May 14 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 如何向 MySQL 发送数据
2006/10/09 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python实现自动整理文件的脚本
2020/12/17 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
医科大学生的自我评价
2013/12/04 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL