jQuery DOM操作

理论讲解

什么是DOM操作？

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口，它将文档表示为树形结构，其中每个节点都是文档的一个部分。DOM操作是指对文档树中的节点进行创建、修改、删除、查询等操作的过程。

jQuery提供了丰富的DOM操作方法，使开发者能够更简洁、更高效地操作HTML文档结构。

jQuery DOM操作的分类

内容操作：修改元素的文本内容和HTML内容
属性操作：获取和设置元素的属性
CSS操作：修改元素的样式
元素操作：创建、添加、删除和替换元素
遍历操作：遍历DOM树中的元素

内容操作

内容操作方法用于修改元素的文本内容和HTML内容。

方法	描述	示例
text()	获取或设置元素的文本内容	$('p').text('Hello')
html()	获取或设置元素的HTML内容	$('div').html('<p>Hello</p>')
val()	获取或设置表单元素的值	$('input').val('John')

属性操作

属性操作方法用于获取和设置元素的属性。

方法	描述	示例
attr()	获取或设置元素的属性	$('img').attr('src', 'image.jpg')
removeAttr()	删除元素的属性	$('a').removeAttr('target')
prop()	获取或设置元素的属性（对于布尔属性）	$('input[type="checkbox"]').prop('checked', true)
removeProp()	删除元素的属性	$('div').removeProp('disabled')

CSS操作

CSS操作方法用于修改元素的样式。

方法	描述	示例
css()	获取或设置元素的CSS属性	$('p').css('color', 'red')
addClass()	为元素添加一个或多个类	$('div').addClass('highlight')
removeClass()	从元素中删除一个或多个类	$('div').removeClass('highlight')
toggleClass()	切换元素的类（如果存在则删除，不存在则添加）	$('div').toggleClass('highlight')
hasClass()	检查元素是否包含指定的类	$('div').hasClass('highlight')

元素操作

元素操作方法用于创建、添加、删除和替换元素。

创建元素

// 创建元素
const $p = $("<p>这是一个新段落</p>");
const $div = $("<div><h3>标题</h3><p>内容</p></div>");
                    

添加元素

方法	描述	示例
append()	在元素内部的末尾添加内容	$('div').append('<p>末尾内容</p>')
prepend()	在元素内部的开头添加内容	$('div').prepend('<p>开头内容</p>')
after()	在元素外部的后面添加内容	$('div').after('<p>后面内容</p>')
before()	在元素外部的前面添加内容	$('div').before('<p>前面内容</p>')

删除元素

方法	描述	示例
remove()	删除元素及其所有子元素	$('p').remove()
empty()	删除元素的所有子元素	$('div').empty()
detach()	删除元素但保留其数据和事件	$('p').detach()

替换元素

方法	描述	示例
replaceWith()	用新内容替换元素	$('p').replaceWith('<div>新内容</div>')
replaceAll()	用元素替换所有匹配的元素	$('<div>新内容</div>').replaceAll('p')

遍历操作

遍历操作方法用于遍历DOM树中的元素。

方法	描述	示例
children()	获取元素的直接子元素	$('div').children()
parent()	获取元素的直接父元素	$('p').parent()
parents()	获取元素的所有祖先元素	$('p').parents()
siblings()	获取元素的所有兄弟元素	$('p').siblings()
find()	在元素的后代中查找匹配的元素	$('div').find('p')
each()	遍历匹配的元素集合	$('p').each(function(index, element) { ... })

代码示例

示例1：内容操作

<!DOCTYPE html>
<html>
<head>
    <title>jQuery内容操作示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 设置文本内容
            $("#set-text").click(function() {
                $("#text-example").text("这是新的文本内容");
            });
            
            // 获取文本内容
            $("#get-text").click(function() {
                const text = $("#text-example").text();
                alert("文本内容：" + text);
            });
            
            // 设置HTML内容
            $("#set-html").click(function() {
                $("#html-example").html("<h3>新标题</h3><p>这是新的HTML内容</p>");
            });
            
            // 获取HTML内容
            $("#get-html").click(function() {
                const html = $("#html-example").html();
                alert("HTML内容：" + html);
            });
            
            // 设置表单值
            $("#set-val").click(function() {
                $("#input-example").val("John Doe");
            });
            
            // 获取表单值
            $("#get-val").click(function() {
                const val = $("#input-example").val();
                alert("表单值：" + val);
            });
        });
    </script>
