📅 最后修改于: 2023-12-03 15:32:12.607000 🧑 作者: Mango
在网页开发中，图像大小的调整是一项常见的需求。而 jQuery 提供了非常方便的方法，使得图像大小调整变得异常简单。
在学习本教程之前，需要掌握以下知识：
如果您还不会上述知识，请先学习相关资料。
使用 jQuery 调整图像大小的语法如下：
$(selector).css("width", value);
$(selector).css("height", value);
其中，selector 为需要调整大小的元素，value 为调整后的大小值，可以使用像素、百分比、em 等单位。
下面是一个简单的示例，我们将使用 jQuery 来调整图片的大小：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
#img {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<img id="img" src="https://cdn.pixabay.com/photo/2019/09/25/14/12/woodpecker-4507942_960_720.jpg" alt="木制家具上的啄木鸟">
<script type="text/javascript">
$(document).ready(function(){
$("#img").click(function(){
if ($("#img").css("width") == "300px") {
$("#img").css("width", "400px");
} else {
$("#img").css("width", "300px");
}
});
});
</script>
</body>
</html>
在上述示例中，我们首先给图片设置了一个默认的宽度 300px。然后，在 jQuery 事件监听器中，我们通过点击图片的方式来切换图片的宽度。
至此，我们已经完成了 jQuery 图片大小调整的使用示例。希望这个小小的示例能够对您在开发中有所帮助。