html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ToDoList</title>

    <link rel="stylesheet" type="text/css" href="ToDoList1.css">

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<body>

     <div class="ToDoList_page">

       <div class="ToDoList_container">

         <div id="ToDoList_header">ToDoList:

               <input type="text" id="ToDoList_add" value="what do you need">

         </div>

         <div class="ToDoList_content">待处理事务</div>

             <input type='checkbox' id='all_checkbox' >select all

         <div id="ToDoList_events">

         </div>

             <p class="event_count"></p>

         </div>

       </div>

     </div>

  <script type="text/javascript" src="ToDoList1.js"></script>

</body>

</html>

js

(function(){

      'use strict';

           var add_list = $("#ToDoList_add");

           var event_context =add_list.val();

           var ToDoList_events = $("#ToDoList_events");

           var allCheckbox=$("#all_checkbox");

           var deleteHtml ='<a href="javascript:void(0)" class="event_delete">×</a>';

           var i=0;

            // 增加事件列表

                 $("#ToDoList_add").bind("keypress",function(event){

                      if(event.keyCode===13){

                        i++;

                        var events_list = '<div class="events_list" id=list_'+i+'></div>';

                        var checkboxHtml='<input type="checkbox" class="checkboxList" id=event_'+i+'></input>';

                        ToDoList_events.append(events_list);

                        $("#list_"+i).append(checkboxHtml).append(event_context).append(deleteHtml);

                        // console.log($(".events_list").get(0));

                     }

                 });

            // 全选和全不选

                $("#all_checkbox").bind("click",function(){

                       if(allCheckbox.prop('checked')){

                           $(".events_list input").prop("checked",true);

                           $(".events_list").addClass("addline");

                       }else{

                           $(".events_list input").prop("checked",false);

                           $(".events_list").removeClass("addline");

                        }

                        events_count();

                  });

            // 给新增的元素动态绑定事件----事件代理

               $("#ToDoList_events").bind("click",function(e){

                    var eventId=e.target.id;

                    var isChecked=$("#"+eventId).prop("checked");

                    var eventsAllLength=$(".events_list").size();

                    var events_selected=$(".events_list input:checked").size();

                    if(eventsAllLength ===events_selected){

                      $("#all_checkbox").prop("checked",true);

                    }else{

                      $("#all_checkbox").prop("checked",false);

                    }

                    if(isChecked){

                      $("#"+eventId).prop("checked",true);

                      $("#"+eventId).parent(".events_list").addClass("addline");

                    }else{

                      $("#"+eventId).prop("checked",false);

                      $("#"+eventId).parent(".events_list").removeClass("addline");

                    }

                    events_count();

               });

              // 删除某个事件列表

              $("#ToDoList_events").on("click","a",function(){

                        $(this).parent().remove();

                        events_count();

                    });

               function events_count(){

                   var event_length = $("#ToDoList_events input:checked").size();

                   $(".event_count").html('total:' + event_length + 'selected');

               }

})();

css

body{

    margin: 0px;

    padding: 0px;

    font-size:14px;

}

div .ToDoList_page{

    text-align: center;

}

div .ToDoList_container{

    width: 500px;

    height: 500px;

    border: 1px solid black;

    padding-top: 5px;

    margin-right: auto;

    margin-left: auto;

}

 .events_list .event_delete{

    display: none;

}

.events_list:hover{

    background-color: #cad5eb;

}

.events_list:hover .event_delete{

    display: inline-block;

    text-decoration: none;

    cursor: pointer;

    padding: .3em 1em;

}

.addline{

    text-decoration:line-through;

    color:red;

}

jquery实现TODOList的更多相关文章

  1. jQuery模仿ToDoList实现简单的待办事项列表

    功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...

  2. 【jQuery】todolist

    1 2 3 用npm命令下载依赖,优点:不用去网上找链接,代码都一样 4.jQuery自动下载进node_modules文件下 npm install jquery --save  这句命令的意思是保 ...

  3. 通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式

    Vue MVVM设计模式: 在使用vue进行编程时,不会再涉及到DOM的操作,取而代之的是修改数据层,当把数据进行变更的时候,vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面. 编码时不 ...

  4. Node.js + React + MongoDB 实现 TodoList 单页应用

    之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...

  5. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  6. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  7. MVVM 和 VUE

    一,使用jquery和使用vue的区别 二,对MVVM的理解 三,vue中如何实现响应式 四,vue如何解析模版 五,vue整个实现流程   一,使用jquery和使用vue的区别 jquery实现t ...

  8. Javascript高级面试

    原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...

  9. Jquery开发&BootStrap 实现“todolist项目”

    作业题目:实现“todolist项目” 作业需求: 基础需求:85%参考链接http://www.todolist.cn/1. 将用户输入添加至待办项2. 可以对todolist进行分类(待办项和已完 ...

随机推荐

  1. weblogic 优化设置 http://wenku.baidu.com/view/c42e7a5bbe23482fb4da4cf2.html

    引自:http://wenku.baidu.com/view/c42e7a5bbe23482fb4da4cf2.html

  2. java 单例设计模式

    1.饿汉单例设计模式:  步骤 :   1.定义一个私有的静态成员变量来引用对象(私有的静态对象),设置对象唯一.   2.私有化构造方法,防止new对象.   3.创建一个公开的静态方法,返回上面的 ...

  3. [winserver]设置Server2008R2远程桌面允许每个用户运行多个会话

    首先打开"服务器管理器",选择"角色"-在对话框右边部分选择"添加角色" 根据提示一步步安装即可. 然后在角色中找到"远程桌面服务 ...

  4. Android IOS WebRTC 音视频开发总结（六八）-- Google: What's next for WebRTC

    本文主要从用户,公司和技术角度分析美女视频直播这个行业,文章最早发表在我们的微信公众号上,支持原创,详见这里, 欢迎关注微信公众号blackerteam,更多详见www.rtc.help Justio ...

  5. 7.arm汇编 bic和orr指令

    1. bic BIC指令的格式为: BIC{条件}{S}  目的寄存器,操作数1,操作数2 BIC指令用于清除操作数1的某些位,并把结果放置到目的寄存器中. 操作数1应是一个寄存器, 操作数2可以是一 ...

  6. 30、shiro框架入门2，关于Realm

    1.Jdbc的Realm链接,并且获取权限 首先创建shiro-jdbc.ini的配置文件,主要配置链接数据库的信息 配置文件中的内容如下所示 1.变量名=全限定类名会自动创建一个类实例 2.变量名. ...

  7. xtrabackup备份与恢复实践

    说明   xtrabackup  --percona 特点: 开源,在线备份innodb表 支持限速备份,避免对业务造成影响 支持流备 支持增量备份 支持备份文件压缩与加密 支持并行备份与恢复,速度快 ...

  8. Oracle SQL: TO_CHAR and TO_NUMBER 笔记

    (1)select TO_CHAR(123.56,'999.9') from dual; will return 123.6select TO_NUMBER('123.56','999.9') fro ...

  9. js 更改head的title

    使用document.title = "hello"; 不能使用 $("title").text("dd");或者            $ ...

  10. Win7 64位系统 VS2010连接Oracle报错的问题

    1,异常现象: TNS无法识别 2,异常分析:VS2010启动调试的时候,出现异常.但是使用IIS作为服务器的时候,是不会出现异常,也就是可以正常访问到数据库,后来分析是由于VS自带服务器ASP.NE ...