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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery中使用validate插件校验表单功能
May 24 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.ini中文版(1)
2006/10/09 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
python处理大数字的方法
2015/05/27 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python实现的分层随机抽样案例
2020/02/25 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
瑞典度假品牌:OAS
2019/05/28 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
综治宣传月活动总结
2014/04/28 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014年统战工作总结
2014/12/09 职场文书
python实现监听键盘
2021/04/26 Python
Django给表单添加honeypot验证增加安全性
2021/05/06 Python