JQuery的attr 与 val区别

当处理HTML元素属性时，我们通常需要使用attr()和val()方法。这两个方法似乎有些相似，但实际上有很大的区别。下面我们将详细讲解它们的区别。

1. attr()方法

attr()方法可以获取或设置元素的属性值。例如，我们可以使用以下代码获取<a>标签的href属性值：

var hrefValue = $('a').attr('href');

接下来我们将设置<a>标签的href属性为"http://example.com"：

$('a').attr('href', 'http://example.com');

attr()方法接受两个参数，第一个参数是要操作的属性名称，第二个参数是要设置的属性值。如果只传递一个参数，则会返回属性的值。

2. val()方法

val()方法是用于获取或设置表单元素的值。例如，我们可以使用以下代码获取<input>标签的值：

var inputValue = $('input').val();

接下来我们将设置<input>标签的值为"John Doe"：

$('input').val('John Doe');

与attr()方法不同，val()方法只接受一个参数，即要设置的值。如果没有参数，它将返回当前元素的值。

3. 区别

attr()和val()方法之间的主要区别是它们操作的元素类型不同。attr()方法用于操作所有元素的通用属性，例如href、src、title等。另一方面，val()方法主要用于操作表单元素的值，例如<input>、<select>、<textarea>等。

举个例子，如果想要设置<img>标签的src属性，可以使用attr()方法：

$('img').attr('src', 'image.jpg');

如果想要获取<select>标签当前选择的选项的值，可以使用val()方法：

var selectValue = $('select').val();

总的来说，attr()和val()方法是jQuery中两个重要的元素属性操作方法。熟练掌握它们的使用方法可以帮助我们更高效地操作HTML元素。