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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類