val()
返回匹配元素集合中第一个元素value的属性值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
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>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
</html>
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
将返回匹配id为‘single’和‘multiple’元素中的value数值。然后将返回值放入p元素中显示
val(val)
对匹配元素集合中每一个元素的value属性值注入‘val’
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
$("input").val(text);
对匹配的input元素集合中每一个input元素的value值都注入‘text’。
另附例子2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
});
</script>
<style>
body { color:blue; }
</style>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>
分享到：
相关推荐
在实际开发中，了解如何高效地使用jQuery获取和处理元素的属性值，以及在回调函数中执行操作，将极大地提升我们的代码质量和效率。通过不断实践和学习，我们可以更好地掌握这些技巧，从而编写出更加优雅、可维护的...
在jQuery众多的方法中，val()方法是非常重要且常用的一个，它的主要功能是获取或者设置表单元素的value属性值。本文将详细介绍jQuery中val()方法的用法，并通过实例进一步解释。 首先，需要了解的是val()方法在不带...
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考，具体如下： jquery判断自定义属性data-val 1.css .active { color: red; } 2.html <li data-val=1>1 <li data-val=2>2 <li data-...
在本文中，我们将探讨JQuery中一些常用的属性和方法，这些知识是在日常开发工作中非常有价值的。 首先，我们看到JQuery可以用于生成随机数字，比如通过`Math.random()`函数生成一个随机数，然后转换成字符串并截取...
通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input元素的值。 首先，要获取表单中input元素的值，最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后，可以使用 ....
总结起来，jQuery提供了一系列方便的方法，如`.val()`, `.prop()`, `.css()`, `.html()`, 和`.on()`，使得获取和改变网页控件的属性变得简单。通过熟练掌握这些方法，开发者可以轻松实现各种用户交互效果，提高网页...
val()是JQuery中一个非常有用的函数，它用于获取选定元素的值或者是设置元素的值。这个方法可以应用于表单元素，如input、textarea、select等，也可以用于自定义的data-value属性。 在JQuery中，val()方法可以有...
值得注意的是，当下拉列表有多个可选（`multiple`属性）时，val()方法会返回一个包含所有选中项值的数组： ```javascript // 设置多选下拉框的选中项 $("#multiple").val(["3", "4"]); // 获取所有选中项的值 var ...
本主题聚焦于"jQuery商品属性(多选)选择器代码"，这是一个用于实现用户在电子商务网站上根据商品属性进行多选查询的功能。在网页应用中，这种功能能够提供更方便的用户体验，帮助用户快速筛选出符合他们需求的商品。...
如果我们通过jQuery的val()方法来设置这个元素的值为“选择2号”，那么根据jQuery的从后往前查找机制，实际上被选中的会是第三个，即“选择3号”，因为它的value属性与我们要设置的值相匹配。 对应的jQuery代码如下...
总之，jQuery的`val()`方法是处理表单数据的核心工具，无论是获取用户输入、设置初始值还是在事件处理中更新值，都非常方便。通过理解其基本用法和注意事项，我们可以更有效地编写与表单交互的JavaScript代码。
jQuery提供了多种方法来获取和设置表单元素的值，其中最常见的两种方法是`val()`和`attr("value")`。这两种方法在大多数情况下看似效果相同，但在某些特定场景下却存在细微的差别，尤其是在不同的浏览器环境中。本文...
例如，通过添加事件监听器，我们可以使表格单元格变为可编辑状态，用户输入后，再利用jQuery的`.val()`方法获取或设置值，并通过Ajax与服务器进行数据同步，从而实现动态编辑表格的功能。 接下来，"div制作弹出窗口...
在这些封装的功能中，jQuery的val()方法是用于获取或设置表单控件（如输入框、复选框、单选按钮等）的值的常用函数。本篇文章将通过示例应用，详细介绍jQuery中val()方法的使用方法和实际效果。 首先，val()方法...
本教程将深入探讨如何使用jQuery库来创建一个简单的商品属性选择表单，以提升用户体验并简化前端交互逻辑。 首先，jQuery是一个高效、简洁的JavaScript库，它极大地简化了DOM操作、事件处理以及动画效果的实现。...
jQuery帮助文档 查询非常方便 jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context ...
首先，要理解jquery中的html、val和text三个属性，我们需要明确它们分别的作用和使用场景。这三种属性都是对DOM元素内容的获取与设置的方法，但它们之间存在明显的区别。 html属性主要用来获取或设置HTML内容。它有...
1. **表单验证**：jQuery提供了方便的API来处理表单元素，如`$(selector).val()`用于获取或设置值，`$(selector).is(':valid')`用于检查表单字段是否符合验证规则。通过自定义函数或使用现有的验证插件，可以轻松...
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...