How to change pictures by clicking in jquery

青灯夜游
Release: 2022-04-21 15:02:30
Original
6246 people have browsed it

Implementation method: 1. Use click() to bind the click event to the button element and set the processing function. The syntax is "button element.click(function(){});"; 2. In the processing function , use attr() to modify the image address, the syntax is "$("img").attr("src","new image address")".

How to change pictures by clicking in jquery

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

jquery method to implement click-to-change pictures:

Implementation ideas:

  • Use click() to bind the click event to the button element and set the event processing function

  • In the processing function, use attr() to modify the image address (i.e. modify the img element src Attribute value)

Implementation code:Click the button to change the picture

<!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() {
					$("img").attr("src","img/1.jpg");
				});
			});
		</script>
	</head>

	<body>
		<img  src="img/3.jpg"    style="max-width:90%" / alt="How to change pictures by clicking in jquery" ><br><br>
		<button>点击按钮,更换图片</button>
	</body>
</html>
Copy after login

How to change pictures by clicking in jquery

##Description:

How to change pictures by clicking in jquery Tag defines an image in an HTML page.

  • How to change pictures by clicking in jquery tags have two required attributes: src and alt.

  • The src attribute of theHow to change pictures by clicking in jquery tag is required and specifies the URL of the image.

attr() method can set the attribute value of the specified element. When this method is used to modify the src attribute of the How to change pictures by clicking in jquery tag, the image is changed.

[Recommended learning:

jQuery video tutorial, web front-end video]

The above is the detailed content of How to change pictures by clicking in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!