解析jQuery中extend方法--用法《一》
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);
- $.extend(dest)
将dest的每一项合并到jQuery全局对象中
$.extend({name:"tom"});
使用:
$.name
- $.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方法--用法《一》的更多相关文章
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
随机推荐
- 查看错误日志发现有两个警告(ignored in --skip-name-resolve mode)
2016-08-02 17:30:26 17374 [Warning] 'user' entry '@losnau-223.com' ignored in --skip-name-resolve mo ...
- Thinking in scala (1)----类
ChecksumAccumulator.scala import scala.collection.mutable.Map class ChecksumAccumulator { private va ...
- STM32 定时器用于外部脉冲计数(转)
源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...
- Java解析JSON文件的方法 (二)
assets文件夹资源的访问 assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式读取文件. 1. 先在Activity里面调用g ...
- DNS分析
一.DNS服务器 区域传送: 区域(zone)和 域(domain) 区域:物理概念 域:逻辑概念 区域数据库文件: 资源记录:RR 有类型:A AAAA PTR SOA NS CNAME MX SO ...
- 互信息应用于SNP特征选择的局限
互信息已广泛应用于特征选择问题,但应用在 SNP 选择上还存在着一些局限.第一,互信息只能衡量一个 SNP 组合与表型的相关性, 无法衡量多个 SNP 与表型的相关性.第二, 利用互信息排序 SNP ...
- iconfont.cn阿里巴巴矢量图下载字体图标实战
1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...
- JavaSE学习总结(一)——Java基础
一.Java是什么 Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台.Java 是一项用于开发应用程序的技术,可以让 Web 变得更有意思和更实用.有许多 ...
- #图# #最大生成树# #kruskal# ----- OpenJudge 799:Heavy Transportation
OpenJudge 799:Heavy Transportation 总时间限制: 3000ms 内存限制: 65536kB 描述BackgroundHugo Heavy is happy. Afte ...
- Java Ant Could not find the main class: org.eclipse.ant.internal.launching.remote.InternalAntRunner. Program
参考:http://blog.csdn.net/jiangtaoking/article/details/49151763 The solution is to go to Run as → Exte ...