jQuery.extend和jQuery.fn.extend的区别

最新推荐文章于 2021-05-13 10:57:56 发布
最新推荐文章于 2021-05-13 10:57:56 发布
阅读量140 收藏
点赞数
文章标签： javascript java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33878431/article/details/84815047
版权
[size=medium]当今web开发往往离不开Jquery的使用，Jquery以其简洁的使用方式、良好的浏览器兼容性赢得了软件研发同行的青睐，作为其中的一员，自然也不例外，尽管刚开始时很排斥Jquery，今天我谈一下对Jquery中$与$.fn的认识和理解，不对地方深望指正：

1、什么是$?

答：jquery的另一种表现形式；

2、看下面的例子：

例子01：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 01</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.test = function(a,b) {
return a+b;
};
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>
例子02：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 02</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.extend({
test:function(a,b) {
return a+b;
}
});
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>

上面两个例子中的黄色背景出的代码有什么不同和相同？

答：除了功能相同以外最大的相同点在于调用函数（或方法）的方式相同；上面两个例子最大的不同点在于声明创建test方法的方式不同。

3、看下面的例子：

例子03：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 03</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>

例子04：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 04</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>

上面两个例子中的绿色背景出的代码有什么不同和相同？

答：除了功能相同以外最大的相同点在于调用函数（或方法）的方式相同；上面两个例子最大的不同点在于声明创建test方法的方式不同。

4、Jquery中$与$.fn的区别是什么？

答：在回答这个问题以前，需要明白一个事实：Jquery的方法是可以拓展的，上面这4个例子都是对Jquery方法的拓展，从调用声明创建方法的方式来看，可以归结为两类：一类直接由$符调用；另一类由$("")来调用，说到这里你是不是想到了Java语言中的静态方法和实例方法，是的，如果从java类的角度认识调用创建的Jquery方法可能更好理解些，尽管Javascript没有明确的类的概念。好了现在可以回答问题了：$拓展的方法是静态方法，可以使用$直接调用，其拓展的方式有两种，一般使用$.extend({});；而$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，其拓展的方式同样有两种，一般使用$.fn.extend({ })。

5、知识延展，究竟什么是fn?

答：同样在回答这样一个问题以前请打开一个Jquery文件（0分下载） 搜索这样一个字符“jQuery.prototype”，告诉我你看到了什么：jQuery.fn = jQuery.prototype = {......},嗯嗯，或许你已经猜到了——fn就是prototype，是这样吗？请看下面的两个例子：

例子05：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 05</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>

例子06：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的区别——demo 06</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>

