1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .clearfix:after{ 8 content: ''; 9 display: table; 10 clear: both; 11 } 12 .div1{ 13 width: 800px; 14 /*background-color: gold;*/ 15 margin: 100px auto 0; 16 17 } 18 19 .h2{ 20 margin: 0; 21 } 22 23 .div2{ 24 width: 800px; 25 margin: 20px auto 20px; 26 } 27 28 .input01{ 29 float: left; 30 width: 750px; 31 height: 20px; 32 33 } 34 .input02{ 35 float: right; 36 cursor: pointer; 37 } 38 39 .div3{ 40 width: 800px; 41 } 42 .ul01{ 43 list-style: none; 44 width: 800px; 45 margin: 0; 46 padding: 0; 47 48 } 49 50 .li01{ 51 width: 800px; 52 border-bottom: 1px solid #666; 53 margin: 0; 54 height: 40px; 55 /*background-color: green;*/ 56 overflow: hidden; 57 58 } 59 .span01{ 60 float: left; 61 line-height: 40px; 62 font-size: 14px; 63 } 64 .span02{ 65 float: right; 66 width: 200px; 67 height: 40px; 68 } 69 .span02 input{ 70 float: right; 71 margin: 0; 72 line-height: 40px; 73 margin-right: 10px; 74 border: 0; 75 background-color: #fff; 76 cursor: pointer; 77 padding: 0 78 font-size: 20px; 79 outline: none; 80 } 81 .span02 input:hover{ 82 color: red; 83 } 84 </style> 85 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 86 <script type="text/javascript"> 87 $(function(){ 88 $input01 = $('.input01'); 89 $input02 = $('.input02'); 90 $ul01 = $('.ul01'); 91 92 $input02.click(function(){ 93 var $val = $input01.val(); 94 $input01.val(''); 95 if ($val == '') 96 { 97 alert('请输入你要新建的文件名'); 98 return; 99 } 100 else 101 { 102 $a = $('<li class="li01 clearfix"><span class="span01">' + $val + '</span><span class="span02"><input type="button" name="" value="↑" class="input03"><input type="button" name="" value="↓" class="input04"><input type="button" name="" value="删除" class="input05"></span></li>'); 103 $ul01.append($a); 104 } 105 }) 106 107 $ul01.delegate('input','click',function(){ 108 var $handle = $(this).prop('class'); 109 if ($handle == 'input05') 110 { 111 ($(this).parent()).parent().remove(); 112 return; 113 } 114 115 if ($handle == 'input04') 116 { 117 ($(this).parent()).parent().insertAfter(($(this).parent()).parent().next()); 118 return; 119 } 120 121 if ($handle == 'input03') 122 { 123 if (($(this).parent()).parent().prev().length == 0) 124 { 125 alert('this is top'); 126 return; 127 } 128 else 129 { 130 ($(this).parent()).parent().insertBefore(($(this).parent()).parent().prev()); 131 return; 132 } 133 134 135 } 136 }); 137 }); 138 </script> 139 </head> 140 <body> 141 <div class="div1"> 142 <h2 class="h2">To do list</h2> 143 <div class="div2 clearfix"> 144 <input type="text" name="" class="input01" > 145 <input type="button" name="" value="增加" class="input02"> 146 </div> 147 148 <div class="div3"> 149 <ul class="ul01"> 150 <li class="li01 clearfix"> 151 <span class="span01">学习html</span> 152 <span class="span02"> 153 <input type="button" name="" value="↑" class="input03"> 154 <input type="button" name="" value="↓" class="input04"> 155 <input type="button" name="" value="删除" class="input05"> 156 </span> 157 </li> 158 <li class="li01 clearfix"> 159 <span class="span01">学习python</span> 160 <span class="span02"> 161 <input type="button" name="" value="↑" class="input03"> 162 <input type="button" name="" value="↓" class="input04"> 163 <input type="button" name="" value="删除" class="input05"> 164 </span> 165 </li> 166 <li class="li01 clearfix"> 167 <span class="span01">python</span> 168 <span class="span02"> 169 <input type="button" name="" value="↑" class="input03"> 170 <input type="button" name="" value="↓" class="input04"> 171 <input type="button" name="" value="删除" class="input05"> 172 </span> 173 </li> 174 </ul> 175 </div> 176 </div> 177 </body> 178 </html>