jQuery 源码分析(十五) 数据操作模块 val详解

Posted greatdesert

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 源码分析(十五) 数据操作模块 val详解相关的知识,希望对你有一定的参考价值。

jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下:

  • val(vlaue)        ;获取匹配元素集合中第一个元素的当前值,或者设置匹配元素集合中每个元素的值,有三种用法:
  1. val()            ;没有参数,获取第一个匹配元素的当前值
  2. val(value)         ;为每个匹配元素设置value值        ;如果为null则表示设置值为空
  3. val(func)          ;设置每个匹配元素为函数func返回的值    ;该函数接受两个参数:分别是当前元素在集合中的下标和当前value值。

就是修改DOM元素的value属性,常用于 设置/获取 输入框里的值,举个栗子:

 writer by:大沙漠 QQ:22969969

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    <style>
        .color{color: #f00;}
        .back{background: #ccc;}
    </style>
</head>
<body>
    <input type="text" id="input">
    <button id="b1">设置值</button>
    <button id="b2">获取值</button>
    <script>
        let b1 = document.getElementById(b1),
            b2 = document.getElementById(b2);
        b1.onclick = ()=> $(input).val(123)
        b2.onclick = ()=> console.log($(input).val())
    </script>    
</body>
</html>

渲染如下:

技术图片

我们设置了一个输入框,然后添加了两个按钮,分别用于设置值和获取值,点击设置值后会调用$(input).val(123)去设置对应的值123,如下:

技术图片

 点击获取值时就会获取该输入框的值,控制台输入如下:

技术图片

 一般在提交表单的时候,可以通过val()去获取值,在进行验证的时候,比如某个输入框只能填写数字,如果发现用户输入了非数字的字符,我们过滤后可以再调用val(v)去设置一下值。

 

源码分析


val()的实现比较简单,如下:

jQuery.fn.extend({
    val: function( value ) {        //获取匹配元素集合中第一个元素的当前值,或者设置匹配元素集合中每个元素的值。
        var hooks, ret, isFunction,
            elem = this[0];                //elem是第一个匹配元素的引用

        if ( !arguments.length ) {        //如果未传入参数,则获取第一个匹配元素的当前值
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];        //如果需要修正,则修正该值

                if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                    return ret;
                }

                ret = elem.value;

                return typeof ret === "string" ?                                                            //否则直接读取DOM属性value
                    // handle most common string cases
                    ret.replace(rreturn, "") :
                    // handle cases where value is null/undef or number
                    ret == null ? "" : ret;
            }

            return;
        }

        isFunction = jQuery.isFunction( value );        //value是否为函数

        return this.each(function( i ) {
            var self = jQuery(this), val;

            if ( this.nodeType !== 1 ) {                    //如果当前元素不是元素节点,则直接返回
                return;
            }

            if ( isFunction ) {                                //如果value是函数,则在每个匹配元素上执行该函数,并取其返回值作为待设定的值。
                val = value.call( this, i, self.val() );        //在函数内部,this指向当前元素,函数有两个参数,分别是当前元素在集合中的下标和当前value值。
            } else {
                val = value;
            }

            // Treat null/undefined as ""; convert numbers to string
            if ( val == null ) {                             //如果val是null,则转换为空字符串
                val = "";                                        
            } else if ( typeof val === "number" ) {            //如果val是数字格式,则/转换为字符串
                val += "";
            } else if ( jQuery.isArray( val ) ) {            //如果val是数组格式
                val = jQuery.map(val, function ( value ) {        //则调用jQuerymap将val转化为字符串最后返回
                    return value == null ? "" : value + "";
                });
            }

            hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];

            // If set returns undefined, fall back to normal setting
            if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {    //优先调用对应的修正对象的修正方法set()
                this.value = val;                                                                        //如果没有修正对象,则直接设置value值。
            }
        });
    },
    /**/
})

就是设置/获取对应DOM对象引用的value值来实现的。

 

以上是关于jQuery 源码分析(十五) 数据操作模块 val详解的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

jQuery 源码分析 队列模块 Queue详解

jQuery1.9.1源码分析--数据缓存Data模块

jQuery源码分析 异步队列模块 Deferred 详解

spark 源码分析之十五 -- Spark内存管理剖析

jQuery 源码分析(十九) DOM遍历模块详解