jQuery | val() 与示例

val() 方法是 jQuery 中的一个内置方法，用于返回或设置所选元素的属性值。此方法适用于 HTML 表单元素。

语法：有以下三种方法可以使用此方法：

• $(selector).val()

  参数：此方法不接受任何参数。

• $(selector).val(value)

  参数：此方法接受强制的单个参数值。它用于指定属性的值。

• $(selector).val(function(index,current_value))

  参数：此方法接受可选的单参数函数。它包含元素的索引位置和被选元素的当前值属性。

返回值：此方法返回选定元素，并通过 val() 方法进行指定更改。

下面的例子说明了 jQuery 中的 val() 方法：

示例 1：

    
        The val Method
        
        
          
        
        
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text").val("GeeksforGeeks!");
                    $("input:text").css("color", "green");
                    $("input:text").css("font-size", "40px");
                    $("input:text").css("font-weight", "bold");
                    $("input:text").css("font-family", "times new roman");
                });
            });
        
        
            div {
                background-color: lightgreen;
                padding: 20px;
                width: 41%;
                min-height: 150px;
                border: 2px solid green;
            }
               
            input {
                border: 2px solid green;
                padding-left: 15px;
                width: 350px;
                height: 80px;
            }
        
    
    
        
            
                
            
            
            Click Here!
        
    

输出：

示例 2：此方法取两个值，第一个是索引位置，第二个是属性值。无需传递索引位置，函数会自动设置为空（n = 0），“c”指定输入字段的当前值。

    
        The val Method
        
        
          
        
        
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text").val(function(n, c) {
                        return c + " GeeksforGeeks!";
                    });
                });
            });
        
        
            div {
                background-color: lightgreen;
                padding: 20px;
                width: 300px;
                height: 80px;
                border: 2px solid green;
            }
               
            input {
                border: 2px solid green;
                padding-left: 15px;
                width: 220px;
                font-weight: bold;
                height: 30px;
            }
        
    
       
    
        
            
                
            
            
            Click Here!
        
    

输出：
点击按钮前：

点击按钮后：