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 02 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现推拉门效果
Oct 19 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php zip文件解压类代码
2009/12/02 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
DOM 基本方法
2009/07/18 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
详解python和matlab的优势与区别
2019/06/28 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python新手学习标准库模块命名
2020/05/29 Python
序列化Python对象的方法
2020/08/01 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
外包公司软件测试工程师
2014/11/01 面试题
交通安全教育制度
2014/02/02 职场文书
小学毕业感言50字
2014/02/16 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
清明节主题班会
2015/08/14 职场文书
婚庆答谢词大全
2015/09/29 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL