jQuery屬性操作之.val()函數

来源:https://www.cnblogs.com/peterzhangsnail/archive/2018/12/02/10054533.html
-Advertisement-
Play Games

@[toc] .val()實例方法的三種用法 1. $('xxx').val() : 獲取匹配的元素集合中第一個元素的當前value屬性值(property) 2. $('xxx').val(value) : 設置匹配的元素集合中每個元素的value屬性值(property) 3. $('xxx') ...


目錄

@

.val()實例方法的三種用法

  1. $('xxx').val() : 獲取匹配的元素集合中第一個元素的當前value屬性值(property)
  2. $('xxx').val(value) : 設置匹配的元素集合中每個元素的value屬性值(property)
  3. $('xxx').val(function(index,value){}) :
  • 鉤子函數未設置或無效時,將函數function(index,value)的返回值設為每一個DOM元素的value屬性值(property).
  • 其中,兩個形參不需要傳值,index指代當前DOM元素的在jQuery對象中的索引,value指代當前DOM對象的舊的value屬性值.

.val()函數源碼

    jQuery.fn.extend( {
    val: function( value ) {
        var hooks, ret, isFunction,
            elem = this[ 0 ]; //elem為jQuery對象匹配的第一個DOM元素
        
        //無參數傳入時
        if ( !arguments.length ) { 

            if ( elem ) { //如果jQuery有匹配到DOM元素的話

                //鉤子判斷與執行:匹配用戶自定義的鉤子函數,並執行和返回
                hooks = jQuery.valHooks[ elem.type ] ||  //如果valHooks有type屬性,賦值對應鉤子
                    jQuery.valHooks[ elem.nodeName.toLowerCase() ];  //如果valHooks有與DOM節點名相關的屬性,賦值對應鉤子



                if ( // 如果定義了鉤子及相關方法,調用鉤子函數處理並返回
                    hooks &&
                    "get" in hooks &&
                    ( ret = hooks.get( elem, "value" ) ) !== undefined
                ) {
                    return ret;
                }

                ret = elem.value;  //無鉤子時,直接取元素的value值

                return typeof ret === "string" ?

                    // 返回字元串:處理一般情況下的返回值
                    ret.replace( rreturn, "" ) :

                    // 返回非字元串:value為null/undefined,返回空串;其餘情況,返回ret
                    ret == null ? "" : ret;
            }

            return; //如果jQuery對象未匹配到DOM元素時,直接返回
        }


        //傳入一個參數時的情況:函數,非函數
        isFunction = jQuery.isFunction( value ); //判斷傳入參數是否為函數,為後續條件開關做準備

        return this.each( function( i ) {  //實例方法.each():對匹配到的每一個DOM元素,執行括弧中的函數:obj[i].callback(i);
            var val;

            if ( this.nodeType !== 1 ) { //當前DOM元素不為元素節點時,直接返回
                return;
            }

            if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

                val = value.call( this, i, jQuery( this ).val() );
                //[註:value的兩個形參,我們不用給它手動傳值,會在val函數內部自動傳值,一個代表DOM元素的索引,一個代表DOM元素當前的value屬性的值]

            } else {
                val = value; //如果傳入參數不為函數類型,val=傳入參數;
            }

            // 將val為null/undefined的情況,統一處理為空串
            if ( val == null ) {
                val = "";
            } else if ( typeof val === "number" ) {
                val += "";
            } else if ( jQuery.isArray( val ) ) {
                val = jQuery.map( val, function( value ) {
                    return value == null ? "" : value + "";
                } );
            }

            //有傳參的情況下的,鉤子判斷與執行:匹配用戶自定義的鉤子函數,並執行和返回
            hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

            // 如果鉤子的"set"屬性未定義,仍舊返回上面一般情況下處理的結果
            if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
                this.value = val;
            }
        } );
    }
} );

調用形式:$('xxx').val();

相關代碼:

var hooks, ret, isFunction,
            elem = this[ 0 ]; //elem為jQuery對象匹配的第一個DOM元素
        
        //無參數傳入時
        if ( !arguments.length ) { 

            if ( elem ) { //如果jQuery有匹配到DOM元素的話

                //鉤子判斷與執行:匹配用戶自定義的鉤子函數,並執行和返回
                hooks = jQuery.valHooks[ elem.type ] ||  //如果valHooks有type屬性,賦值對應鉤子
                    jQuery.valHooks[ elem.nodeName.toLowerCase() ];  //如果valHooks有與DOM節點名相關的屬性,賦值對應鉤子



                if ( // 如果定義了鉤子及相關方法,調用鉤子函數處理並返回
                    hooks &&
                    "get" in hooks &&
                    ( ret = hooks.get( elem, "value" ) ) !== undefined
                ) {
                    return ret;
                }

                ret = elem.value;  //無鉤子時,直接取元素的value值

                return typeof ret === "string" ?

                    // 返回字元串:處理一般情況下的返回值
                    ret.replace( rreturn, "" ) :

                    // 返回非字元串:value為null/undefined,返回空串;其餘情況,返回ret
                    ret == null ? "" : ret;
            }

            return; //如果jQuery對象未匹配到DOM元素時,直接返回
        }

說明:
1.jQuery對象沒有匹配到DOM元素時,直接返回.
2.先進行鉤子函數相關的判斷(調用),如果鉤子滿足以下幾個條件,執行鉤子函數並返回:

  • 鉤子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
  • 鉤子之中存在get屬性
  • 調用get,得到的返回值不為undefined

3.否則,返回elem的value屬性的屬性值.

調用形式:$('xxx').val(value);

相關代碼:

if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

            val = value.call( this, i, jQuery( this ).val() );

        } else {
            val = value; //如果傳入參數不為函數類型,val=傳入參數;
        }
//有傳參的情況下的,鉤子判斷與執行:匹配用戶自定義的鉤子函數,並執行和返回
        hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

        // 如果鉤子的判斷不通過,仍舊返回上面一般情況下處理的結果
        if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
            this.value = val;
        }

說明:(value為非函數類型情況下)
1.同樣,先進行鉤子的判斷,如果滿足以下幾個條件,if條件判斷語句中的三個表達式依次執行,設置好當前DOM元素value屬性值:

  • 鉤子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
  • 鉤子之中存在set屬性
  • 調用set,得到的返回值不為undefined

2.否則,直接設置當前DOM元素的value屬性值為傳入的參數

調用形式:$('xxx').val(function(index,value){});

相關代碼:

if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

            val = value.call( this, i, jQuery( this ).val() );
            //[註:value的兩個形參,我們不用給它手動傳值,會在val函數內部自動傳值,一個代表DOM元素的索引,一個代表DOM元素當前的value屬性的值]

        } else {
            val = value; //如果傳入參數不為函數類型,val=傳入參數;
        }

        // 將val為null/undefined的情況,統一處理為空串
        if ( val == null ) {
            val = "";
        } else if ( typeof val === "number" ) {
            val += "";
        } else if ( jQuery.isArray( val ) ) {
            val = jQuery.map( val, function( value ) {
                return value == null ? "" : value + "";
            } );
        }

        //有傳參的情況下的,鉤子判斷與執行:匹配用戶自定義的鉤子函數,並執行和返回
        hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

        // 如果鉤子的"set"屬性未定義,仍舊返回上面一般情況下處理的結果
        if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
            this.value = val;
        }

說明:(value為函數類型情況下)
1.令val=obj[i].value(i,jQuery( this ).val());
[註]

  • value函數兩個形參由本函數自動傳值,自行傳值無效.
  • 傳參i-當前DOM元素在jQuery對象中的索引值
  • 傳參jQuery( this ).val()-將當前DOM元素包裝為jQuery對象,以便以無參形式調用val方法得到的value屬性舊值.

2.同樣,先進行鉤子的判斷,如果滿足以下幾個條件,if條件判斷語句中的三個表達式依次執行,設置好當前DOM元素value屬性值:

  • 鉤子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
  • 鉤子之中存在set屬性
  • 調用set,得到的返回值不為undefined

3.否則,直接設置val為當前元素的value屬性值


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 時序資料庫及應用場景簡介
    時間序列資料庫簡稱時序資料庫(Time Series Database)，用於處理帶時間標簽(按照時間的順序變化，即時間序列化)的數據，帶時間標簽的數據也稱為時間序列數據。 時序數據的幾個特點 1. 基本上都是插入，沒有更新的需求。 2. 數據基本上都有時間屬性，隨著時間的推移不斷產生新的數據。 3 ...
  • Windows下修改iTunes備份路徑
    0.準備工作: 關閉itunes 在任務管理器中殺掉iTunes開頭的服務 1,找到iTunes預設備份路徑:C:\Users\xxx\AppData\Roaming\Apple Computer\MobileSync xxx為里的用戶名 2,刪掉預設路徑下的MobileSync文件夾,以前有備份的 ...
  • 關於HTML框架(frameset)的一些基本用法
    frameset 定義 W3C是這樣定義frameset框架的，通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。每份HTML文檔稱為一個框架，並且每個框架都獨立於其他的框架。註意，這是HTML框架，不是前端框架，與node.js，vue.js等不同。 垂直切割 屬性為cols。例如： <f ...
  • 作用域面試總結(持續更新系列~)
    先說幾個概念： 1、js代碼從上往下執行 2、變數提升： 變數提升是瀏覽器的一個功能，在運行js代碼之前，瀏覽器會給js一個全局作用域叫window，window分兩個模塊，一個叫記憶體模塊，一個叫運行模塊，記憶體模塊找到當前作用域下的所有帶var和function的關鍵字，執行模塊執行js代碼，從上到 ...
  • 前端入門9-JavaScript語法之運算符
    聲明 本系列文章內容全部梳理自以下幾個來源： 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，在其基 ...
  • js作用域面試題大全
    什麼是作用域：瀏覽器給js的生存環境叫作用域。 什麼是變數提升： Js代碼執行前，瀏覽器會給一個全局作用域window Window分兩個模塊一個是存儲模塊一個是執行模塊 存儲模塊找到所有的var和function 關鍵字給這些變數添加記憶體地址 執行模塊，代碼從上到下執行，遇到變數就會去存儲模塊查找 ...
  • js高級：event，事件冒泡，事件捕獲
    1.事件 瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的，不需要我們去綁定，只需要我們去觸發。 通過 obj.事件名=function（）{} 事件名：onmouseover 滑鼠懸浮 onmouseout 滑鼠移除 onmousedown滑鼠按下 onmouseup 滑鼠抬起 o ...
  • JS(JavaScript）的進一步瞭解6（更新中···）
    元素的屬性 div.attributes 是所有標簽屬性構成的數據集合 div.classList 是所有class名構成的數組集合 在classList的原型鏈上看以看到add()和remove() 1.client系列 (1) clientWidth/clientHeight 是我們設置的寬和高 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類