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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js模拟类继承小例子
Jul 17 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 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
一些常用的php简单命令代码集锦
2007/09/24 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
php表单处理操作
2017/11/16 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
python列表去重的二种方法
2014/02/14 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python3实现购物车功能
2018/04/18 Python
python文件拆分与重组实例
2018/12/10 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python 实现按对象传值
2019/12/26 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
社团活动总结范文
2014/04/26 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
平安建设汇报材料
2014/12/29 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
python pygame 开发五子棋双人对弈
2022/05/02 Python