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 元素的 class="lazy" data-src 属性：

var class="lazy" data-src = $('img').attr('class="lazy" data-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 元素的 class="lazy" data-src 属性设置为 "image.jpg"：

$('img').attr('class="lazy" data-src', 'image.jpg');

对多个元素进行操作

现在，我们已经了解了如何获取和修改单个 DOM 元素的值。但通常情况下，我们需要对多个元素进行相同或不同的操作。jQuery 提供了链式调用和过滤器来实现对多个元素的操作。

使用链式调用

jQuery 的链式调用使我们可以在一条语句中对多个元素进行操作。例如，将所有 h1 元素的背景色修改为红色：

$('h1').css('background-color', 'red');

将所有文本框的值设置为空：

$('input[type="text"]').val('');

同时修改多个属性：

$('img').attr({
  'class="lazy" data-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 库和框架奠定基础。

以上就是jquery 改变dom值的详细内容，更多请关注编程网其它相关文章！