使用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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 手机图片预览插件photoswipe.js使用总结

    手机图片预览插件photoswipe.js使用总结 介绍 Photoswipe是一个JavaScript库,用于提供可缩放的图像轮廓,并适用于所有现代桌面和移动浏览器,具有触摸屏支持和响应式图像大小。它通过全局的脚本文件或模块的方式来使用。它可以很容易地与jQuery、React、Angular、Vue等框架集成。 安装 Photoswipe是一个基于jQu…

    JavaScript 2023年6月10日
    00
  • vue3的api解读之ref和reactive示例详解

    下面是针对“vue3的api解读之ref和reactive示例详解”的完整攻略: 1. 什么是 ref 和 reactive? ref: 用来创建一个响应式对象,它会返回一个带有 value 属性的对象,这个 value 属性可以自动更新页面。 reactive:用来创建一个响应式对象,它会将对象中所有属性都转化为响应式数据,任何一个属性发生变化都能触发相应…

    JavaScript 2023年6月11日
    00
  • javascript 调用其他页面的js函数或变量的脚本

    要在JavaScript中调用其他页面的函数或变量,有以下两种方法: 1. 使用window.opener对象 当在一个页面中用window.open打开另一个页面时,这个被打开的页面就可以使用window.opener来访问打开它的页面。所以,我们可以利用这个特性来调用父页面的函数或变量。 父页面示例代码: <!DOCTYPE html> &l…

    JavaScript 2023年6月11日
    00
  • JS实现新建文件夹功能

    下面我们来讲解一下JS实现新建文件夹的功能的完整攻略。 1. 前置知识 在开始阐述具体实现方法之前,我们先简单介绍一下一些前置知识: HTML: 用于搭建页面结构 CSS: 用于美化页面样式 JavaScript(JS): 在页面中增加交互动态效果 其中,前两项是每个Web开发者的基本功,这里不再赘述,主要介绍JS的相关知识。 JS通常用于给页面添加动态交互…

    JavaScript 2023年5月27日
    00
  • 微信小程序 教程之小程序配置

    微信小程序教程之小程序配置 小程序配置是开发微信小程序的第一步。本文将为大家讲解小程序配置的详细流程。 1. 注册小程序账号 在开发微信小程序之前,需要先注册小程序账号。注册小程序账号的具体流程可以参考官方文档。 2. 创建小程序应用 注册完成小程序账号后,需要登录小程序平台,然后点击“创建小程序”按钮,进入小程序创建页面。在此页面填写小程序的基本信息,包括…

    JavaScript 2023年6月11日
    00
  • 解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

    解析js中获得父窗口链接getParent方法以及各种打开窗口的方法 在Web开发中,我们经常需要在网页中打开新的窗口,并且还会经常需要获取当前窗口的父窗口。本文将介绍如何使用JavaScript来获取父窗口的链接,并且介绍常用的打开窗口的方法。 获取父窗口链接 可以使用 JavaScript 中的 parent 对象来获取当前窗口的父窗口对象。父窗口对象包…

    JavaScript 2023年6月11日
    00
  • JavaScript函数封装的示例详解

    一、 JavaScript函数封装的概念 JavaScript函数封装是一种将代码打包成可重复使用的功能的机制。在程序的发展过程中,很多功能都需要在不同的地方使用。JavaScript函数封装能够高效地将这些功能封装成函数,使得开发者可以重复利用这些代码的同时,也可以让代码变得更加有层次性,易于维护。 在JavaScript中,我们可以使用函数关键字func…

    JavaScript 2023年5月27日
    00
  • 千篇一律的JS运算符讲解,一起来看看

    千篇一律的JS运算符讲解,一起来看看 前言 JS运算符是编写JS代码时非常基本的一种语法。很多初学者在学习JS时可能会忽略这些运算符的学习,但却是非常重要的基础。在本篇文章中,我们将会全面讲解JS的运算符,并提供一些示例来帮助读者更好地理解这些内容。 算术运算符 运算符 描述 示例 + 加法 10 + 20 = 30 – 减法 20 – 10 = 10 * …

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部