jQuery val()方法

jQuery的val()方法有两种用法。

用于获取匹配元素集合中第一个元素的当前值。
用于设置每个匹配元素的值。

语法 :

$(selector).val()

它用于获取值。

$(selector).val(value)

它用于设置值。

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

它用于使用函数设置值。

jQuery val()方法的参数

参数	描述
value	这是一个必填参数。它用于指定属性的值。
Function (index, currentvalue)	这是一个可选参数。它用于指定一个返回要设置的值的函数。

jQuery val()示例

val()方法主要用于获取表单元素的值。此方法不接受任何参数。当没有选择任何选项时，此方法返回NULL，并在选择一个或多个选项的情况下返回包含每个选定选项值的数组。

让我们看一下val()方法的示例。

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>val demo</title>  
  <style>  
  p {  
    color: red;  
    margin: 4px;  
  }  
  b {  
    color: blue;  
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
</head>  
<body>  
<p></p>  
<select id="single">  
  <option>Single</option>  
  <option>Double</option>  
 <option>Triple</option>  
</select>  
<script>  
function displayVals() {  
  var singleValues =  $( "#single" ).val();$ ( "p" ).html( "<b>Value:</b> " + singleValues);  
}  
$( "select" ).change( displayVals );  
displayVals();  
</script>  
</body>  
</html>

让我们看看使用单个和多个选择框的jQuery val()方法的示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: red;
    margin: 4px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
  <option>Single3</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option>Multiple3</option>
</select>
<script>
function displayVals() {
  var singleValues =  $( "#single" ).val(); var multipleValues =$ ( "#multiple" ).val() || [];
   $( "p" ).html( "<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join( ", " ) ); }$ ( "select" ).change( displayVals );
displayVals();
</script>
</body>
</html>

jQuery val(value)示例

这个方法用于设置匹配元素的值，该值可以是文本字符串、数字或字符串数组。你可以通过传入函数来设置值。

让我们看看val(value)方法的示例。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        $("input:text").val("JavaTpoint");
    });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>