11月21日心得及笔记

最新推荐文章于 2024-07-24 08:00:00 发布
原创最新推荐文章于 2024-07-24 08:00:00 发布 · 219 阅读
CC 4.0 BY-SA版权
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

</head>
<body>
    <ol id="ol">
        <li >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>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $other=undefined;
            var another=undefined;
            attract();
            function attract(){
                $('li').click(function(){
                        $('li').css('background','pink');
                        $(this).css('background','red');
                        //this.style.background="red";
                        $other=$(this);
                        another=this;
                        });
                }
            $('#btnAdd1').click(function(){
                var input=window.prompt('添加数据');
                $nweli=$('<li>'+input+'</li>');
                $nweli.appendTo('#ol');
                attract();
                })
            $('#btnDel1').click(function(){
                $other.remove();
                })
            $('#btnInsert1').click(function(){
                var input=window.prompt('插入数据');
                var $newli=$('<li>'+input+'</li>');
                $newli.insertBefore($other);
                attract();
                })
            $('#btnEdit1').click(function(){
                var oldvalue=$other.html();
                var $str=$('<input type="text" value="'+oldvalue+'" />');
                $other.html($str);
                $str.focus();
                $str.blur(function(){
                    var newvalue=$str.val();
                    $other.html(newvalue);
                    })
                attract();
                })
                document.getElementById("btnAdd2").onclick=function (){
                var input=window.prompt('输入数据');
                var newli=document.createElement('li');
                newli.innerHTML=input;
                document.getElementById("ol").append(newli);
                attract();
                }

                document.getElementById("btnDel2").onclick=function (){
                var str=another.parentNode;
                str.removeChild(another);
                }

                document.getElementById("btnInsert2").onclick=function (){
                var input=window.prompt('输入数据');
                var newli=document.createElement('li');
                newli.innerHTML=input;
                var ol=document.getElementById("ol");
                ol.insertBefore(newli,another);
                attract();
                }

                document.getElementById("btnEdit2").onclick=function (){
                var oldvalue=another.innerHTML;
                var str=document.createElement('input');
                str='<input id="dl" type="text" value="'+oldvalue+'" />';
                another.innerHTML=str;
                document.getElementById("dl").focus();

                document.getElementById("dl").onblur=function(){
                var newvalue=document.getElementById("dl").value;
                another.innerHTML=newvalue;} 
                    }
            });





    </script>
</html>