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

代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="jq/jquery-1.9.1.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>

使用dom元素和jquery元素实现简单增删改的练习的更多相关文章

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

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. Mybatis实现简单增删改查

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

  9. MongoDB下载安装与简单增删改查

    Windows下MongoDB的安装和配置.启动和停止 下载地址:MongoDB的官方下载网址是:https://www.mongodb.org/downloads 安装步骤1. 点击下载的mongo ...

随机推荐

  1. 在大于32GB或64GB容量的SD卡上使用NOOB安装树莓派 - Using NOOB on SD cards larger than 32GB or 64GB for Raspberry Pi

    在树莓派上玩了一小段时间了,因为装的软件包越来越多,所以越来越感觉16G的SD卡没办法长期使用下去.于是采购了几张64G的SD卡,打算周末装上系统.可是按照一般的流程,在Windows下用SD For ...

  2. angularjs上传图片

    通过AngularJS实现图片上传及缩略图展示(读取文件内容) AngularJS图片上传功能的实现(读取文件内容) AngularJs实现Multipart/form-data 文件的上传(上传文件 ...

  3. 采用TCP协议的PIC32MZ ethernet bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 趁热打铁,在上一PIC ...

  4. JAVA代码热部署，在线不停服动态更新

    本地debug的时候,可以实时编译并更新代码,线上也可以不停服来动态更新类,即所说的java热部署.   JDK代理的两种方式: 1.premain方式是Java SE5开始就提供的代理方式,但其必须 ...

  5. xcode调试技巧

    xode报错有时挺无厘头,完全不知道哪里出的问题,最后还得用排除法,记录一些工作中认为有用的调试技巧 1.左侧视图点断点视图,左下角点加号,选择exception breakpoint,类型选c++, ...

  6. Nginx内置变量以及日志格式变量参数详解

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  7. shell生成随机数的几种方法

    一.通过内部系统变量($RANDOM) 生成0-32767之间的整数随机数,若超过5位可以加个固定10位整数,然后进行求余. [root@web01 scripts]# echo $RANDOM [r ...

  8. PHP实现异步调用方法研究

    作者: Laruence 本文地址: http://www.laruence.com/2008/04/14/318.html 转载请注明出处 , ,); curl_setopt_array(, ); ...

  9. 记录下最近项目中常用到的SQL语句

    1  实现对字符串的Spilt功能. 比如查出“I have a dream!”总共有几个单词,需要以' '分割,然后再求出总数. ALTER function [dbo].[fc_SpiltStri ...

  10. Linux文件查找

    Linux下查找文件的命令有两个; locate: find : locate这个命令对其生成的数据库进行遍历(生成数据库的命令:updatedb),这一特性决定了查 找文件速度很快,但是locate ...