<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            gaoliang();

            var $seldel = undefined;
            var seldel = undefined;

//高亮选中
            function gaoliang() {

                $("li").click(function () {
                    $("li").css(
                        "backgroundColor", "red"
                    );
                    this.style.backgroundColor = "yellow";
                    $seldel = $(this);

                    seldel = this;
                });
            }
//使用jquery添加对象
            $("#btnAdd1").click(function () {
                var input = window.prompt("输入数据");
                var $newli = $("<li>" + input + "</li>");
                $newli.appendTo("#Ol");
                gaoliang();
            });
//使用dom元素添加对象
            document.getElementById("btnAdd2").onclick = function () {
                var input = window.prompt("输入数据");

                var newli = document.createElement("li");
                newli.innerHTML = input;
                document.getElementById("Ol").appendChild(newli);
                gaoliang();

            }
//使用jquery删除对象
            $("#btnDel1").click(function () {
                $seldel.remove();

            });
//使用dom元素删除对象
            document.getElementById("btnDel2").onclick = function () {
                seldel.parentNode.removeChild(seldel);

            }
//使用jquery插入数据
            $("#btnInsert1").click(function () {
                var input=window.prompt("输入插入的数据");
                var $newli=$("<li>"+ input+"</li>");

                $newli.insertBefore($seldel);
                gaoliang();
            });
//使用dom插入数据
            document.getElementById("btnInsert2").onclick = function () {
                var Ol = document.getElementById("Ol");
                var input = window.prompt("输入插入的数据");
                var newli = document.createElement("li");
                newli.innerHTML = input;
                Ol.insertBefore(newli, seldel);

                gaoliang();

            }

//使用jquery编辑选中的数据
            $("#btnEdit1").click(function () {
                var oldtxt = $seldel.html();
                var $edit = $("<input id='btnE' type='text' value='" + oldtxt + "'/>");
                $seldel.html($edit);
                $edit.focus();
                $edit.blur(function () {
                    var newtxt = $(this).val();
                    $seldel.html(newtxt);
                });

            });
//使用dom编辑选中的数据
            document.getElementById("btnEdit2").onclick = function () {
                var edittext = document.createElement("input");
                edittext.type = "text";
                edittext.value = seldel.innerHTML;;
                seldel.innerHTML = "";
                seldel.appendChild(edittext);
                edittext.focus();

                edittext.onblur = function () {
                    seldel.innerHTML = edittext.value;
                }

            }

        } )

    </script>
</head>
<body>
<ol id="Ol">
    <li id="haha">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
<input id="btnAdd1" type="button" value="jquery添加数据" />
<input id="btnAdd2" type="button" value="dom添加数据" />
<input id="btnDel1" type="button" value="jquery删除数据" />
<input id="btnDel2" type="button" value="dom删除数据" />
<input id="btnInsert1" type="button" value="jquery插入数据" />
<input id="btnInsert2" type="button" value="dom插入数据" />
<input id="btnEdit1" type="button" value="jquery编辑数据" />
<input id="btnEdit2" type="button" value="dom编辑数据" />
</body>
</html>

使用js dom和jquery分别实现简单增删改的更多相关文章

  1. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  2. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  3. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  4. MySQL数据库学习笔记（八）----JDBC入门及简单增删改数据库的操作

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  5. MyBatis之二：简单增删改查

    这一篇在上一篇的基础上简单讲解如何进行增删改查操作. 一.在mybatis的配置文件conf.xml中注册xml与注解映射 <!-- 注册映射文件 --> <mappers> ...

  6. ado.net的简单数据库操作（三）——简单增删改查的实际应用

    果然,在犯困的时候就该写写博客,写博客就不困了,哈哈! 上篇我记录了自己的SqlHelper的开发过程,今天记录一下如何使用这个sqlhelper书写一个具有简单增删改查的小实例啦. 实例描述:在数据 ...

  7. Redis：五种数据类型的简单增删改查

    Redis简单增删改查例子 例一:字符串的增删改查 #增加一个key为ay_key的值 127.0.0.1:6379> set ay_key "ay" OK #查询ay_ke ...

  8. 国产化之路-统信UOS + Nginx + Asp.Net MVC + EF Core 3.1 + 达梦DM8实现简单增删改查操作

    专题目录 国产化之路-统信UOS操作系统安装 国产化之路-国产操作系统安装.net core 3.1 sdk 国产化之路-安装WEB服务器 国产化之路-安装达梦DM8数据库 国产化之路-统信UOS + ...

  9. Mybatis实现简单增删改查

    Mybatis的简单应用 学习内容: 需求 环境准备 代码 总结: 学习内容: 需求 使用Mybatis实现简单增删改查(以下是在IDEA中实现的,其他开发工具中,代码一样) jar 包下载:http ...

随机推荐

  1. 新版Azure Automation Account 浅析（二） --- 更新Powershell模块和创建Runbook

    前篇我们讲了怎样创建一个自动化账户以及创建时候"Run As Account"选项背后的奥秘.这一篇针对在Azure自动化账户中使用Powershell Runbook的用户讲一下 ...

  2. SQL Constraints

    每个表可以有多个 UNIQUE 约束,但是每个表只能有一个 PRIMARY KEY 约束. http://www.w3school.com.cn/sql/sql_unique.asp 另外相关:@On ...

  3. Java 敏感词过滤，Java 敏感词替换，Java 敏感词工具类

    Java 敏感词过滤,Java 敏感词替换,Java 敏感词工具类   =========================== ©Copyright 蕃薯耀 2017年9月25日 http://www ...

  4. Java之IO流学习总结【上】

    一.什么是流? 流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接收端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由地控制文件.内存.IO设备等数据的流向. ...

  5. C# winform页面可视化设计打开失败，提示未能加载程序集或他的一个依赖项，dll错误

    这种情况发生在最初项目是x86属性,改成x64后,一些原来dll,页面没有及时更新,导致页面找不到dll, 最简单的解决方式,把项目属性改成AnyCpu,重新编译下,就可以打开可视化设计窗口了.

  6. linux的nvme驱动需要关心的统计项

    blk-mq-sysfs.c生成了一些其他的nvme的统计项, 有多少个online的cpu,在驱动加载的时候会默认生成多少个队列,除非内存不足或者在保留内核中,则会减少. [root@localho ...

  7. python3 第十三章 - 数据类型之tuple（元组）

    元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可: language = ('c', 'c++', 'py ...

  8. Shell读取配置文件的方法

    参考:http://www.cnblogs.com/binbinjx/p/5680214.html 做批量软件安装自动化时,都喜欢用配置文件的方式改变参数,那怎么通过shell读取配置文件的配置呢?参 ...

  9. PHP实现QQ登录的开发教程

    第三方登录,就是使用大家比较熟悉的比如QQ.微信.微博等第三方软件登录自己的网站,这可以免去注册账号.快速留住用户的目的,免去了相对复杂的注册流程.下边就给大家讲一下怎么使用PHP开发QQ登录的功能. ...

  10. 【转】ArcGIS中File Geodatabase与Personal Geodatabase的区别

    原文地址:ArcGIS中File Geodatabase与Personal Geodatabase的区别作者:最爱忆宝贝 一.平台支援: 1.Personal Geodatabase:仅可在Windo ...