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>
输出:
例子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>
输出:
在点击按钮之前。
点击按钮后。