jQuery val()的例子

jQuery val()的例子

val()方法是jQuery内置的一个方法,用于返回或设置所选元素的属性值。这个方法适用于HTML表单元素。
语法:有三种方法来使用这种方法,如下所示。

$(selector).val()
  • 参数。该方法不接受任何参数。
$(selector).val(value)
  • 参数。这个方法接受单个参数value,这是必须的。它用于指定属性的值。
$(selector).val(function(index,current_value))
  • 参数。这个方法接受一个参数function,这是可选的。它包含元素的索引位置和选定元素的当前值属性。

返回值:该方法返回选定的元素和val()方法所做的指定修改。
下面的例子说明了jQuery中的val()方法。
示例 1:

<!DOCTYPE html>
<html>
    <head>
        <title>The val Method</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
         
        <!-- jQuery code to show the working of this method -->
        <script>
            (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");
                });
            });
        </script>
        <style>
            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;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                <input type="text" name="user">
            </p>
            <!-- click on this paragraph and see the change -->
            <button>Click Here!</button>
        </div>
    </body>
</html>

输出:

jQuery val()的例子

例子2:这个方法需要两个值,第一个是索引位置,第二个是属性值。不需要传递索引位置,该函数将自动设置为空(n = 0),”c “指定输入字段的当前值。

<!DOCTYPE html>
<html>
    <head>
        <title>The val Method</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
         
        <!-- jQuery code to show the working of this method -->
        <script>
            (document).ready(function() {
                ("button").click(function() {
                    $("input:text").val(function(n, c) {
                        return c + " GeeksforGeeks!";
                    });
                });
            });
        </script>
        <style>
            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;
            }
        </style>
    </head>
      
    <body>
        <div>
            <p>
                <input type="text" name="user" value="Welcome To">
            </p>
            <!-- click on this paragraph and see the change -->
            <button>Click Here!</button>
        </div>
    </body>
</html>

输出:
在点击按钮之前。

jQuery val()的例子

点击按钮后。

jQuery val()的例子

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程