jQuery 源碼分析(十五) 數據操做模塊 val詳解

時間 2019-11-08

標籤 jquery 源碼分析十五數據模塊 val 詳解欄目 JQuery 简体版

原文原文鏈接

jQuery的屬性操做模塊總共有4個部分，本篇說一下最後一個部分:val值的操做，也是屬性操做裏最簡單的吧，只有一個API，以下:html

val(vlaue) ;獲取匹配元素集合中第一個元素的當前值，或者設置匹配元素集合中每一個元素的值，有三種用法:

val() 　　　　 ;沒有參數，獲取第一個匹配元素的當前值
val(value) 　　 ;爲每一個匹配元素設置value值 ;若是爲null則表示設置值爲空
val(func) 　　 ;設置每一個匹配元素爲函數func返回的值 ;該函數接受兩個參數:分別是當前元素在集合中的下標和當前value值。

就是修改DOM元素的value屬性，經常使用於設置/獲取輸入框裏的值，舉個栗子:node

writer by:大沙漠 QQ:22969969jquery

<!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)去設置一下值。this

源碼分析spa

val()的實現比較簡單，以下:code

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值。
            }
        });
    },
    /*略*/
})