jquery插件之jquery.extend和jquery.fn.extend的区别
jquery.extend
jquery.extend()，是拓展jquery这个类，即可以看作是jquery这个类本身的静态方法，例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简单插件学习一</title>
<script src="../../Script/jquery.js"></script>
</head>
<body>
<input type="text" id="txtName" />
<script type="text/javascript">
;(function ($) {
$.extend({
test: function () {
alert("这是我测试的方775法3哈");
}
});
})(jQuery); $.test();
// $("#txtName").test();//不可以调用
</script>
</body>
</html>
即通过$.extend,扩充了Jquery本身，例如jquery上增加了test方法，只能其本身可以调用，跟具体的实例化对象没有一点关系，所以不可以用对象（具体的Dom节点）去调用。
jquery.fn.extend
从字面理解这个方法，就是拓展了jquery.fn的方法，而jquery.fn是啥玩意了 ，源码如下：
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
// Start with an empty selector
selector: "",
// The default length of a jQuery object is 0
length: 0,
toArray: function() {
return slice.call( this );
},
//.......
}
jquery.fn=jquery.prototype，就是原型，jquery.fn.extend扩展的就是jquery对象（原型的）方法，对象是啥？就是类的实例化 ，例如：$("#txtName")，就是jquery的对象
也就是说，jquery.fn.extend拓展方法，要用在jquery对象上才行，一般插件的制作是用此方法进行扩展的。例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简单插件学习一</title>
<script src="../../Script/jquery.js"></script>
</head>
<body>
<input type="text" id="txtName" />
<script type="text/javascript">
;(function ($) {
$.extend({
test: function () {
alert("这是我测试的方775法3哈");
}
}); $.fn.test2 = function () {
alert("这是我的方法3的");
$.fn.test2.sn.add();
} $.fn.test2.sn = {
defaults: {
dir: "H",
speed: 500
}, add: function () {
alert("滚动方式:" + this.defaults.dir);
}
} })(jQuery); $.test();
$("#txtName").test2();
</script>
</body>
</html>
jquery.extend()方法主要用于扩展全局函数，例如$.ajax这种，例如上面代码中的test方法，只可以通过jquery本身去调用即：$.test(), 而不可以通过 jquery 对象去调用。
jquery.fn.extend(),大部分插件都是用此方法的 ，例如：$("#txtName").test2();
除此之外，我们写jquery插件，还经常遇到一些参数传递的问题，这些一般都是通过jquery.extend方法传递的 ，下面我们就一起去了解一下，例如：
$.extend(dest,src1,src2,src3....)
它的含义是将src1,src2,src3等合并到dest中，并返回到dest，但是 合并之后改变dest的结果,所以一般推荐以下方式：
var setting=$.extend({},src1,src2,src3);//也就是用{}作为dest的参数
例如：
var setting = $.extend({}, { name: "alice", age: 28 }, { name: "stone", sex: "boy" });
console.log(setting);
后面的参数如果和前面的参数存在相同的名称，则会覆盖前面的参数值，合并后的 结果为：
例如插件中一般用到的此方法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>简单插件学习一</title>
<script src="../../Script/jquery.js"></script>
</head>
<body>
<input type="text" id="txtName" />
<script type="text/javascript">
;(function ($) {
$.fn.test2 = function (settings) {
settings = $.extend({}, $.fn.test2.sn.defaults, settings);
console.log(settings);
$.fn.test2.sn.add();
} $.fn.test2.sn = {
defaults: {
dir: "H",
speed: 500
}, add: function () {
alert("滚动方式:" + this.defaults.dir);
}
} })(jQuery); $("#txtName").test2({name:"alicetest",dir:"V"});
</script>
</body>
</html>
设置默认值，如果插件的传入的参数中存在此参数，则覆盖默认值，否则则使用默认值，例如上面的例子中输出结果为：
jquery的extend的重载原型
extend(boolean,dest,src1,src2,src3...);
其中第一个参数boolean代表是否进行深度拷贝，其余参数和之前一样，例如：
var result = $.extend(true, {}, { name: "alice", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
console.log(result);
返回的结果为：
也就是 它会将src中的嵌套子对象也进行合并，即：location:{city:"beijing",country:"china",state:"y"}
如果将第一个参数传为false，效果又如何了，例如：
var result2 = $.extend(false, {}, { name: "alice",last:"222", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
console.log(result2);
结果如下：
只会进行合并，不会再对嵌套的子对象进行合并，例如；location:{city:"beijing",state:"y"}
常用的扩展实例，例如：
$.extend($.net,{
hello:function(){
alert("这是全局对象拓展一个scroll命名空间");
}
});
这是将hello方法拓展到之前的jquery的net命名空间去，怎么调用？？
例如，拓展动画中的$.easing：
$.extend($.easing,{
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
});
从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数,以上代码是拓展了jquery.easing 中的easeInSine动画，
如果不拓展jquery.easing,则需要引入整个jquery.easing.1.3.js,因此为了减少代码的冗余，我们可以扩展$.easing中的方法；
具体调用如下：
$("#imgSrc").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, "slow", "easeInSine", function () {
alert("移动了吗 ，哈哈");
});
以上就是jquery插件的一些用法，若有不足之处，请多多指教~~！
jquery插件之jquery.extend和jquery.fn.extend的区别的更多相关文章
- jQuery插件开发的两种方法及$.fn.extend的详解(转)
jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下 jQuery插件开发分为两种: 1 类级别 类级别你可以 ...
- 不定义JQuery插件，不要说会JQuery[转载]
http://www.cnblogs.com/xcj26/p/3345556.html 不定义JQuery插件,不要说会JQuery 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页 ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- 不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- [转]不定义JQuery插件，不要说会JQuery
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
- 不定义JQuery插件，不要说会JQuery
转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
- 转：不会定义jQuery插件，不要说会jQuery
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- 转载：不定义JQuery插件，不要说会JQuery
转载:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
- （转）不定义JQuery插件，不要说会JQuery
原文地址:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#" ...
- 使用jQuery插件时避免重复引入jquery.js文件
当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...
随机推荐
- DirectShow使用心得
用了3天时间,将DShow加入到了游戏中,记录下心得,方便要使用的童鞋以及以后的自己查看.1. Video Mixing Renderer 9,内部使用Direct3D 9,需要Windows XP或 ...
- vmware下为CentOS7设置静态IP
vmware下为CentOS7设置静态IP可以分为三个主要步骤: 1. 在windows中设置VMWare创建的虚拟网络 2. 设置VMWare为静态IP 3. 设置CentOS7的网络为静态IP 首 ...
- 如何自定义View
1. 首先 在values目录下建立attrs.xml文件,添加属性内容 ·在布局文件中添加新的命名空间xmlns,然后可以使用命名空间给自定义的空间设置属性 attrs.xml <resour ...
- 安装SQLserver 2014(For AlwaysOn)
SQLserver 2014 AlwaysOn在SQLserver 2012的基础之上,进行了非常大程度的添加.如能够通过"加入 Azure 副本向导"简化了用于 AlwaysOn ...
- 云中应用性能管理（APM）的下一步
Michael Kopp是Compu-ware公司卓越APM中心的一名技术分析师,他做过10多年的Java/JEE领域的设计师和开发员.另外,Kopp还专攻虚拟和云的大规模生产部署的结构和性能. ? ...
- vmware workstation(mac版）查看vmnet8的网关地址
想为虚拟机配置固定ip,需要设置网关,但是mac版的vmware workstation没有Virtual Network Editor,所以不能直接查看到. 因此执行如下命令进行查找 find / ...
- COM组件多接口对象模型
COM组件有两种接口类型,Dual and Custom,如下图所示.本文说的是Custom.所谓多接口COM对象是指此COM对象实现了多于一个的自定义接口,即Custom接口. 接口图如下: 需要注 ...
- line-height:0的使用
在这里不介绍line-height的概念 建议看一下张鑫旭 写的line-height 文章 这里只说 用到的一些小地方 div中img有间隙的解决方案就是用到了这个小小的属性 那么请看方案 方案 ...
- 安装Hadoop 1.1.2 （三 安装配置Hadoop）
1 tar -zxvf hadoop-1.1.2.tar.gz 2 在hadoop/conf目录 (1) 编辑 hadoop-env.sh export JAVA_HOME=/usr/java/jdk ...
- 【BZOJ3926】[Zjoi2015]诸神眷顾的幻想乡 广义后缀自动机
[BZOJ3926][Zjoi2015]诸神眷顾的幻想乡 Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝 ...