How to query attribute value with jquery-Front-end Q&A-php.cn

How to query attribute value with jquery

青灯夜游

Release： 2022-04-20 18:32:52

Original

6512 people have browsed it

Jquery method of querying attribute values: 1. Use attr() to return the attribute value of the selected element, the syntax is "$(selector).attr("Attribute Name")"; 2. Use prop( ), can return the attribute value of the first matching element, the syntax is "$(selector).prop("property name")".

How to query attribute value with jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Attributes can provide some additional information for HTML tags, or modify HTML tags. Attributes need to be added in the start tag, and the syntax format is:

attr="value"

Copy after login

attr represents the attribute name, and value represents the attribute value. Attribute values must be surrounded by double quotes " " or single quotes ' '.

Note that although both double quotes and single quotes can surround attribute values, for the sake of standardization and professionalism, please use double quotes as much as possible.

A tag can have no attributes or one or more attributes.

Example:

<p id="user-info" class="color-red"><p>

Copy after login

SoHow to query attribute values using jquery?

In jquery, you can use two methods to query attribute values

attr()
prop ()

Both methods can get or set the HTML attributes of the element

1. Use the attr() method to query the attribute value

attr() method can return the attribute value of the selected element

Syntax:

$(selector).attr("属性名")

Copy after login

Example: Get the img src attribute value, which is the image address

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					var img=$("img").attr("src");
					alert("src属性值为： "+img)
				});
			});
		</script>
	</head>

	<body>
		<img  id="img" src="img/1.jpg"    style="max-width:90%"/ alt="How to query attribute value with jquery" ><br><br><br>
		<button>获取img src属性值（图片地址）</button>
	</body>

</html>

Copy after login

How to query attribute value with jquery

2. Use the prop() method to query the attribute value

The prop() method can return the attribute value of the selected element, and will return the An attribute value that matches the element.

Syntax:

$(selector).prop("属性名")

Copy after login

Example: Get the img width attribute value, which is the image width

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					var width=$("img").prop("width");
					alert("图片宽度为： "+width)
				});
			});
		</script>
	</head>

	<body>
		<img  id="img" src="img/1.jpg"    style="max-width:90%"/ alt="How to query attribute value with jquery" ><br><br><br>
		<button>获取img width属性值</button>
	</body>

</html>

Copy after login

How to query attribute value with jquery

[Recommended Learning: jQuery video tutorial, web front-end video】

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