jquery sets attributes to elements-Front-end Q&A-php.cn

As a popular JavaScript library, jQuery has the ability to conveniently and efficiently operate DOM elements. Setting attributes for elements is also one of its commonly used functions. In this article, we will discuss several commonly used property setting methods and illustrate them with specific examples.

1. Basic attribute setting method

1. Use attr method

Useattr()method to set attributes and values for elements. For example, the following code sets theidattribute for a

element with the valuemyDiv.

$('div').attr('id', 'myDiv');

Copy after login

Use theattr()method to set multiple attributes and values at the same time, for example:

$('div').attr({ id: 'myDiv', class: 'box' });

Copy after login

2. Use the prop method

## The #prop()method is similar to theattr()method and can set the attributes and values of the element, but there are some subtle differences between them.prop()is mainly used to set the attributes of the element itself, such aschecked,selected,disabled, etc., whileattr( )is more suitable for setting non-standard attributes of elements. For example, the following code sets an input element to the selected state:

$('input[type="checkbox"]').prop('checked', true);

Copy after login

3. Use the data method

data()method to set data attributes for an element. Its syntax is very simple, you only need to pass the attribute to be set and the corresponding value as parameters. For example, the following code sets thedata-valueattribute of a

element to100:

$('div').data('value', 100);

Copy after login

4. Using attr and data methods to set custom attributes

Use the

attr()anddata()methods to also set custom attributes, which end withdata-starts. For example, the following code sets the custom attributesdata-countanddata-pricefor a

element:

$('div').attr('data-count', 10); $('div').data('price', 100);

Copy after login

two , Attribute acquisition method

In addition to setting the attributes of the element, you can also use jQuery to obtain the attribute value of the element. Here, we introduce three methods of obtaining attributes:

1. Use the attr method

Use the

attr()method to obtain the attribute value of the element. For example, the following code obtains theidattribute value of a

element:

var idValue = $('div').attr('id'); console.log(idValue); // 输出 'myDiv'

Copy after login

2. Use the prop method

Similarly , you can also use the

prop()method to get the attribute value of an element. For example, the following code gets the selected status of a checkbox element:

var isChecked = $('input[type="checkbox"]').prop('checked'); console.log(isChecked); // 输出 true 或 false

Copy after login

3. Use the data method

Use the

data()method to obtain the data attribute value of an element. For example, the following code obtains thedata-valueattribute value of a

element. ：

var dataValue = $('div').data('value'); console.log(dataValue); // 输出 100

Copy after login

3. Summary

This article introduces jQuery’s method of setting attributes for elements, including basic attribute setting methods and common attribute acquisition methods. Among them, the

attr()method is suitable for setting non-standard attributes, theprop()method is suitable for setting the attributes of the element itself, and thedata()method is suitable for setting and Get the data attribute of the element. Proficient use of these methods can make it easier for us to manipulate DOM elements and improve development efficiency.

The above is the detailed content of jquery sets attributes to elements. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：jquery json array modification Next article：jquery removes a class

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn