jquery动态修改div背景图片

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松地操作 DOM 元素，包括动态修改元素的样式。

类型

jQuery 的操作类型包括选择元素、修改样式、添加事件处理程序、动画效果等。

应用场景

动态网页设计：通过 jQuery 可以动态修改网页内容，提升用户体验。
表单验证：使用 jQuery 可以方便地进行表单验证。
动画效果：jQuery 提供了丰富的动画效果，可以增强网页的视觉效果。

示例代码

以下是一个使用 jQuery 动态修改 div 背景图片的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 修改背景图片</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myDiv {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="myDiv">这是一个 div 元素</div>
    <button id="changeBgBtn">修改背景图片</button>

    <script>
        $(document).ready(function() {
            $('#changeBgBtn').click(function() {
                $('#myDiv').css('background-image', 'url(https://example.com/new-background.jpg)');
            });
        });
    </script>
</body>
</html>