jQuery操作DOM之获取表单控件的值

本文实例讲述了jQuery操作DOM之获取表单控件的值。分享给大家供大家参考。具体分析如下： HTML属性与DOM属性差别最大的地方，恐怕就要数表单控件的值了。比如，文本输人框的 value属性在DOM中的属性叫defaultValue，DOM中就没有value属性。而选项列表（select) 元素呢，其选项的值在DOM中通常是通过selectedIndex属性，或者通过其选项元素的 selected属性来取得。 由于存在这些差异，在取得和设置表单控件的值时，最好不要使用.attr()方法。而对于选项列表呢，最好连.prop()方法也不要使用。那使用什么呢，建议使用jQuery提供的.val( 在jQuery中，操作DOM元素尤其是表单控件的值是一项常见的任务。表单控件，如文本输入框、选择列表等，它们的值在HTML属性和DOM属性中表现形式不同，因此在处理这些值时需要特别注意。这篇文章将详细介绍如何使用jQuery的`.val()`方法来获取和设置表单控件的值。 我们来看文本输入框（input）的值。在HTML中，文本输入框的值通常由`value`属性表示。但在DOM中，这个值被称作`defaultValue`，而不是直接的`value`属性。因此，当你想要获取或设置文本输入框的当前值时，使用`.attr()`或`.prop()`方法可能会得到不准确的结果。相反，推荐使用jQuery的`.val()`方法，它能正确地处理这种差异。例如： ```javascript // 获取文本输入框的当前值 var inputValue = $('#my-input').val(); ``` 对于选择列表（select），情况有所不同。在DOM中，选择列表的当前选中项的值通常是通过`selectedIndex`属性，或者是通过其选项元素的`selected`属性来获取。然而，jQuery提供了一种更简便的方法——`.val()`。你可以直接使用`.val()`来获取或设置选择列表的值： ```javascript // 获取选项列表的当前值 var selectValue = $('#my-select').val(); // 设置单选列表的值 $('#my-single-select').val('value3'); // 设置多选列表的值 $('#my-multi-select').val(['value1', 'value2']); ``` 这里需要注意，对于多选列表，`.val()`方法接收一个数组，表示选中项的值。 除了作为getter之外，`.val()`还可以作为一个setter，它接受一个函数作为参数，使得动态设置值变得简单。例如，你可以根据某个条件来设置值： ```javascript // setter函数示例 function setValue(element) { var currentValue = $(element).val(); if (currentValue === 'oldValue') { $(element).val('newValue'); } } // 应用setter函数 $('#my-input').val(setValue); ``` 总结来说，jQuery的`.val()`方法是处理表单控件值的首选工具，因为它能够正确处理HTML属性和DOM属性之间的差异，并且提供了方便的getter和setter功能。在进行jQuery编程时，尤其涉及到表单交互，使用`.val()`可以显著提高效率并减少潜在的问题。了解并熟练运用这一方法，对于提升jQuery程序设计能力至关重要。