使用js dom和jquery分别实现简单增删改

下面我来详细讲解使用JS DOM和jQuery分别实现简单增删改的完整攻略。

使用JS DOM实现简单增删改

首先我们需要明确一下，JS DOM是指通过JavaScript来操作DOM元素，实现交互效果的一种技术。下面是详细的步骤：

添加元素

首先，我们需要一个按钮，并绑定一个事件，当用户点击按钮时会自动创建一个新的元素。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Add Element Using JS DOM</title>
    </head>
    <body>
        <button id="addButton">Add Element</button>
        <ul id="list"></ul>
        <script>
            var addButton = document.getElementById("addButton");
            var list = document.getElementById("list");
            var count = 1;
            addButton.addEventListener("click", function(){
                var newItem = document.createElement("li");
                newItem.innerHTML = "Item " + count;
                count++;
                list.appendChild(newItem);
            });
        </script>
    </body>
</html>

在这段代码中，我们首先获取到了按钮和列表元素的引用，然后在按钮上绑定了一个click事件。在事件触发时，我们创建了一个新的li元素，并通过innerHTML属性设置了它的内容，最后将它追加到了列表元素中。

删除元素

接下来，我们来看一下如何删除元素。我们可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Remove Element Using JS DOM</title>
    </head>
    <body>
        <ul id="list">
            <li>Item 1 <button class="removeButton">Remove</button></li>
            <li>Item 2 <button class="removeButton">Remove</button></li>
            <li>Item 3 <button class="removeButton">Remove</button></li>
        </ul>
        <script>
            var removeButtons = document.querySelectorAll(".removeButton");
            var list = document.getElementById("list");
            for (var i = 0; i < removeButtons.length; i++) {
                removeButtons[i].addEventListener("click", function() {
                    var li = this.parentNode;
                    list.removeChild(li);
                });
            }
        </script>
    </body>
</html>

在这段代码中，我们首先获取到了所有的删除按钮，然后依次给它们绑定了一个click事件。在事件触发时，我们首先获取到了当前按钮所在的li元素，然后调用parentNode属性获取到它的父元素，最后将它从父元素中删除。

修改元素

最后，我们来看一下如何修改元素。我们可以通过将元素变为可编辑状态，并在用户完成编辑时更新内容。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Edit Element Using JS DOM</title>
    </head>
    <body>
        <ul id="list">
            <li>Item 1 <button class="removeButton">Remove</button></li>
            <li>Item 2 <button class="removeButton">Remove</button></li>
            <<li contenteditable="true">Item 3 </li>
        </ul>
        <script>
            var list = document.getElementById("list");
            var editableItem = list.querySelector("[contenteditable]");
            editableItem.addEventListener("blur", function() {
                editableItem.removeAttribute("contenteditable");
            });
        </script>
    </body>
</html>

在这段代码中，我们首先获取到要编辑的元素，并给它绑定了一个blur事件。在事件触发时，我们调用removeAttribute方法将contenteditable属性从它中移除。

使用jQuery实现简单增删改

接下来让我们来介绍使用jQuery来实现简单的增删改功能。jQuery的DOM操作功能非常强大，下面是详细的步骤：

添加元素

添加元素也很简单，我们只需要创建一个按钮，当用户点击按钮时就会自动创建一个新的元素。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Add Element Using jQuery</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="addButton">Add Element</button>
        <ul id="list"></ul>
        <script>
            var count = 1;
            $("#addButton").click(function() {
                var newItem = $("<li>Item " + count + "</li>");
                count++;
                $("#list").append(newItem);
            });
        </script>
    </body>
</html>

在这段代码中，我们首先引入了jQuery库，然后获取到了按钮元素的引用，并通过click方法绑定了一个click事件。在事件触发时，我们首先创建了一个新的li元素，然后将它追加到了列表元素中。

删除元素

删除元素也很简单，我们依旧可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Remove Element Using jQuery</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <ul id="list">
            <li>Item 1 <button class="removeButton">Remove</button></li>
            <li>Item 2 <button class="removeButton">Remove</button></li>
            <li>Item 3 <button class="removeButton">Remove</button></li>
        </ul>
        <script>
            $(".removeButton").click(function() {
                var li = $(this).closest("li");
                li.remove();
            });
        </script>
    </body>
</html>

在这段代码中，我们首先获取到了所有的删除按钮，然后通过click方法绑定了一个click事件。在事件触发时，我们首先获取到当前按钮所在的li元素，然后调用closest方法获取到最近的li元素，并调用remove方法将它从DOM树中删除。

修改元素

修改元素也十分简单，我们可以通过给元素绑定一个双击事件，当用户双击元素时就会变成可编辑状态。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Edit Element Using jQuery</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <ul id="list">
            <li>Item 1 <button class="removeButton">Remove</button></li>
            <li>Item 2 <button class="removeButton">Remove</button></li>
            <li contenteditable="true">Item 3</li>
        </ul>
        <script>
            $("#list [contenteditable]").dblclick(function() {
                $(this).removeAttr("contenteditable");
            });
        </script>
    </body>
</html>

在这段代码中，我们首先获取到要编辑的元素，然后通过dblclick方法绑定了一个双击事件。在事件触发时，我们调用removeAttr方法将contenteditable属性从它中移除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用js dom和jquery分别实现简单增删改 - Python技术站