jQuery val() 方法

定义和用法

val() 方法返回或设置被选元素的 value 属性。

当用于返回值时：该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：该方法设置所有匹配元素的 value 属性的值。

注意：val() 方法通常与 HTML 表单元素一起使用。

语法

返回 value 属性：

$(selector).val()

设置 value 属性：

$(selector).val(value)

通过函数设置 value 属性：

$(selector).val(function(index,currentvalue))

参数描述

参数	描述
value	必需。规定 value 属性的值。
function(index,currentvalue)	可选。规定返回要设置的值的函数。 index - 返回集合中元素的 index 位置。 currentvalue - 返回被选元素的当前 value。

实例

下例演示了何使用jQuery的 text()，html()和val()方法设置内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
      $(document).ready(function () {
         $("#btn1").click(function(){
            $("#test1").text("Hello world!");
         });
         $("#btn2").click(function(){
            $("#test2").html("<b>Hello world!</b>");
         });
         $("#btn3").click(function(){
            $("#test3").val("Dolly Duck");
         });
      });
</script>
</head>
<body>
      <p id="test1">这是一个段落。</p>
      <p id="test2">这是另外一个段落。</p>
      <p>输入框: <input type="text" id="test3" value="菜鸟教程"> </p>
      <button id="btn1">设置文本</button>
      <button id="btn2">设置HTML</button>
      <button id="btn3">设置值</button>
</body>
</html>

尝试一下

定义和用法

语法

参数描述

实例

相关页面