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

    软件开发实际就是数据的增删改查,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>

 

你可能感兴趣的:(jquery)