jQuery自定义插件详解及实例代码


Posted in Javascript onDecember 29, 2016

 jQuery自定义插件

jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数。然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。

jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量。

jQuery编写插件有两种方式

1.添加jQuery对象级别的插件,原理是给jQuery类添加方法。

写法如下:

(function($){
  $.fn.extend({
    函数名:function(自定义参数){
      //自定义插件代码部分
    }
  });
})(jQuery);
//第二种写法
(function($){
  $.fn.函数名=function(自定义参数){
    //自定义插件代码
  }
})(jQuery);

//调用方法
("#id").函数名(参数);

2.添加jQuery类级别的方法,也就是添加静态方法

写法如下:

(function($){
  $.extend({
    函数名:function(自定义参数){
      //自定义插件代码  
    }
  });
})(jQuery);
//第二种写法
(function($){
  $.函数名=function(自定义参数){
    //自定义插件代码
  }
})(jQuery);

//调用方式
$.函数名(参数);

jQuery插件的种类

1.对象级别插件开发,即给jQuery对象添加方法,封装对象方法的插件,例如:append()、val()。
2.类级别插件开发,即给jQuery添加全局函数,相当于给类本身添加方法,例如:$.ajax();

jQuery的插件机制

jQuery为开发插件提供了两种方法。

1. jQuery.fn.extend(object),给jQuery对象添加方法。

2. jQuery.extend(object),给jQuery类添加方法。

这两个方法接收的参数都是一个对象,类型为Object,Object里面的”名/值”分别对应”函数名/函数主体”。

fn是什么

查看jQuery源码:

<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....  //...... }; </span>

从源码中查看,可以得出:

jQuery.fn=jQuery.prototype
//fn指向jQuery对象的原型,即为jQuery类添加成员函数。

这里我写一个简单的例子来实现一个最简单的插件,仅仅是用来说明一下如何使用jQuery开发插件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义jQuery插件</title>
<script src="plugs/jquery-2.2.3.min.js"></script>
<script>
//这是一个自定义的jQuery插件
(function(){
  $.fn.extend({
    myFirst:function(){
      var s="This is my first jQuery";
      $(this).append(s);
    }
  });
})(jQuery);
</script>
</head>

<body>
<div id="i1"></div>
<script>
$("#i1").myFirst();
</script>
</body>
</html>

执行以后返回的页面为:

jQuery自定义插件详解及实例代码

以上仅仅介绍如何使用jQuery开发自定义插件,会使用以后就可以开发更复杂的插件了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
js中typeof的用法汇总
Dec 12 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
js实现滑动进度条效果
Aug 21 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
javascript显示系统当前时间代码
Dec 29 #Javascript
解析JavaScript模仿块级作用域
Dec 29 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
npm qs模块使用详解
2020/02/07 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python实现在线翻译
2020/06/18 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
几个人围成一圈的问题
2013/09/26 面试题
民间个人借款协议书
2014/09/30 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
工程服务质量承诺书
2015/04/29 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
一篇文章弄懂Python中的内建函数
2021/08/07 Python