【Java 进阶篇】JQuery DOM操作：轻松驾驭网页内容的魔法

偏执的太偏执、 2024-02-18 09:05 1阅读 0赞

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png]

在前端开发的舞台上，DOM（文档对象模型）是我们与网页内容互动的关键。而JQuery作为一个轻量级的JavaScript库，为我们提供了便捷而强大的DOM操作工具。在本篇博客中，我们将深入探讨JQuery的DOM内容操作，揭开这段神奇的前端魔法。

### JQuery的魅力 ###

首先，让我们回顾一下JQuery的魅力。JQuery以其简洁、高效的语法，成为前端开发者的得力工具。它简化了许多繁琐的操作，让我们可以更专注于实现功能而不是纠结于代码的细枝末节。

#### 轻松引入JQuery ####

在使用JQuery之前，我们需要引入JQuery库。可以通过在HTML文件中添加以下代码来获取JQuery：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

现在，我们已经为页面引入了JQuery，可以开始探索DOM的奇妙世界。

### DOM操作基础 ###

在开始DOM内容操作之前，让我们先了解一下DOM的基础知识。DOM是一种将HTML文档以树形结构呈现的模型，每个HTML元素都是树中的一个节点。这种结构使得我们能够通过JavaScript（或JQuery）轻松地操作、创建、删除和替换HTML元素。

#### 选取元素 ####

在JQuery中，选择器是我们选取DOM元素的利器。通过选择器，我们可以准确地找到页面上的元素，并对其进行操作。选择器以`$()`的形式出现，括号中传入选择器字符串。

// 通过ID选择器选取元素
    var myElement = $("#myId");
    
    // 通过类选择器选取元素
    var elementsWithClass = $(".myClass");
    
    // 通过标签选择器选取元素
    var allParagraphs = $("p");

#### 操作元素内容 ####

DOM内容操作的核心就是对元素的内容进行增删改查。JQuery提供了丰富的方法来实现这些操作。

##### 获取和设置元素文本内容 #####

通过`text()`方法，我们可以获取或设置元素的文本内容。

// 获取元素文本内容
    var textContent = $("#myElement").text();
    
    // 设置元素文本内容
    $("#myElement").text("新的文本内容");

##### 获取和设置元素HTML内容 #####

通过`html()`方法，我们可以获取或设置元素的HTML内容，这允许我们插入HTML标记。

// 获取元素HTML内容
    var htmlContent = $("#myElement").html();
    
    // 设置元素HTML内容
    $("#myElement").html("<p>新的HTML内容</p>");

##### 追加和插入内容 #####

通过`append()`和`prepend()`方法，我们可以在元素内部的末尾或开头追加内容。

// 在元素末尾追加内容
    $("#myElement").append("<p>追加的内容</p>");
    
    // 在元素开头插入内容
    $("#myElement").prepend("<p>插入的内容</p>");

##### 删除元素内容 #####

通过`empty()`方法，我们可以清空元素的内容。

// 清空元素内容
    $("#myElement").empty();

#### 示例：创建一个待办事项列表 ####

让我们通过一个实际的示例来演示JQuery DOM内容操作的强大之处。假设我们要创建一个简单的待办事项列表，用户可以通过表单添加新的待办事项，同时可以删除已完成的事项。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>待办事项列表</title>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <h2>待办事项列表</h2>
        
        <form id="todoForm">
            <input type="text" id="newTodo" placeholder="添加新的待办事项">
            <button type="button" onclick="addTodo()">添加</button>
        </form>
    
        <ul id="todoList">
            
        </ul>
    
        <script src="app.js"></script>
    </body>
    </html>

现在，我们来编写JavaScript文件`app.js`，实现待办事项的添加和删除功能。

// JavaScript代码示例：待办事项列表的逻辑
    // app.js
    
    // 添加新的待办事项
    function addTodo() {
        
        var newTodoText = $("#newTodo").val();
    
        if (newTodoText !== "") {
        
            $("#todoList").append("<li>" + newTodoText + " <button οnclick='removeTodo(this)'>删除</button></li>");
            $("#newTodo").val(""); // 清空输入框
        }
    }
    
    // 删除已完成的待办事项
    function removeTodo(button) {
        
        $(button).parent().remove();
    }

这段代码通过JQuery实现了一个简单的待办事项列表。用户可以在输入框中输入新的待办事项，点击"添加"按钮后，新的事项会被追加到列表中。每个事项后面都有一个"删除"按钮，点击它可以删除相应的事项。这个示例展示了JQuery DOM操作的简便性和灵活性，使得前端开发变得更加轻松有趣。

### 结语 ###

通过本篇博客，我们深入探讨了JQuery的DOM内容操作，了解了如何通过JQuery轻松驾驭网页内容的魔法。DOM操作是前端开发中的核心技能之一，它使得我们能够通过JavaScript（或JQuery）对页面进行精准、灵活的控制。通过实际示例，我们看到了DOM操作在创建交互性强、用户体验良好的网页中的实际应用。

无论是初学者还是有一定经验的开发者，都可以通过学习和实践DOM操作，逐渐掌握前端开发的精髓。JQuery作为一个优秀的工具，为我们提供了更高效的DOM操作方式，使得前端开发更加愉快。让我们继续探索前端的奇妙世界，创造出更出色的用户体验！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[fe098e18bcc24ed2aaff6195ef3f5a1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d2b32c3a4f9f49a3b95779c3e25ca552.png