Home >Web Front-end >Front-end Q&A >jquery changes dom value
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:
For example, get the value of a text box:
var value = $('#input-id').val();
For example, get the text content of a p element:
var text = $('p').text();
For example, to get the HTML content of a div element:
var html = $('div').html();
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:
For example, set the value of a text box to "hello":
$('#input-id').val('hello');
For example, to set the text content of a p element to "world":
$('p').text('world');
For example, set the HTML content of a div element to "4a249f0d628e2318394fd9b75b4636b1title473f0a7621bec819994bb5020d29372a":
$('div').html('<h1>title</h1>');
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!