jquery入门点击更改图片src

最新推荐文章于 2022-07-20 16:38:42 发布

msklearn

最新推荐文章于 2022-07-20 16:38:42 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/Canon_M/article/details/88091482

Jquery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery实现点击事件来更改图片的src属性，基础教程适合初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>习题5</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 500px;
			height: 400px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="box">
		<input type="submit" value="李亦非" id="btn1">
		<input type="submit" value="李若彤" id="btn2">
		<input type="submit" value="黎姿" id="btn3">
		<img src="" alt="" width="400px" height="300px">
	</div>
	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			$("#btn1").click(function(){
				$("img").attr('src',"images/1.jpg"); 
			});
			$("#btn2").click(function(){
				$("img").attr('src',"images/3.jpg"); 
			});
			$("#btn3").click(function(){
				$("img").attr('src',"images/2.jpg"); 
			});
		});

	</script>

</body>
</html>

注意：我的jquery放在同级目录下，版本为1.11.1

照片放在同级images文件夹下