How to get the attribute value of tag in jquery

In recent years, Web front-end has become a very hot industry, and jQuery, as an excellent JavaScript library, is widely used in all aspects of Web front-end development. When using jQuery, getting tag attribute values ​​is the basics of basics. Next, let’s take a look at several ways jQuery can get the value of a tag attribute.

1. attr() method

attr() method is a common method in jQuery. It is used to get or set the attribute value of a specified element. The following is the basic syntax of the attr() method:

$(selector).attr(attribute)

Among them, selector represents the specified element, and attribute represents the attribute name to be obtained or set. If you want to get the value of an attribute of a specified element, you can pass the attribute name in the attribute parameter. For example, if we want to get the class attribute value of a certain div element, we can write it like this:

var className = $('div').attr('class');

In the above code, $('div') means to select all div elements, and attr('class') means Get the class attribute value of these elements. If you want to set the attribute value of an element, you need to pass in the attribute name and attribute value in the attribute parameter. For example, if we want to change the src attribute value of an img element to newImg.png, we can write it like this:

$('img').attr('src', 'newImg.png');

When using the attr() method to obtain the tag attribute value, you need to pay attention to the following points:

• If there are multiple elements matched by the selector, only the attribute value of the first element will be returned.
• If the property does not exist, return undefined.
• If the property name is written incorrectly, undefined will also be returned.

2. prop() method

The prop() method is similar to the attr() method and is also used to get or set the attribute value of the specified element. The difference is that the prop() method is mainly used to get or set some element-specific attributes, such as checked, selected, etc. The following is the basic syntax of the prop() method:

$(selector).prop(property)

Among them, selector represents the specified element, and property represents the attribute name to be obtained or set. If you want to get the value of a property of a specified element, you can pass the property name in the property parameter. For example, if we want to get the checked attribute value of a checkbox element, we can write like this:

var isChecked = $('input[type=checkbox]').prop('checked');

In the above code, $('input[type=checkbox]') means to select all checkbox elements, prop( 'checked') means to get the checked attribute value of these elements. If you want to set the attribute value of an element, you need to pass in the attribute name and attribute value in the property parameter. For example, if we want to set the checked attribute value of a checkbox element to true, we can write it like this:

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

When using the prop() method to obtain the label attribute value, you need to pay attention to the following points:

• If there are multiple elements matched by the selector, only the attribute value of the first element will be returned.
• If the property does not exist, return undefined.
• If the property name is written incorrectly, undefined will also be returned.

3. data() method

The data() method is another common method in jQuery to get the value of the tag attribute. It is used to get the customization of the specified element. Data attributes. The following is the basic syntax of the data() method:

$(selector).data(key)

Among them, selector represents the specified element, and key represents the name of the custom data attribute to be obtained. For example, if we want to get the value of the custom data attribute data-id of a certain div element, we can write it like this:

<div data-id="123"></div>

var dataId = $('div').data('id');

In the above code, $('div') means to select all div elements, data ('id') means getting the value of the custom data attribute data-id of these elements. If you want to set a custom data attribute of an element, you need to pass in the attribute name and attribute value in the data() method. For example, if we want to set the custom data attribute data-name of a div element to myName, we can write it like this:

$('div').data('name', 'myName');

When using the data() method to obtain the label attribute value, you need to pay attention to the following points:

• If there are multiple elements matched by the selector, only the custom data attribute value of the first element will be returned.
• If the custom data attribute does not exist, undefined is returned.
• If the custom data attribute name is written incorrectly, undefined will also be returned.

Conclusion

The above are several common methods for jQuery to obtain tag attribute values. In actual development, we can choose a suitable method according to actual needs. It should be noted that different methods are suitable for different attribute types, and we need to choose according to the actual situation.

The above is the detailed content of How to get the attribute value of tag in jquery. For more information, please follow other related articles on the PHP Chinese website!