最后使用jQuery获取和附加元素

基础概念

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

类型

选择器：用于选择 DOM 元素，如 $('#id')、$('.class')、$('tag') 等。
方法：用于操作 DOM 元素，如 .append()、.prepend()、.remove() 等。
事件处理：用于绑定和触发事件，如 .click()、.on() 等。

应用场景

DOM 操作：动态添加、删除或修改页面元素。
事件处理：为元素绑定点击、滚动等事件。
动画效果：实现平滑的页面过渡和动画效果。
Ajax 交互：与服务器进行异步数据交换。

示例代码

以下是一个使用 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>
</head>
<body>
    <div id="container">
        <p>这是一个段落。</p>
    </div>
    <button id="addBtn">添加新段落</button>

    <script>
        $(document).ready(function() {
            $('#addBtn').click(function() {
                // 创建一个新的段落元素
                var newParagraph = $('<p>这是一个新添加的段落。</p>');
                // 将新段落附加到容器中
                $('#container').append(newParagraph);
            });
        });
    </script>
</body>
</html>

参考链接

常见问题及解决方法

问题：为什么 jQuery 代码没有生效？

原因：

jQuery 库未正确加载：确保 jQuery 库的路径正确，并且在你的代码之前加载。
选择器错误：检查选择器是否正确，确保能够匹配到目标元素。
代码执行顺序：确保 jQuery 代码在 DOM 元素加载完成后执行，可以使用 $(document).ready() 或 $(function() {})。

解决方法：