Can jquery get the src attribute of an image?-Front-end Q&A-php.cn

Can jquery get the src attribute of an image?

青灯夜游

Release： 2022-12-16 16:27:16

Original

3211 people have browsed it

jquery can get the src attribute of the image. Obtaining method: 1. Use attr() to get the src attribute of the img picture element, the syntax is "$(img).attr("src")"; 2. Use prop() to get the first matching img picture element src attribute, the syntax is "$(img).prop("src")".

Can jquery get the src attribute of an image?

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

In jquery, you can use two methods to get the attributes of an element:

attr()
prop()

Method 1. Use attr() to get the src attribute of the image

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

Syntax:

元素对象.attr("属性名")

Copy after login

You only need to get the specified img element object and use the attr("src") method. You can get the src attribute of the image

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

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

	<body>
		<img  id="img" src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery get the src attribute of an image?" ><br><br>
		<button>获取img src属性值（图片地址）</button>
	</body>

</html>

Copy after login

Can jquery get the src attribute of an image?

2. Use prop() to get the src attribute of the image

The prop() method can return the attribute value of the selected element, and will return the attribute value of the first matching element.

Syntax:

元素对象.prop("属性名")

Copy after login

You only need to get the specified img element object and use the prop("src") method to obtain it The src attribute of the image

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

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

	<body>
		<img  id="img" src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery get the src attribute of an image?" ><br><br>
		<button>获取img src属性值（图片地址）</button>
	</body>

</html>

Copy after login

Can jquery get the src attribute of an image?

[Recommended learning ：jQuery video tutorial、web front-end video】

The above is the detailed content of Can jquery get the src attribute of an image?. For more information, please follow other related articles on the PHP Chinese website!