In the process of web development, we usually need to add, delete, modify and check DOM elements. Among them, changing the value of DOM elements is a common operation. jQuery, a popular JavaScript library, provides a rich API to change the value of DOM elements.

This article will introduce how jQuery changes DOM values, including how to get the value of an element, how to modify the value of an element, and how to operate multiple elements through chain calls.

Get the value of the element

In jQuery, we can get the DOM element through the selector, and then get the value of the element through the API. The following are some common APIs for getting element values:

1. val(): Get the value of an input, select, or textarea element.

For example, get the value of a text box:

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

2. text(): Get the text content of the element.

For example, get the text content of a p element:

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

3. html(): Get the HTML content of the element.

For example, to get the HTML content of a div element:

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

4. attr(): Get the attribute value of the element.

For example, to get the src attribute of an img element:

var src = $('img').attr('src');

The above API can also accept a function as a parameter to customize the value of the element. For example:

var value = $('input').val(function(index, value) { return value.toUpperCase(); });

When getting the values of multiple elements, you can use the each() function to traverse the elements and get their values. For example, get the value of all text boxes:

$('input[type="text"]').each(function() { console.log($(this).val()); });

Modify the value of the element

Getting the value of the element is only part of the operation of changing the DOM element. The more common one is to modify the value of the DOM element. Here are some common APIs for modifying DOM elements:

1. val(): Sets the value of an input, select, or textarea element.

For example, set the value of a text box to "hello":

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

2. text(): Set the text content of the element.

For example, to set the text content of a p element to "world":

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

3. html(): Set the HTML content of the element.

For example, set the HTML content of a div element to "

title

$('div').html('
title
');

4. attr(): Set the attribute of the element value.

For example, set the src attribute of an img element to "image.jpg":

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

Operation on multiple elements

Now, we have understood Learn how to get and modify the value of a single DOM element. But usually, we need to perform the same or different operations on multiple elements. jQuery provides chained calls and filters to operate on multiple elements.

Using chained calls

JQuery's chained calls allow us to operate on multiple elements in one statement. For example, change the background color of all h1 elements to red:

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

Set the value of all text boxes to empty:

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

Modify multiple attributes at the same time:

$('img').attr({ 'src': 'image.jpg', 'alt': 'image' });

Using filters

A filter is a powerful selector provided by jQuery that can select a subset of a set of elements. For example, select all elements with class "active":

$('.active')

Select the first p element:

$('p:first')

Select the first three div elements:

$('div:lt(3)')

You can filter The handler is used in combination with the API to operate on the selected elements. For example, set the value of the text box with class "highlight" to empty:

$('input.highlight:text').val('');

The above examples show different filter usages. By familiarizing yourself with the use of filters, you can flexibly select the elements that need to be operated. .

Summary

Through the introduction of this article, we have learned how jQuery obtains and modifies the value of DOM elements, and how to operate multiple elements through chain calls and filters. These techniques allow us to operate DOM elements more quickly and improve development efficiency. At the same time, learning how to operate jQuery can also lay the foundation for learning other JavaScript libraries and frameworks.

The above is the detailed content of jquery changes dom value. For more information, please follow other related articles on the PHP Chinese website!