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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP错误处理函数
2016/04/03 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
重定向实现代码
2006/11/20 Javascript
javascript动态加载二
2012/08/22 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python爬取m3u8连接的视频
2018/02/28 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
详解python和matlab的优势与区别
2019/06/28 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python下载库的步骤方法
2019/10/12 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
百度JavaScript笔试题
2015/01/15 面试题
会计专业应届生自荐信
2014/02/07 职场文书
会计自荐信范文
2014/03/09 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