jquery 替换图片

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，可以使用 .replaceWith() 或 .replaceAll() 方法来替换图片。

类型

.replaceWith()：用新的 HTML 内容替换匹配的元素。
.replaceAll()：用匹配的元素替换选择的元素。

应用场景

假设你有一个网页，其中有一些图片需要根据某些条件动态替换。例如，根据用户的点击事件替换图片。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 替换图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Replace Image</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="old-image.jpg" alt="Old Image">
    <button id="replaceButton">Replace Image</button>

    <script>
        $(document).ready(function() {
            $('#replaceButton').click(function() {
                $('#myImage').replaceWith('<img src="new-image.jpg" alt="New Image">');
            });
        });
    </script>
</body>
</html>