使用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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。