$.extend()与$.fn.extend()
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 );
随机推荐
- Linux 安装php扩展 swoole
swoole是一个PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncT ...
- Java微笔记(6)
- DP---(POJ1159 POJ1458 POJ1141)
POJ1159,动态规划经典题目,很适合初学者入门练手. 求:为了使字符串左右对称,应该插入的最小字符数目. 设字符串为S1 S2 S3 - Sn. 这个字符串有n个字符,根据DP的基本思路,减少问题 ...
- fast-IO
代码: int Scan() //输入外挂 { ,ch,flag=; if((ch=getchar())=='-') flag=; ') res=ch-'; ') res=res*+ch-'; ret ...
- 我是IT小小鸟(读后感)
序 1.兴趣,这本书第一个点讲兴趣,可是在中国填鸭式的教育下,有兴趣也被这种教育给泯灭了. 2.他山之石,可以攻玉.但不可照搬.这点我非常赞同作者的看法.别人东西你拿来,一定要在他的基础上进行创 ...
- Mac10.11.2 Apache 服务配置
系统默认是隐藏apache安装目录的,但我们可以通过“命令行”或者“文件夹前往”的方式找到它.它是安装在系统的私有目录下,也就是/private/etc下面,因为它是隐藏的,所以我们无法通过界面找到它 ...
- spring-test与junit
1.添加依赖 spring-test junit spring-context(自动添加依赖其他所需的spring依赖包) 2.在class前添加以下注解,用于配置xml文件的位置 @RunWith( ...
- 敏捷冲刺DAY6
一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 对于可视控件,是能进行设计的,但是对于不可视组件,比如AdoConnection怎么才能设计.但是我看del ...
- 1."问吧APP"客户需求调查分析
产品名称:问吧 产品功能:实时提问回答和搜索 开发原因:任何人都会遇到问题,网上虽然有很多回答,但是互联网的信息错综复杂,开发这个APP就是为了让网络求助更加的合理有效,清除网络上的垃圾信息. 为知大 ...
- 2nd 历年学生作品评论(3部)
历年学生作品评论(3部) 1.基于GUI的图书管理系统 利用NABCD模型进行竞争性需求分析:http://www.cnblogs.com/chitty/p/4546876.html 测试说明书: h ...