JQuery TODOList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODOlist</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            // 页面加载后自动聚焦输入框
            $('#input_content').focus();    

            // var $input_content = $('#input_content').val();
            var $btn = $('#btn_submit');

            //点击事件.
            $btn.click(function(){

                // 获取输入值. 增加在下面.
                var $input_content = $('#input_content').val();

                if($input_content.length<1){
                    alert('请输入内容');
                    return;
                }

                // 为新todo项目完善标签模板;
                var newList = '<li><span>'+ $input_content +'</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="delete">Delete</a></li>'

                $('#content').append(newList);
                // append 内后 prepend 内前  after外后 before外前

                //恢复输入框空白;
                $('#input_content').val('');
                // 直接更改变量没有用处 , 相当于重新为变量赋值, 在更改输入框的内容的时候只能通过方法调用.
                
            })

            //在父元素进行事件委托.
            // $('#content').delegate('li','click',function(){
                //  这里不能直接对li进行委托, 而应该是li之下的按钮的统一标签,为a
            $('#content').delegate('a','click',function(){
                // 对点击a标签,事件进行监控
                // 判断a标签所在li元素次序.
                var $index = $(this).parent().index();

                // 取出点击元素的class属性,从而判断按钮.
                var $kind = $(this).prop('class');


                //  因为是对a标签的父元素进行操作 , 所以需要定义父元素变量, 为了方便之后前后元素的调用.  自然也对前后父元素 进行定义. 
                var $am_ele = $(this).parent();
                var $pre_ele = $(this).parent().prev();
                var $next_ele = $(this).parent().next();

                switch($kind){
                    case 'up':
                    // 增加顶部元素判断, 如果到顶, 则弹提示, 且中断运行.
                    if ($pre_ele.length<1) {
                        alert('到顶了')
                        break;
                    }
                    $am_ele.insertBefore($pre_ele);
                        break;

                    case 'down':
                    case 'up':
                    if ($next_ele.length<1) {
                        alert('到底了')
                        break;
                    }
                    $am_ele.insertAfter($next_ele);

                        break;

                    case 'delete':
                    $am_ele.remove();
                        break;
                }

            })

        })        

    </script>
    <style type="text/css">
        .con{
            width: 600px;
            /*background: tan;*/
            margin: 50px auto;
        }
        #input_content{
            width: 530px;
            height: 30px;
            border: 2px solid gray;
            padding: 0;
            margin: 0;

        }
        #btn_submit{
            height: 34px;
            width: 60px;
            padding: 0px;
            margin: 0px;
            border: 2px solid silver;
            cursor: pointer;
        }
        #content{
            width: 100%;
            /*background: red;*/
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #content li{
            height: 40px;
            border-bottom: 1px solid silver;
            font: 16px/40px 'Microsoft Yahei';            
        }
        #content li span{
            float: left;
            width: 450px;
            height: 40px;
            font: 16px/40px 'Microsoft Yahei';
            text-indent: 30px;
        }
        .up,.down,.delete{
            float: left;
            height: 40px;
            padding: 0px 10px;
            text-align: center;
            cursor: pointer;
            font-weight: bold;
            text-decoration-line: none; 
        }
        .delete{
            float:right;
        }

    </style>
</head>
<body>
<!--     div.con>h2#title{TODO_list}+input#input_content[type=text]+input#btn_submit[type=button]+ul#content>(li>span{Project}+a[href=javascript:;].up{↑}+a[href=javascript:;].down{↓}+a[href=javascript:;].delete{Delete})*3 -->
    <div class="con">
        <h2 id="title">TODO_list</h2>
        <input type="text" id="input_content" placeholder="请输入新计划项目" >
        <input type="button" id="btn_submit" value="Add">
        <ul id="content">
            <li>
                <span>Student1</span>
                <a href="javascript:;" class="up">↑</a>
                <a href="javascript:;" class="down">↓</a>
                <a href="javascript:;" class="delete">Delete</a>
            </li>
            <li>
                <span>Student2</span>
                <a href="javascript:;" class="up">↑</a>
                <a href="javascript:;" class="down">↓</a>
                <a href="javascript:;" class="delete">Delete</a>
            </li>
            <li>
                <span>Student3</span>
                <a href="javascript:;" class="up">↑</a>
                <a href="javascript:;" class="down">↓</a>
                <a href="javascript:;" class="delete">Delete</a>
            </li>
        </ul>
    </div>
</body>
</html>
posted @ 2019-08-13 20:35 Jrri 阅读(380) 评论(0) 收藏举报
刷新页面返回顶部