17-jquery 节点操作和事件委托的例子：todo-list 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 
        .con{
            width:600px;
            margin:50px auto;
        }

        .input{
            width:500px;
            height:30px;

            outline:none;
        }

        .btn{
            width:50px;
            height:35px;
            background-color:#ccc;
            outline:none;
        }

        .ul{
            list-style: none;
            width: 560px;
            height:40px;
            padding:0;

        }

        .ul li{
            width: 560px;
            height:40px;
            border-bottom:1px solid #ccc;
            padding-bottom:3px;
            padding-top:3px;
            color:#666;
            line-height:40px;

        }
        
        .ul li span{
            float:left;
        }

        .ul li a{
            float: right;
        }

        .down{
            padding:0 20px;
        }

    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var $inputtxt = $('#txt1');
            var $btn = $("#btn1");
            var $ul = $('.ul');

            //按钮事件
            $btn.click(function(){
                
                //获取input的内容
                var $val = $inputtxt.val();
                
                //判断一下input是否为空
                if($val=='')
                {
                    alert("请输入内容");
                    //结束这个函数的运行,不然会继续执行下面的代码
                    return;
                }
                
                //拼接一个li
                var $li = $('<li><span>'+$val+'</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>')

                //将拼接好的li追加到ul
                $ul.append($li);
                //清空input内容
                $inputtxt.val('');

            })

　　　　　　　//事件委托，ul被a元素委托，当ul中的a被发生click时，执行匿名函数
            $ul.delegate('a','click',function(){
                // alert($(this).prop('class'))
                var $handler = $(this).prop('class');

                if($handler=='del')
                {   
                    $(this).parent().remove();
                };

                if($handler=='up')
                {   
                    if($(this).parent().prev().length==0)
                    {
                        alert('到顶了');
                        return;
                    }

                    $(this).parent().insertBefore($(this).parent().prev());
                };

                if($handler=='down')
                {   
                    if($(this).parent().next().length==0)
                    {
                        alert('到底了');
                        return;
                    }

                    $(this).parent().insertAfter($(this).parent().next())
                }
            })

        })

    </script>
</head>
<body>
    <div class="con">
    <h2>To do list</h2>
    <input type="text" class="input" id="txt1">
    <input type="button" value="增加" class="btn" id="btn1">
    <ul class="ul">
        <li><span>学习python</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>
         <li><span>学习JavaScript</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>
          <li><span>学习css</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>

    </ul>
    </div>
</body>
</html>

 

posted @ 2019-03-31 22:09  greenfan  阅读(102)  评论(0)    收藏  举报