extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法。常用语jQuery插件开发。

jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实现一样,但功能用法却不一样,按照官方解释:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法)

简单来说:$.extend(),是用来扩展jQuery静态方法;$.fn.extend()是用来扩展jQuery实例方法。

用法:
	//扩展静态方法:
$.extend({
sayName:function (){
console.log("My name is jQuery");
}
}); $.sayName(); //"My name is jQuery" //扩展实例方法:
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
}
}); $( "input[type='checkbox']" ).check(); //所有的checkbox都会被选择

Note:扩展的静态方法,直接使用$调用;扩展的实例方法,要用$()调用。

extend的参数
	extend(dest,src1,src2...srcN);//可以传入N多个对象

参数的含义:将src1,src2...srcN的每一项合并为dest的每一项,并返回合并后的对象:

	var dest = {name:"job",age:20},src1 = {name:"tom",live:"Beijing"};

   	$.extend(dest,src1);

   	console.log(dest);  //{name: "tom", age: 20,live:"Beijing"}

Note:dest的结构会发生变化

如果想得到合并的结果,并不修改dest的结构,可以这么做:

var newSrc = $.extend({},dest,src1,src2...srcN);

newSrc就是得到的新对象

这样的做法在写插件,设置默认值时会用到,比如写一个dialog插件,设置了弹框的基本样式:

	(function ($){
$.fn.extend({
dralog:function (options){
//设置默认样式
var deafualt = {
width:100,
height:100
};
//传过来的参数覆盖默认值
var style = $.extend({},deafualt,options); console.log(style); //deafualt变为:{width: 200, height: 200} $("div").css(style)
}
});
})(jQuery); $().dralog({
width: 200,
height: 200
});

当extend只有一个参数时:

	extend(dest);
  1. $.extend(dest)

将dest的每一项合并到jQuery全局对象中

	$.extend({name:"tom"});

使用:

	$.name
  1. $.fn.extend(dest)

将dest的每一项合并到jQuery的实例中

	$.fn.extend({name:"tom"});

使用:

	$().name

在jQuery对象扩展一个命名空间:

	$.extend({nameScope:{}});

	$.extend($.nameScope,{name:"tom"});

将name添加到nameScope这个命名空间中

当extend的第一参数为布尔值:

	extend(Boolean,src1,src2...srcN);

Boolean为true时,为深层拷贝;Boolean为false时,为浅拷贝。

有两个对象:

	var src1 = {name:"tom",location:{city:"Beijing",county:"China"}};
var src2 = {name:"job",location:{live:"New York",county:"USA"}};

Boolean为true:

	$.extend(true,src1,src2);

合并后,src1为:

	{name: "job", location: {city: "Beijing",county: "USA",live: "New York"}}

里面的子元素也会进行合并

Boolean为false:

	$.extend(false,src1,src2);

合并后,src1为:

	{name: "job", location: {city: "Beijing",county: "China"}}

里面的子元素不会合并,直接覆盖

extend是写jQuery插件的利器,以上是关于如何使用它的细节,接下来会分析jQuery如何来实现extend方法。

参考:http://api.jquery.com/jQuery.extend/

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

解析jQuery中extend方法--用法《一》的更多相关文章

  1. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

  2. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  3. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  4. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  5. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  6. jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...

  7. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  8. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  9. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

随机推荐

  1. P4语言编程快速开始 实践一

    参考:P4语言快速开始 感谢杨老师的分享! 前言及P4程序请参考原文,本文主要是对文章中的两个动手实例的实践记录. 1.通过behavioral-model运行simple_router样例 执行命令 ...

  2. 【转】Linux 上的最佳 C/C++ IDE

    IDE介绍收藏篇: 个人linux下开发经验不多,一般也都使用shell远程连接使用命令行模式开发.如果自己在自己机器上开发还是有IDE要方便很多,看到这篇帖子就果断的转过来先收藏下,之前自己使用过E ...

  3. WCF不用证书实现验证(messageheader)

    上文WCF进阶:将消息正文Base64编码中介绍了实现自定义MessageInspector来记录消息和实现自定义Formatter来改写消息,本文介绍一下在WCF中使用SoapHeader进行验证的 ...

  4. sqlserver 笔记:常用字符串函数

    select tid,tid+ coalesce(tid0,'101') from article where  id=1 ---如果tid为null 则 返回101    select LEN('你 ...

  5. C++ 句柄类

    一.容器与继承 在容器中保存有继承关系的对象时,如果定义成保存基类对象,则派生类将被切割,如果定义成保存派生类对象,则保存基类对象又成问题(基类对象将被强制转换成派生类对象,而派生类中定义的成员未被初 ...

  6. Nodejs之模板ejs

    ejs使用说明及介绍. 1.创建ejs项目 express -e test  //创建模板为ejs的项目,默认为jade. 2.使用 app.js中添加 var ejs = require('ejs' ...

  7. apue- chapter 1 UNIX基础知识

    1.C++实现ls命令 #include<dirent.h> #include<stdlib.h> #include<iostream> #include &quo ...

  8. Spark编程进阶

    1.累加器             通常在向Spark传递函数时,比如使用map()函数或者用filter()传条件是,可以使用驱动器程序中定义的变量,但是集群中运行的每个人物都会得到这些变量的一份新 ...

  9. Java中间件:淘宝网系统高性能利器(转)

    淘宝网是亚太最大的网络零售商圈,其知名度毋庸置疑,吸引着越来越多的消费者从街头移步这里,成为其忠实粉丝.如此多的用户和交易量,也意味着海量的信息处理,其背后的IT架构的稳定性.可靠性也显得尤为重要.那 ...

  10. 连锁不平衡LD

    http://wenku.baidu.com/link?url=Fr_C7J5F4KusZTpZJUfuVfh4Bpyb9BAY7IQhWAOYirQJW0Oz-X3fI5r41aPHiQR8ENn9 ...