</head>
<body>
    <h2>jQuery内容操作示例</h2>
    
    <h3>文本操作</h3>
    <p id="text-example">这是初始文本内容</p>
    <button id="set-text">设置文本内容</button>
    <button id="get-text">获取文本内容</button>
    
    <h3>HTML操作</h3>
    <div id="html-example">
        <p>这是初始HTML内容</p>
    </div>
    <button id="set-html">设置HTML内容</button>
    <button id="get-html">获取HTML内容</button>
    
    <h3>表单值操作</h3>
    <input type="text" id="input-example" value="初始值">
    <button id="set-val">设置表单值</button>
    <button id="get-val">获取表单值</button>
</body>
</html>
                    

示例2：属性和CSS操作

<!DOCTYPE html>
<html>
<head>
    <title>jQuery属性和CSS操作示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        .bordered {
            border: 2px solid red;
            padding: 10px;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 属性操作
            $("#set-attr").click(function() {
                $("#image-example").attr("src", "https://picsum.photos/id/237/200/150");
            });
            
            $("#get-attr").click(function() {
                const src = $("#image-example").attr("src");
                alert("图片地址：" + src);
            });
            
            $("#remove-attr").click(function() {
                $("#link-example").removeAttr("target");
                alert("已删除target属性");
            });
            
            // CSS操作
            $("#set-css").click(function() {
                $("#css-example").css({"color": "blue", "font-size": "20px"});
            });
            
            $("#add-class").click(function() {
                $("#class-example").addClass("highlight bordered");
            });
            
            $("#remove-class").click(function() {
                $("#class-example").removeClass("highlight");
            });
            
            $("#toggle-class").click(function() {
                $("#class-example").toggleClass("bordered");
            });
            
            $("#check-class").click(function() {
                const hasClass = $("#class-example").hasClass("highlight");
                alert("是否包含highlight类：" + hasClass);
            });
        });
    </script>
</head>
<body>
    <h2>jQuery属性和CSS操作示例</h2>
    
    <h3>属性操作</h3>
    <img id="image-example" src="https://picsum.photos/id/1/200/150" alt="示例图片">
    <button id="set-attr">设置图片地址</button>
    <button id="get-attr">获取图片地址</button>
    
    <p><a id="link-example" href="https://www.example.com" target="_blank">示例链接</a></p>
    <button id="remove-attr">删除target属性</button>
    
    <h3>CSS操作</h3>
    <p id="css-example">这是CSS操作示例文本</p>
    <button id="set-css">设置CSS样式</button>
    
    <p id="class-example">这是类操作示例文本</p>
    <button id="add-class">添加类</button>
    <button id="remove-class">删除类</button>
    <button id="toggle-class">切换类</button>
    <button id="check-class">检查类</button>
</body>
</html>
                    

示例3：元素操作

<!DOCTYPE html>
<html>
<head>
    <title>jQuery元素操作示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .box {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            background-color: #f9f9f9;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 创建元素
            $("#create-element").click(function() {
                const $newElement = $("<div class='box'><h4>新创建的元素</h4><p>这是通过jQuery创建的新元素</p></div>");
                $("#element-container").append($newElement);
            });
            
            // 添加元素
            $("#append-element").click(function() {
                $("#element-container").append("<p>这是append添加的内容</p>");
            });
            
            $("#prepend-element").click(function() {
                $("#element-container").prepend("<p>这是prepend添加的内容</p>");
            });
            
            $("#after-element").click(function() {
                $("#element-container").after("<p>这是after添加的内容</p>");
            });
            
            $("#before-element").click(function() {
                $("#element-container").before("<p>这是before添加的内容</p>");
            });
            
            // 删除元素
            $("#remove-element").click(function() {
                $("#element-container .box").remove();
            });
            
            $("#empty-element").click(function() {
                $("#element-container").empty();
            });
            
            // 替换元素
            $("#replace-element").click(function() {
                $("#element-container p:first").replaceWith("<h4>这是替换后的内容</h4>");
            });
        });
    </script>
