zoukankan      html  css  js  c++  java
  • 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值来实现的。

  • 相关阅读:
    关于这个 blog
    P6499 [COCI2016-2017#2] Burza 题解
    CF1172F Nauuo and Bug 题解
    CF1479D Odd Mineral Resource 题解
    CF1442E Black, White and Grey Tree 题解
    CF1442D Sum 题解
    CF1025D Recovering BST 题解
    CF1056E Check Transcription 题解
    CF1025F Disjoint Triangles 题解
    红包算法的PHP实现
  • 原文地址:https://www.cnblogs.com/greatdesert/p/11673027.html
Copyright © 2011-2022 走看看