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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
详解CocosCreator项目结构机制
Apr 14 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页面中文乱码分析
2013/10/29 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
js 函数调用模式小结
2011/12/26 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中bisect的用法
2014/09/23 Python
python中随机函数random用法实例
2015/04/30 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python网络爬虫实例讲解
2016/04/28 Python
python的concat等多种用法详解
2018/11/28 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python 19个值得学习的编程技巧
2020/08/15 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
求职信格式要求
2014/05/23 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2014年接待工作总结
2014/11/26 职场文书
情人节活动总结范文
2015/02/05 职场文书
降价通知函
2015/04/23 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书