上面两个例子通过将fn改为prototype以后可以运行，呵呵呵，你猜对了。[/size]
prettyRain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈jquery.fn.extend与jquery.extend区别
01-21
jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ 　add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery　的地方，使用这...
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
10-18
主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下
浅谈jQuery.extend 与 jQuery.fn.extend
筱葭的博客
03-04 1662
jQuery是一个JavaScript类，如$("#input1") 生成一个 jQuery类的实例。 jQuery为开发插件提拱了两个方法：jQuery.fn.extend()和jQuery.extend()。 1、jQuery.extend() (1)为jQuery类添加类方法（静态方法） jQuery.extend({ 　　add: function(a, b)
jQuery.extend 和 jQuery.fn.extend 的区别
aphy358的博客
11-24 521
jQuery.extend 和 jQuery.fn.extend 的区别: 1、简单的概括： jQuery.extend 是对jQuery 这个类的扩展，类似于一个类的静态方法，直接用类名调用。 jQuery.fn.extend 是对一个具体的对象进行扩展，调用的时候要通过该对象。 2、jQuery.extend用法示例： jQuery.extend({     fun
WHAT?【 $.fn.extend() 】vs【 $.extend() 】
weixin_30929195的博客
11-30 140
废话不多说，干货来了，转自http://www.cnblogs.com/hellman/p/4349777.html (function($){ $.fn.extend({ test:function(){ alert($(this).attr('id')); } }) })(jQuery) $('#myDiv').test(); 打印...
JQuery.extend()与JQuery.fn.extend()的区别
景色分明
10-17 802
JQuery.extend()与JQuery.fn.extend() 本篇文章概要： JQuery.extend()，JQuery.fn.extend()的源码分析 JQuery.extend()的使用 JQuery.fn.extend()的使用 JQuery.extend()，JQuery.fn.extend()的源码分析 废话少说，直接上源码 由此可见：jQuery.fn $....
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
下面小编就为大家带来一篇深入理解jquery的$.extend()、$.fn和$.fn.extend()。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery------关于jQuery.extend()和jQuery.fn.extend()的区别
COCOLI_BK的博客
05-13 174
两者区别总结： 1、两者调用方式不同： jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.ajax()，$.init(); jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.changeColor()==> $('div').changColor('#e4e4e4'); 2、两者的主要功能作用不同： jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。 jQue..
jQuery.extend(object)和jQuery.fn.extend(object)区别和详解
weixin_38587633的博客
01-19 651
1、认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样； 且看官方给出解释： jQuery.extend(): Merge the contents of two or more objects together i...
jQuery.extend 和jQuery.fn.extend的差别
maoguiyou的专栏
12-17 875
我们可以把jQuery看成一个类，jQuery.extend就是扩张jQuery这个类。假设我们把jQuery这个类看成是人类，能吃饭喝水能跑步打球，现在我们用jQuery.extend这个方法给这个类扩展一个能唱歌的技能，这样的话不管是男人女人张三李四等都能继承这个技能，因为这个技能就相当于女娲给所有人类添加的。例如： jQuery.extend({ sayHello:function(){
理解jquery的$.extend()、$.fn和$.fn.extend()
小漠007的专栏
02-27 633
理解jquery的$.extend()、$.fn和$.fn.extend() 文章原创：http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html A-A+ 前端博客•2014-04-03•前端开发代码•jQuery•2123View0 文章目录 jQuery.fn jQuery.exten
jQuery中的"$.extend()"和"$.fn.extend()"的区别：
dh12313012的博客
11-30 402
jQuery中的’$'和"$.fn"的区别： 新手上路，最近在学前端的一些知识。在一个项目中看到这两个符号，后来上网查了一下，下面将这两个区别简单写一下。 这两个都是为jQuery赋予方法，但是他们赋予的方法有个本质上的区别： $.extend(也可以写成jQuery.extend())，这是拓展jQuery本身的方法。也就是说，只要我们用这个拓展方法，那么这个方法，可以不通过对象直接使用。 ...
$.extend()和$.fn.extend()的区别和他们相应的作用
Asuria
07-07 2749
jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object);    给jQuery对象添加方法jQuery.extend(object);     为扩展jQuery类本身.为类添加新的方法。如果二者按照类的概念来理解的话: jQuery.extend(object)为jQuery类添加添加类方法，可以理解为添加静态方法。    // 静态方法， 跟jq实例没关...
$.extend和$.fn.extend 区别
hello2012a的专栏
05-14 830
Jquery为开发插件提供了两个方法，分别是：$.extend(obj);$.fn.extend(obj); 1.那么这两个分别是什么意思？ $.extend(obj);给jQuery类添加方法。 $.fn.extend(obj);给jQuery对象添加方法。 2.$.fn 中的fn是什么意思，其实是prototype，即$.fn=$.protoytpe; 具体用法请看下面的例子：
$.extend()与$.fn.extend()
aizhanqian5077的博客
11-28 94
jQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件） 我们先把jQuery看成了一个类，这样好理解一些。 jQuery.extend()，是扩展的jQuery这个类。 假设我们把jQuery这个类看成是人类，...
jQuery - jQuery的$.extend和$.fn.extend作用及区别
weixin_30367873的博客
12-04 118
jQuery为开发插件提拱了两个方法，分别是： 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念，但是可以构建类似类的定义。 jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。 (1). jQuery.extend(object...
jQuery.extend = jQuery.fn.extend = function(){} 是什么意思？
最新发布
07-13
在 jQuery 中，使用 `jQuery.extend` 或 `jQuery.fn.extend` 可以将一个或多个对象的属性和方法合并到目标对象中。 具体来说，这个函数接受任意数量的参数，每个参数都是一个对象。它会将后面的对象合并到第一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值