jquery 怎么改变图片

jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 AJAX 交互等操作，在网页开发中，我们经常需要使用 jQuery 来改变图片，例如切换图片、调整图片大小、添加图片边框等，本文将详细介绍如何使用 jQuery 来改变图片。

（图片来源网络，侵删）

1、引入 jQuery 库

在使用 jQuery 之前，我们需要先引入 jQuery 库，可以通过以下两种方式之一来引入：

方法一：下载 jQuery 库文件，然后将文件放到项目的 js 文件夹中，并在 HTML 文件中引用：

<script src="js/jquery3.6.0.min.js"></script>

方法二：通过 CDN 引入 jQuery 库：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、基本的图片操作

在引入 jQuery 库之后，我们可以使用以下方法来改变图片：

修改图片的 src 属性：这是最基本的图片操作，可以用来切换图片，我们可以为一个按钮添加点击事件，当点击按钮时，切换图片的 src 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery 改变图片示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="image1.jpg" alt="图片1">
    <button id="changeImage">切换图片</button>
    <script>
        $("#changeImage").click(function() {
            $("#myImage").attr("src", "image2.jpg");
        });
    </script>
</body>
</html>

修改图片的宽度和高度：可以使用 width() 和 height() 方法来修改图片的宽度和高度，我们可以为一个按钮添加点击事件，当点击按钮时，修改图片的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery 改变图片示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="image1.jpg" alt="图片1">
    <button id="resizeImage">调整图片大小</button>
    <script>
        $("#resizeImage").click(function() {
            $("#myImage").width(200).height(200);
        });
    </script>
</body>
</html>

添加图片边框：可以使用 css() 方法来为图片添加边框，我们可以为一个按钮添加点击事件，当点击按钮时，为图片添加边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery 改变图片示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="image1.jpg" alt="图片1">
    <button id="addBorder">添加边框</button>
    <script>
        $("#addBorder").click(function() {
            $("#myImage").css("border", "1px solid red");
        });
    </script>
</body>
</html>

3、高级的图片操作

除了基本的图片操作之外，jQuery 还提供了一些高级的图片操作功能，加载完成后执行回调函数、创建图片缩略图等，这些高级功能可以帮助我们更好地控制图片的显示效果，以下是一些高级图片操作的示例：

加载完成后执行回调函数：可以使用 load() 方法为图片添加加载完成后的回调函数，我们可以为一个按钮添加点击事件，当点击按钮时，加载一张新图片，并在加载完成后执行回调函数。

<substrate:collapse> <!DOCTYPE html><html lang='en'><head><meta charset='utf8'><meta name='viewport' content='width=devicewidth, initialscale=1'><title>jQuery 加载完成后执行回调函数示例</title><script src='https://code.jquery.com/jquery3.6.0.min.js'></script></head><body><img id='myImage' src='image1.jpg' alt='图片1'><button id='loadImage'>加载新图片</button><script>$('#loadImage').click(function(){ var newSrc = 'image2.jpg'; // 新图片的路径 $('#myImage').attr('src', newSrc).load(function(){ alert('图片加载完成'); // 加载完成后执行的回调函数 });});</script></body></html></substrate:collapse>```

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/360394.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。