jquery工具方法access详解
access : 多功能值操作(内部)
access方法可以使set/get方法在一个函数中体现。比如我们常用的css,attr都是调用了access方法。
css的使用方法:
$(selector).css(key) //get
$(selector).css(key,valye) //set
$(selector).css({key1:valye1,key2:value2}) //set
$(selector).css(function(){ ............. }) //set
access有一堆参数,炸一看蛮吓人的:
access: function( elems, fn, key, value, chainable, emptyGet, pass ) {
elems : 元素集合
fn : 回调
key : 键
value : 值
chaunable : 0:读取 1:设置
emptyGet : 该参数一般是不给的,当没有元素时返回undefined
pass : 字符串为真,函数为假
大致了解各参数后,我们看access方法的最下面可以发现,当chainable为1时表示设置,它直接返回元素集合方便链式调用,为0表示获取。
return chainable ?
elems : // Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
在获取的部分又做了判断,bulk是什么,我们回到access开头部分就知道了:
bulk = key == null,
当key没有的时候bulk为真,所以会走fn.call( elems ) 否则走length ? fn( elems[0], key ) : emptyGet;
当bulk为假时,先判断元素是否有长度,有的则执行回调,没有返回undefined。
了解get后,我们继续看set。set有3种形式:
1:键值对 $(selector).css(key,valye)
2:key为对象 $(selector).css({key1:valye1,key2:value2})
3:key为函数 $(selector).css(function(){ ....... })
我们回到access开头往下看,我们发现access整个代码块,除了最底部是处理get外,其余的部分都是在处理set。
下面的代码片段可以看出,if处理键为对象,else if处理非对象,在else if中又分别处理当参数为键值对和key为函数的2种形式。
// Sets many values
if ( key && typeof key === "object" ) { .................. } else if ( value !== undefined ) { .................... }
当键为对象时,它的处理方式是利用递归再执行一次access。
if ( key && typeof key === "object" ) {
for ( i in key ) {
jQuery.access( elems, fn, i, key[i], 1, emptyGet, value );
}
chainable = 1;
// Sets one value
} else if ( value !== undefined ) {
........................
}
当键为非对象时,先判断值不为空,进入后做了4件事情:
1.如果值是函数,则exec为真。
2.如果键为空,则
1.当值为函数做了相应的处理
2.当值为字符串执行回调
3.循环元素集合执行回调
4.把chaunable设置为1,方便在return中进行处理
if ( key && typeof key === "object" ) {
......................
// Sets one value
} else if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = pass === undefined && jQuery.isFunction( value );
if ( bulk ) {
// Bulk operations only iterate when executing function values
if ( exec ) {
exec = fn;
fn = function( elem, key, value ) {
return exec.call( jQuery( elem ), value );
};
// Otherwise they run against the entire set
} else {
fn.call( elems, value );
fn = null;
}
}
if ( fn ) {
for (; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}
}
chainable = 1;
}
以上代码比较绕,其实一般情况是直接走情况3的,因为我们在设置css的时候key都是字符串。而情况2主要就是针对key为函数。
最后我们看下access完整的代码:
jQuery.extend({
.............................
// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
access: function( elems, fn, key, value, chainable, emptyGet, pass ) {
var exec,
bulk = key == null,
i = 0,
length = elems.length;
// Sets many values
if ( key && typeof key === "object" ) {
for ( i in key ) {
jQuery.access( elems, fn, i, key[i], 1, emptyGet, value );
}
chainable = 1;
// Sets one value
} else if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = pass === undefined && jQuery.isFunction( value );
if ( bulk ) {
// Bulk operations only iterate when executing function values
if ( exec ) {
exec = fn;
fn = function( elem, key, value ) {
return exec.call( jQuery( elem ), value );
};
// Otherwise they run against the entire set
} else {
fn.call( elems, value );
fn = null;
}
}
if ( fn ) {
for (; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}
}
chainable = 1;
}
return chainable ?
elems :
// Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
},
...............................
});
jquery工具方法access详解的更多相关文章
- jquery源码解析:jQuery工具方法when详解
我们先来看when方法是如何使用的: var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...
- jquery源码解析:jQuery工具方法Callbacks详解
我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add ...
- jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1
请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...
- jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2
请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- 分区工具parted的详解及常用分区使用方法【转】
来源:http://blog.51cto.com/zhangmingqian/1068779 分区工具parted的详解及常用分区使用方法 一. parted的用途及说明 概括使用说明 ...
- ajax方法参数详解与$.each()和jquery里面each方法的区别
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...
- 日志分析工具ELK配置详解
日志分析工具ELK配置详解 一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...
随机推荐
- 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
学习 EF Code First+MVC 时遇到了在请求JsonResult时出现 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用 的异常,原因 ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- 关于WEB 性能优化 (摘抄)
压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...
- JQ基础之选择器
JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $ ...
- iOS 根据银行卡号判断银行名称
如何根据银行卡号判断银行名称? + (NSString *)getBankName:(NSString*) cardId{ //"发卡行.卡种名称", NSArray* bankN ...
- 使用AIDL调用远程服务设置系统时间
在实际工作中,经常遇到客户需要用代码设置系统时间的需求,但是Android非系统应用是无法设置系统时间的.于是,我设计了一个使用系统签名的时间设置服务,客户通过bind调用服务里的方法就能达到设置时间 ...
- java设计模式--策略模式
策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 本文地址:http:// ...
- iOS 学习 - 25 ImageIO 播放 GIF
一.给原生的 UIImageView 添加类别来支持 GIF 播放 GIF 动态图片文件中包含了一组图片及信息,信息主要记录着每一帧图片播放的时间,我们如果获取到了 gif 文件中所有的图片同时又获取 ...
- oc 中组合排序算法
- (NSMutableArray *)zuHeSuanFa:(NSMutableArray *)array chooseCount:(int)m { int n = (int)[array coun ...
- Storm基础
Storm基本概念 Storm是一个开源的实时计算系统,它提供了一系列的基本元素用于进行计算:Topology.Stream.Spout.Bolt等等. 在Storm中,一个实时应用的计算任务被打包作 ...