详谈jQuery中使用attr(), prop(), val()获取value的异同

在jQuery中，使用attr()，prop()和val()可以方便地获取HTML表单元素的值。然而，它们在获取value时有所不同。下面是它们的详细说明和一些示例。

attr()

attr()函数通常用于获取HTML元素的属性值。当我们想要获取HTML元素的value值时，我们可以使用attr()函数。它返回一个字符串，这个字符串就是我们所想获取的值。但是，对于一些表单元素，例如复选框和单选框，使用attr()函数并不能获取最新的值（即用户选择的值）。

示例1：使用attr()获取输入框中的值

<input type="text" value="hello world" id="input" />

<script>
    var inputValue = $('#input').attr('value');
    console.log(inputValue); // 'hello world'
</script>

这里的inputValue的值是使用attr()函数获取的输入框中的值。

示例2：使用attr()获取单选框的值

<input type="radio" name="fruit" value="apple" checked> Apple
<input type="radio" name="fruit" value="orange"> Orange

<script>
    var selectedValue = $('input[name="fruit"]').attr('value');
    console.log(selectedValue); // 'apple'
</script>

在这个示例中，我们使用了attr()函数来获取选中单选框的value。然而，由于attr()函数不会返回最新的值，所以它总是返回单选框的默认值。

prop()

prop()同样也是获取HTML属性的函数，但在这里我们可以通过它来获取表单元素的值。与attr()函数不同的是，prop()函数可以获取表单元素的最新值（即用户选择的值），包括复选框和单选框。

示例1：使用prop()获取输入框中的值

<input type="text" value="hello world" id="input" />

<script>
    var inputValue = $('#input').prop('value');
    console.log(inputValue); // 'hello world'
</script>

在这个示例中，我们使用prop()函数来获取输入框中的值。与attr()函数一样，prop()函数同样返回输入框中的value属性的值。

示例2：使用prop()获取单选框的值

<input type="radio" name="fruit" value="apple" checked> Apple
<input type="radio" name="fruit" value="orange"> Orange

<script>
    var selectedValue = $('input[name="fruit"]').prop('value');
    console.log(selectedValue); // 'apple'
</script>

在这个示例中，我们使用prop()函数来获取选中的单选框的value。与attr()函数不同的是，prop()函数将返回用户选择的值（当前选中的单选框的值）。

val()

val()函数是jQuery中获取和设置表单元素值最常用的方法。它可以用于获取和设置文本框、下拉框、单选框和复选框的值。

示例1：使用val()获取输入框中的值

<input type="text" value="hello world" id="input" />

<script>
    var inputValue = $('#input').val();
    console.log(inputValue); // 'hello world'
</script>

在这个示例中，我们使用val()函数获取输入框中的值。val()函数与prop()和attr()函数的不同之处在于，它可以获取文本框、下拉框、单选框和复选框中任何的值。

示例2：使用val()获取下拉框中的值

<select id="fruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
</select>

<script>
    var selectedValue = $('#fruit').val();
    console.log(selectedValue); // 'apple'
</script>

在这个示例中，我们使用val()函数获取选择的下拉框的value。val()函数同样可以应用于单选框和复选框。

总结：

• attr()函数用于获取HTML元素的属性值，它对一些表单元素（例如：单选框和复选框）不起作用，而且不会返回最新值。
• prop()函数用于获取HTML元素的属性值，它可以获取表单元素的最新值（即用户选择的值），包括复选框和单选框。
• val()函数是jQuery中获取和设置表单元素值最常用的方法，使用val()函数可以获取和设置文本框、下拉框、单选框和复选框的值。