<!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>