How to use attribute query in jquery

jQuery is a widely used JavaScript library for manipulating HTML and CSS DOM and provides many useful functions. One such feature is to use attribute queries to get or set an element's attribute value.

Attribute query is a selector that accepts an attribute name and an optional attribute value as parameters. It will return all elements with the specified attribute. The following is a simple example showing how to use jQuery's attribute selector:

// 获取所有带有'data-role'属性的div元素
var divs = $('div[data-role]');

// 获取所有标签名为'a', 并且target属性值等于'_blank'的a元素
var links = $('a[target="_blank"]');

In the above two examples, the $() function is used to create a jQuery object, and the parameter passed is a CSS selector. Among these CSS selectors, attribute selectors are defined using square brackets. For example, [data-role] matches all elements with the 'data-role' attribute, while [target="_blank"] will only match elements with a target attribute value equal to '_blank'.

You can use the following operators and values ​​to perform attribute queries:

• =: Match elements with equal values ​​of the specified attributes. For example, [target="_blank"] represents an element whose target attribute value is '_blank'.
• !=: Matches elements whose value is not equal to the specified attribute. For example, [type!="text"] means all elements except input boxes of type 'text'.
• ^=: Matches elements whose specified attribute value starts with the given value. For example, [href^="https://"] will match all hyperlinks starting with 'https://'.
• $=: Matches elements whose specified attribute value ends with the given value. For example, [href$=".pdf"] will match links to all PDF files.
• *=: Matches elements whose specified attribute value contains the given string. For example, [class*="active"] will match all elements with class 'active'.

In addition to using attribute selectors, you can also use the .attr() method to get or set the value of an element's attribute. This method accepts a property name and optional new property value as parameters. If no new property value is specified, the current property value is returned.

The following is an example that demonstrates how to use the .attr() method to get and set the attribute value of an element:

// 获取第一个图片元素的alt属性值
var altText = $('img:first').attr('alt');

// 设置第一个图片元素的alt属性值为'图片描述'
$('img:first').attr('alt', '图片描述');

In this example, the attr() method is used to get or set the first The alt attribute of an image element. First, we select the first image element using the selector $('img:first'). Then, use the .attr('alt') method to get its alt attribute value and save it in the variable altText. Next, we pass a new attribute value 'image description' to the .attr() method to set the new alt attribute value.

In short, attribute query is one of the most commonly used selectors in jQuery, used to select elements with specific attribute values. In addition, the .attr() method can also be used to get or set the attribute value of an element. These functions are very practical and can greatly simplify the operation of documents, making JavaScript programming easier and more convenient.

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