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;
    },

     ...............................

});
时间: 2024-08-28 10:59:43

jquery工具方法access详解的相关文章

jquery源码解析:jQuery工具方法when详解

我们先来看when方法是如何使用的: var cb = $.when();   //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状态 $.Deferred()也是返回一个延迟对象,那么它们的区别是什么呢?$.Deferred()只能针对一个延迟对象做成功,失败,进行中的操作,而$.when()可以针对多个延迟对象做以上操作.举个例子: function a(){ var cb = $.Deferred(); cb.resolv

jquery源码解析:jQuery工具方法Callbacks详解

我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add(b); cb.fire();      //就会先执行a方法,再执行b方法 上面大概的意思是:add方法,就是把方法添加到数组list中,每执行一次,就添加一个方法.而fire方法,就是把list数组中的方法按顺序执行. 使用场景:第二个例子 function a(n){ } (function(

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, when: function( subordinate /* , ..., subordinateN */ ) { }}); 首先,来介绍下Deferred的使用: var cb = $.Deferred(); setTimeout(function(){ alert(1); cb.resolve()

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,promise,pipe,done,fail,progress. deferred对象除了有promise对象的所有方法外(通过jQuery.extend( obj, promise ),把promise对象的所有方法复制到deferred对象中),还有其他三个:resolve,reject,notify.

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

jQuery(五) jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

JQuery动画animate的stop方法使用详解

JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="styl