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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP 数组实例说明
2008/08/18 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
详解如何减少python内存的消耗
2019/08/09 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
pygame实现弹球游戏
2020/04/14 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
劳资专员岗位职责
2013/12/27 职场文书
运动会跳远广播稿
2014/02/04 职场文书
基层党员对照检查材料
2014/09/24 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
党员自我评价范文2015
2015/03/03 职场文书
律师函格式范本
2015/05/27 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
Python时间操作之pytz模块使用详解
2022/06/14 Python