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的搜索服务器.它提供了一个分 ...
随机推荐
- 去除Jsp页面空白行
在Jsp页面head位置添加 <%@ page trimDirectiveWhitespaces="true" %> 在项目web.xml中添加 <servlet ...
- Jenkins在Windows系统dotnet平台持续集成
之前写过一篇文章是在CentOS上构建.net自动化编译环境, 今天这篇是针对于Windows平台的环境. Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平 ...
- 基于highcharts封装的组件-demo&源码
前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基 ...
- 【转载】Oracle递归查询:使用prior实现树操作【本文出自叶德华博客】
本文标题:Oracle递归查询:使用prior实现树操作 本文链接:http://yedward.net/?id=41 本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处. Oracle ...
- CentOS桌面安装
1.显示系统已经安装的组件,和可以安装的组件: #yum grouplist 2.如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装: #yum groupinstall " ...
- MyEclipse 2016 CI 3发布
JSjet 语法高亮 受够了Eclipse中的JavaScript编码体验?那就来试试MyEclipse 2016 CI 3.JSjet改进了JavaScript编码的语法高亮功能,大大提升了代码的可 ...
- [转]Design Pattern Interview Questions - Part 1
Factory, Abstract factory, prototype pattern (B) What are design patterns? (A) Can you explain facto ...
- android SharedPreferences介绍
SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置比如窗口状态,一般在Activity中重载窗口状态onSaveInstanceState保存一般使用 ...
- OOP感悟
行内讲的最多的就是出来一年内基本靠copy,一年后才基本懂得如何去写代码,而理解领悟oop,需要的时间却不定. 我工作中,我发现很多人拿着面向对相当的语言作者做着面向过程的事情,不需要知其所以然,只要 ...
- iOS Xcode, 解决“Could not insert new outlet connection: Could not find any information for the class named”的问题。
在Xcode中,我们可以在StoryBoard编辑界面或者是xib编辑界面中通过“Control键+拖拽“的方式将某个界面元素和对应的代码文件连接起来,在代码文件中创建outlet. 不过,如果你的运 ...