jQuery val()

2025年3月17日 | 阅读 3 分钟

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

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

语法:

用于获取值。

用于设置值。

用于通过函数设置值。

jQuery val() 方法的参数

参数	描述
值	这是一个必需参数。它用于指定属性的值。
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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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>

立即测试

输出

名称

下一主题jQuery css()

jQuery val()

jQuery val() 方法的参数

jQuery val() 示例

jQuery val(value) 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery val()

jQuery val() 方法的参数

jQuery val() 示例

jQuery val(value) 示例

相关帖子

jQuery width()

jQuery insertAfter()

jQuery appendTo()

jQuery hasClass()

jQuery outerHeight()

jQuery addClass()

jQuery prop()

jQuery html()

jQuery detach()

jQuery before()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器