在网页开发过程中，我们通常需要对 dom 元素进行增删改查操作。其中，改变 dom 元素的值是一项常见的操作。jquery 作为一个流行的 javascript 库，提供了丰富的 api 来改变 dom 元素的值。
本文将介绍 jQuery 如何改变 DOM 值，包括如何获取元素的值、如何修改元素的值、以及如何通过链式调用操作多个元素。
获取元素的值
在 jQuery 中，我们可以通过选择器来获取 DOM 元素，然后通过 API 来获取元素的值。以下是一些常见的获取元素值的 API：
- val()：获取 input、select 或 textarea 元素的值。
例如，获取一个文本框的值：
var value = $('#input-id').val();- text()：获取元素的文本内容。
例如，获取一个 p 元素的文本内容：
var text = $('p').text();- html()：获取元素的 HTML 内容。
例如，获取一个 div 元素的 HTML 内容：
var html = $('div').html();- attr()：获取元素的属性值。
例如，获取一个 img 元素的 src 属性：
var src = $('img').attr('src');以上 API 还可以接受一个函数作为参数，用来自定义获取元素的值。例如：
var value = $('input').val(function(index, value) {
return value.toUpperCase();
});当获取多个元素的值时，可以使用 each() 函数来遍历元素并获取它们的值。例如，获取所有文本框的值：
$('input[type="text"]').each(function() {
console.log($(this).val());
});修改元素的值
获取元素的值只是改变 DOM 元素的一部分操作，更常见的是修改 DOM 元素的值。以下是一些常见的修改 DOM 元素的 API：
- val()：设置 input、select 或 textarea 元素的值。
例如，将一个文本框的值设置为 "hello"：
$('#input-id').val('hello');- text()：设置元素的文本内容。
例如，将一个 p 元素的文本内容设置为 "world"：
$('p').text('world');- html()：设置元素的 HTML 内容。
例如，将一个 div 元素的 HTML 内容设置为 "<h1>title</h1>"：
$('div').html('<h1>title</h1>');- attr()：设置元素的属性值。
例如，将一个 img 元素的 src 属性设置为 "image.jpg"：
$('img').attr('src', 'image.jpg');对多个元素进行操作
现在，我们已经了解了如何获取和修改单个 DOM 元素的值。但通常情况下，我们需要对多个元素进行相同或不同的操作。jQuery 提供了链式调用和过滤器来实现对多个元素的操作。
使用链式调用
jQuery 的链式调用使我们可以在一条语句中对多个元素进行操作。例如，将所有 h1 元素的背景色修改为红色：
$('h1').css('background-color', 'red');将所有文本框的值设置为空：
$('input[type="text"]').val('');同时修改多个属性：
$('img').attr({
'src': 'image.jpg',
'alt': 'image'
});使用过滤器
过滤器是 jQuery 提供的一种强大的选择器，可以选择一组元素中的子集。例如，选择所有 class 为 "active" 的元素：
$('.active')选择第一个 p 元素：
$('p:first')选择前三个 div 元素：
$('div:lt(3)')可以将过滤器与 API 结合使用，对选择的元素进行操作。例如，将 class 为 "highlight" 的文本框的值设置为空：
$('input.highlight:text').val('');以上例子展示了不同的过滤器用法，通过熟悉过滤器的使用方法，可以灵活地选择需要操作的元素。
总结
通过本文的介绍，我们学习了 jQuery 如何获取和修改 DOM 元素的值，以及如何通过链式调用和过滤器实现对多个元素的操作。这些技巧可以让我们更快捷地操作 DOM 元素，提高开发效率。同时，学习 jQuery 的操作方法也可以为学习其他 JavaScript 库和框架奠定基础。
