jQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)

我们先把jQuery看成了一个类,这样好理解一些。

jQuery.extend(),是扩展的jQuery这个类。

假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了。

jQuery.extend({
sing:function(){
alert("sing");
}
});
<!DOCTYPE html>
<html>
<head></head>
<script src="jquery.min.js"></script>
<script>
;(function($){
$.extend({
sing:function(){
alert("sing");
};
});
})(jQuery);
</script>
<script>
$(document).ready(function(){
$.sing();
});
</script>
</html>

这说明啥啊,这说明sing()变成了jQuery这个类本身的方法(object)嘛。他现在能”唱歌“了。

但是吧,这个能力啊,只有代表全人类的 jQuery 这个类本身,才能用啊。你个人想用,你张三李四王五麻六,你个小草民能代表全人类嘛?

所以啊,这个扩展也就是所谓的静态方法。只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

我们再看看jQuery.fn.extend()这个方法。

从字面理解嘛,这个拓展的是jQuery.fn的方法。

jQuery.fn是啥玩意呢?

源码如下

jQuery.fn = jQuery.prototype = {
init:function(selector,context){
//code
}
};

哦,原来jQuery.fn=jQuery.prototype,就是原型啊。

那就一目了然了,jQuery.fn.extend拓展的是jQuery对象(原型的)的方法啊!

对象是啥?就是类的实例化嘛,例如,$("#abc")

这个玩意就是一个实例化的jQuery对象嘛。

那就是说,jQuery.fn.extend拓展的方法,你得用在jQuery对象上面才行啊!他得是张三李四王五痳六这些实例化的对象才能用啊。

说白了就是得这么用:假设xyz()是拓展的方法,$('selector').xyz();

你要是写成$.xyz();是会出错误滴。

代码如下

<!DOCTYPE html>
<html>
<head></head>
<script src="jquery.min.js"></script>
<script>
;(function($){
$.fn.extend({
sing:function(){
alert("sing");
};
});
})(jQuery);
</script>
<script>
$(document).ready(function(){
$("#test_div").sing();
});
</script>
<body>
<div id="test_div"></div>
</body>
</html>

其实吧,jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax()这种,要不就是拓展个选择器啦,例如$.fn.each(),当选择器用。

大部分插件都是用jQuery.fn.extend()。

jQuery.extend(object)

为jQuery类添加类方法,可以理解为添加静态方法。如:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); //

Objectj jQuery.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" }; //结果:settings被options修改,变成了{ validate: true, limit: 5, name: "bar" }
jQuery.extend(settings, options);

jQuery.fn.extend(object)

对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick();

jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的prototype里去,这样的话就是插件机制了。

(function($){
$.fn.tooltip = function( options ) {
//code
};
//等价于
var tooltip = {
function(options){
//code
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

随机推荐

  1. Optimized Flow Migration for NFV Elasticity Control

    NFV弹性控制中的流迁移优化 ABSTRACT 基于动态创建和移除网络功能实例,NFV在网络功能控制上有很大的弹性.比如,网络功能和并,网络功能拆分,负载均衡等等. 那么为了实现弹性控制,就需要网络流 ...

  2. SpringMVC项目中获取所有URL到Controller Method的映射

    Spring是一个很好很强大的开源框架,它就像是一个容器,为我们提供了各种Bean组件和服务.对于MVC这部分而言,它里面实现了从Url请求映射控制器方法的逻辑处理,在我们平时的开发工作中并不需要太多 ...

  3. C语言文法翻译

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  4. 5th 各组作品alpha发布体会

    1.  俄罗斯方块   武志远 可以进行游戏,界面很友好,游戏运行也很流畅,并找到两名同学现场体验,游戏完成度很好. 2.  连连看游戏  张金生 可以进行游戏,实现了背景音乐播放等附加功能,界面清晰 ...

  5. ASP.NET前后端分离框架

  6. Android自动化 -- sendevent/getevent 用法

    getevent&sendevent 是android系统下的一个工具,可以 模拟 多种按键和触屏操作,产生的是raw event,raw event经过event hub处理产生最终的ges ...

  7. 动态Lambda表达式打印HelloWorld

    最近在用C#与数据库打交道.开发过程中采用了ORM模型(以前是纯sql玩法,复杂的逻辑用存储过程做). 为了能通过配置文件动态地查询字段,也就是说需要能这样写: db.AsQuery<T> ...

  8. Codeforces 786C Till I Collapse

    题意: 给出一个长度为n的序列,每个数值在1-n之间且为整数,现在要把这个序列划分为若干段,使得每一段的颜色种数不超过k,求最少的区间数目.对于从1到n的n种k的取值,分别输出这时的最少区间数目. 分 ...

  9. 题解 P1420 【最长连号】

    这个题过去的同学可以再来一题(P1567 统计天数): https://www.luogu.org/problemnew/show/P1567 是的,这个题其实也不是很难,就是前后比较,将天数压栈, ...

  10. Day21-Cookie

    1. Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).例如在某个网站上保存了用户名和密码,3个月内 ...