</head>
<body>
    <h2>jQuery元素操作示例</h2>
    
    <div id="element-container" class="box">
        <h3>元素容器</h3>
        <p>这是初始内容</p>
    </div>
    
    <button id="create-element">创建元素</button>
    <button id="append-element">Append内容</button>
    <button id="prepend-element">Prepend内容</button>
    <button id="after-element">After内容</button>
    <button id="before-element">Before内容</button>
    <button id="remove-element">删除元素</button>
    <button id="empty-element">清空内容</button>
    <button id="replace-element">替换元素</button>
</body>
</html>
                    

示例4：遍历操作

<!DOCTYPE html>
<html>
<head>
    <title>jQuery遍历操作示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .box {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            background-color: #f9f9f9;
        }
        .highlight {
            background-color: #e8f4f8;
            border-color: #2196f3;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 遍历子元素
            $("#children").click(function() {
                $("#traversal-example").children().addClass("highlight");
            });
            
            // 遍历父元素
            $("#parent").click(function() {
                $("#target-element").parent().addClass("highlight");
            });
            
            // 遍历祖先元素
            $("#parents").click(function() {
                $("#target-element").parents().addClass("highlight");
            });
            
            // 遍历兄弟元素
            $("#siblings").click(function() {
                $("#target-element").siblings().addClass("highlight");
            });
            
            // 查找元素
            $("#find").click(function() {
                $("#traversal-example").find("p").addClass("highlight");
            });
            
            // 遍历元素集合
            $("#each").click(function() {
                $("#traversal-example p").each(function(index, element) {
                    $(this).text("段落 " + (index + 1) + ": " + $(this).text());
                });
            });
            
            // 重置
            $("#reset").click(function() {
                $("*").removeClass("highlight");
                $("#traversal-example p:first").text("这是第一个段落");
                $("#traversal-example p:eq(1)").text("这是第二个段落");
                $("#target-element").text("这是目标元素");
                $("#traversal-example p:last").text("这是第四个段落");
            });
        });
    </script>
</head>
<body>
    <h2>jQuery遍历操作示例</h2>
    
    <div id="traversal-example" class="box">
        <h3>遍历示例容器</h3>
        <p>这是第一个段落</p>
        <div class="box">
            <p id="target-element">这是目标元素</p>
            <p>这是第三个段落</p>
        </div>
        <p>这是第四个段落</p>
    </div>
    
    <button id="children">遍历子元素</button>
    <button id="parent">遍历父元素</button>
    <button id="parents">遍历祖先元素</button>
    <button id="siblings">遍历兄弟元素</button>
    <button id="find">查找元素</button>
    <button id="each">遍历元素集合</button>
    <button id="reset">重置</button>
</body>
</html>
                    

实践案例

案例：动态列表管理器

使用jQuery实现一个动态列表管理器，展示jQuery的DOM操作能力，包括元素的创建、添加、删除和修改等操作。

