美文网首页
用 jQuery 做代办事宜列表

用 jQuery 做代办事宜列表

作者: 知行社 | 来源:发表于2017-08-28 14:47 被阅读0次

前提条件

概要

类型:实践
难度:中等

任务描述

http://todomvc.com/examples/jquery/ 所示的待办事宜。外观可以不一定和所示 Demo 一致,但要满足下面的功能:

  1. 支持新增。在文本框输入内容,按回车新增。
  2. 支持标记为完成(条目前面的radiobtn)和删除(hover到条目会出现删除按钮)。
  3. 支持对条目的筛选:所有,未完成的,已完成的。

提示

  • 用数组来存待办事宜。可以是类似这样的结构:[{id:'xx', title: '标题',isComplete: false}, ...]
  • 对待办事宜的新增,修改,删除,就是对数组的相关内容的操作。
  • 写个绘制的函数将数组画到页面上。每次数组发生变化后,就执行那绘制函数。
  • 因为代办事宜是动态生成的,所以在代办事宜上的事件都需要用事件委托。

将数组画到页面上推荐用模板引擎 Handlebars

相关文章

  • 用 jQuery 做代办事宜列表

    前提条件 选择元素 获取和设置元素信息 事件 概要 类型:实践难度:中等 任务描述 做 http://todomv...

  • 用 Vue.js 做代办事宜列表

    前提条件 Vue.js 介绍 Vue.js 模板语法 Vue.js 组件 概要 类型:实践难度:中等 任务描述 做...

  • 代办事宜

    工作琐事: 安排1403洗空调 安排41栋8A打玻璃胶 安排1702发票1401发票寄送 安排20A电费燃气费查询...

  • 最近代办事宜

    1、8月工资上报 2、确认冷园长的费用 3、找房子 4、退费 5、教师证明体检 6、与保健院练习,确定新生体检时间...

  • 读《犀利开发jQuery内核详解与实践》(1)

    jQuery简介 jQuery设计宗旨是“Write Less,Do More”,就是说用更少的代码,做更多的事情...

  • 用jQuery来实现Ajax

    大家可以看到在jquery教程中有单独写了ajax请求的那一块,那我们用jquery该怎么做呢? 1.jQuery...

  • jQuery事件

    jquery事件 事件函数列表: 取消绑定事件: jquery元素节点操作 插入节点 删除节点 todolist(...

  • 三、Vue模板渲染

    一、todolist列表 jQuery实现方式html js Vue实现方式html js 比起上面的jQuery...

  • 列表

    日常生活中,我们经常使用到列表,如:代办事项列表、购物清单、十佳榜单等。 下边我们将从以下几个方面来详细了解下列表...

  • Python元组

    元组 元组和列表相似,不同点元组定义后不能改变,列表可以做改变。 元组用小括号,列表用中括号。 列表常用操作 打印...

网友评论

      本文标题:用 jQuery 做代办事宜列表

      本文链接:https://www.haomeiwen.com/subject/vthgdxtx.html