Home >Web Front-end >Front-end Q&A >How to query attribute value with jquery
How to query attribute value with jquery
- 青灯夜游Original
- 2022-04-20 18:30:406551browse
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")".
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"
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>
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("属性名")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> 
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("属性名")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>
[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!