<!DOCTYPE html>
<html>
<head>
    <title>动态列表管理器</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .input-section {
            margin-bottom: 20px;
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .list-section {
            margin-top: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        li:hover {
            background-color: #f5f5f5;
        }
        .task-text {
            flex: 1;
        }
        .task-actions {
            display: flex;
            gap: 10px;
        }
        .edit-btn {
            background-color: #2196F3;
        }
        .edit-btn:hover {
            background-color: #0b7dda;
        }
        .delete-btn {
            background-color: #f44336;
        }
        .delete-btn:hover {
            background-color: #da190b;
        }
        .completed {
            text-decoration: line-through;
            color: #888;
        }
        .edit-input {
            width: 100%;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 添加任务
            $("#add-task").click(function() {
                const taskText = $("#task-input").val().trim();
                if (taskText) {
                    const taskItem = $(`
                        <li>
                            <span class="task-text">${taskText}</span>
                            <div class="task-actions">
                                <button class="edit-btn">编辑</button>
                                <button class="delete-btn">删除</button>
                            </div>
                        </li>
                    `);
                    $("#task-list").append(taskItem);
                    $("#task-input").val("");
                }
            });
            
            // 按Enter键添加任务
            $("#task-input").keypress(function(e) {
                if (e.which === 13) {
                    $("#add-task").click();
                }
            });
            
            // 编辑任务
            $(document).on("click", ".edit-btn", function() {
                const taskItem = $(this).closest("li");
                const taskText = taskItem.find(".task-text").text();
                
                taskItem.html(`
                    <input type="text" class="edit-input" value="${taskText}">
                    <div class="task-actions">
                        <button class="save-btn">保存</button>
                        <button class="cancel-btn">取消</button>
                    </div>
                `);
                
                taskItem.find(".edit-input").focus();
            });
            
            // 保存任务
            $(document).on("click", ".save-btn", function() {
                const taskItem = $(this).closest("li");
                const newTaskText = taskItem.find(".edit-input").val().trim();
                
                if (newTaskText) {
                    taskItem.html(`
                        <span class="task-text">${newTaskText}</span>
                        <div class="task-actions">
                            <button class="edit-btn">编辑</button>
                            <button class="delete-btn">删除</button>
                        </div>
                    `);
                } else {
                    taskItem.remove();
                }
            });
            
            // 取消编辑
            $(document).on("click", ".cancel-btn", function() {
                const taskItem = $(this).closest("li");
                const originalText = taskItem.find(".edit-input").val();
                
                taskItem.html(`
                    <span class="task-text">${originalText}</span>
                    <div class="task-actions">
                        <button class="edit-btn">编辑</button>
                        <button class="delete-btn">删除</button>
                    </div>
                `);
            });
            
            // 删除任务
            $(document).on("click", ".delete-btn", function() {
                $(this).closest("li").remove();
            });
            
            // 标记任务完成/未完成
            $(document).on("click", ".task-text", function() {
                $(this).toggleClass("completed");
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>动态列表管理器</h1>
        
        <div class="input-section">
            <input type="text" id="task-input" placeholder="输入任务内容...">
            <button id="add-task">添加任务</button>
        </div>
        
        <div class="list-section">
            <h2>任务列表</h2>
            <ul id="task-list">
                <li>
                    <span class="task-text">学习jQuery基础</span>
                    <div class="task-actions">
                        <button class="edit-btn">编辑</button>
                        <button class="delete-btn">删除</button>
                    </div>
                </li>
                <li>
                    <span class="task-text">练习DOM操作</span>
                    <div class="task-actions">
                        <button class="edit-btn">编辑</button>
                        <button class="delete-btn">删除</button>
                    </div>
                </li>
                <li>
                    <span class="task-text">创建实践项目</span>
                    <div class="task-actions">
                        <button class="edit-btn">编辑</button>
                        <button class="delete-btn">删除</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
                    

这个案例展示了如何使用jQuery实现一个动态列表管理器，包括以下功能：

添加新任务
编辑现有任务
删除任务
标记任务完成/未完成
通过Enter键添加任务

该案例使用了多种jQuery DOM操作方法，如append()、html()、find()、closest()、on()等，展示了jQuery在实际项目中的应用。

互动练习

练习：DOM操作 playground

创建一个DOM操作 playground，使用jQuery实现以下功能：

在输入框中输入文本内容
选择操作类型（添加、删除、修改、查询）
点击"执行操作"按钮，执行相应的DOM操作
查看操作结果

Playground 容器

初始段落1

初始段落2

目标div元素

初始段落3