jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析


Posted in jQuery onJuly 25, 2018

本文实例讲述了jQuery.extend 与 jQuery.fn.extend的用法及区别。分享给大家供大家参考,具体如下:

jQuery是一个JavaScript类,如$("#input1") 生成一个 jQuery类的实例。

jQuery为开发插件提拱了两个方法:jQuery.fn.extend()jQuery.extend()

1、jQuery.extend()

(1)扩展 jQuery 类本身,为jQuery类添加类方法(静态方法)

jQuery.extend({
add: function(a, b) { alert(a + b); }
});
jQuery.add(10,20); //30

(2)jQuery.extend(object, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象

var obj = { name: 'Alice', age: 25, career: "teacher" };
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(obj, object); //obj = { name: 'Bruce', age: 25, career: "doctor" }

2、jQuery.fn.extend()

把对象挂载到 jQuery 的 prototype 属性,来扩展一个新的 jQuery 实例方法,也就是通过这个 extend 添加的新方法,实例化的 jQuery 对象都能使用,因为它是挂载在 jQuery.fn 上的方法。

查看jQuery源码可发现,jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上,由于对原型的修改会影响所有实例,因此fn上的方法会对每一个jQuery实例有效。

jQuery.fn的扩展,就是为jQuery类添加成员函数,jQuery类的实例可以使用这个成员函数。

jQuery.fn.extend({
   clickFunc: function() {
      $(this).click(function(){
         alert($(this).val());
      });
   }
});
$("#input1").clickFunc(); //输出文本框的文本

3、jQuery.extend()jQuery.fn.extend()的区别

jQuery.extend()是为jQuery类添加类方法(静态方法),需要通过jQuery类来调用(直接使用 $.xxx 调用);

jQuery.fn.extend()是为jQuery类添加成员函数(实例方法),所有jQuery实例都可以直接调用(需要使用 $().xxx 调用)。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
You might like
php表单提交问题的解决方法
2011/04/12 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python中bisect模块用法实例
2014/09/25 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python解释器安装教程的方法步骤
2020/07/02 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
易程科技软件测试笔试
2013/03/24 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
九年级英语教学反思
2014/01/31 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014年班务工作总结
2014/12/02 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
上诉状格式
2015/05/23 职场文书
信息技术课教学反思
2016/02/23 职场文书