jquery 改变DOM元素值的操作

在网页开发过程中，我们通常需要对 DOM 元素进行增删改查操作。其中，改变 DOM 元素的值是一项常见的操作。Jquery 作为一个流行的 javascript 库，提供了丰富的 api 来改变 DOM 元素的值。

本文将介绍 jQuery 如何改变 DOM 值，包括如何获取元素的值、如何修改元素的值、以及如何通过链式调用操作多个元素。

获取元素的值

在 jQuery 中，我们可以通过选择器来获取 DOM 元素，然后通过 API 来获取元素的值。以下是一些常见的获取元素值的 API：

1、val()：获取 input、select 或 textarea 元素的值。
例如，获取一个文本框的值：

var value = $('#input-id').val();

2、text()：获取元素的文本内容。
例如，获取一个 p 元素的文本内容：

var text = $('p').text();

3、html()：获取元素的 HTML 内容。
例如，获取一个 div 元素的 HTML 内容：

var html = $('div').html();

4、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：

1、val()：设置 input、select 或 textarea 元素的值。
例如，将一个文本框的值设置为 "hello"：

$('#input-id').val('hello');

2、text()：设置元素的文本内容。
例如，将一个 p 元素的文本内容设置为 "world"：

$('p').text('world');

3、html()：设置元素的 HTML 内容。
例如，将一个 div 元素的 HTML 内容设置为 "<h1>title</h1>"：

$('div').html('<h1>title</h1>');

4、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 库和框架奠定基础。