个性化阅读
专注于IT技术分析

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>

立即测试

输出:

单人2

单人3

多个2

3倍

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("srcmini");
    });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>

立即测试

输出:

Name:

设置输入字段的值

赞(0)
未经允许不得转载:srcmini » jQuery val()

评论 抢沙发

评论前必须登录!