大佬教程收集整理的这篇文章主要介绍了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>
以上是大佬教程为你收集整理的JQuery TODOList全部内容,希望文章能够帮你解决JQuery TODOList所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。