jquery 图片和文字

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，你可以轻松地操作图片和文字。

类型

图片操作：包括加载、显示、隐藏、切换、动画等。
文字操作：包括文本的获取、设置、替换、追加、删除等。

应用场景

图片轮播：使用 jQuery 可以轻松实现图片的自动轮播效果。
动态内容更新：通过 Ajax 获取数据后，使用 jQuery 更新页面上的文字或图片。
交互式表单：使用 jQuery 可以方便地处理表单验证和提交。

示例代码

图片操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 图片操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="myImage" src="image1.jpg" alt="图片">
    <button id="changeImage">切换图片</button>

    <script>
        $(document).ready(function() {
            $('#changeImage').click(function() {
                $('#myImage').toggleClass('hidden');
                if ($('#myImage').hasClass('hidden')) {
                    $('#myImage').attr('src', 'image2.jpg');
                } else {
                    $('#myImage').attr('src', 'image1.jpg');
                }
            });
        });
    </script>
</body>
</html>

文字操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 文字操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p id="myText">Hello, World!</p>
    <button id="changeText">更改文字</button>

    <script>
        $(document).ready(function() {
            $('#changeText').click(function() {
                $('#myText').text('你好，世界！');
            });
        });
    </script>
</body>
</html>