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的搜索服务器.它提供了一个分 ...
随机推荐
- 【夯实PHP基础系列】linux下yum安装PHP APC
Alternative PHP Cache(可选PHP缓存),依赖于 PECL扩展库 用源码方式安装,直接yum就行了:首先要安装apc的依赖包:yum install php-pear php-de ...
- javaweb优化
http://blog.csdn.net/jiangzhaobao/article/details/8003244
- 11、ASP.NET MVC入门到精通——AspnetMVC分页
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- JavaScript进阶篇QA总结
Q1:常用的运算符有哪些?他们的优先级是怎样的?A1:1.算术运算符:加(+).减(-).乘(×).除(÷),自加一(++),自减一(--):2.比较运算符:大于(>).小于(<).大于等 ...
- 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐
text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...
- 纯HTML5+CSS3制作生日蛋糕
以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...
- 基础理解2:CSS3按钮动画
一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定 ...
- git笔记
这篇有关git的博客,写着写着有些崩了.里面有些碎碎念了.下次一定注意这个问题. 创建项目: midir xx :创建xx文件夹 git init : 为当前文件夹创建代码仓库 提交代码: git a ...
- [Java编程思想-学习笔记]第1章 对象导论
1.1 抽象过程 Java是一门面向对象的语言,它的一个优点在于只针对待解问题抽象,而不用为具体的计算机结构而烦心,这使得Java有完美的移植性,也即Java的口号"Write Once, ...