【项目】jQuery的清单应用

目录

1.知识点
2.前期布局
3.整体布局
4.细节完善

1. 知识点

实用技术点:

  1. 定时提醒功能的实现
  2. 最大限度的重用数据
  3. 实现更加强大的自定义alert()
  4. position属性的特殊用法

开发思路:

  1. 清单应用的整体布局
  2. 清单应用的细节完善
  3. 清单应用的需求及逻辑梳理
  4. 清单应用的架构方式
  5. 清单应用的数据存储方式
  6. 清单应用的数据组织方式
  7. 模板的实现及应用
  8. 清单应用定时功能的实现
  9. 清单应用响铃提醒的实现

第三方插件及jQuery API

  1. Store.js 实现localStorage读取与存储(第三方插件)
  2. jQuery插件,tatetimepicker(第三方插件)
  3. jQuery deferred的概念及使用方式(jQuery API)
  4. jQuery选择器在真实项目中的应用的使用(jQuery API)
2.前期布局

index.html:


<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>My Todo Apptitle>
head>
<body>
<script src="lib/jquery-3.2.1.min.js">script>
<script src="js/base.js">script>
body>
html>

base.js:

!(function () {
    'use strict';

})();
3.整体布局

HTML代码:


<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>My Todo Apptitle>
    <link rel="stylesheet" href="css/base.css">
head>
<body>
<div class="container"> 
    <div class="add-task">
        <input type="text">
        <button>submitbutton>
    div>
    <div class="task-list">  
        <div class="task-item">  
            <span><input type="checkbox">span>
            <span class="task-content">item contentspan>
            <span>deletespan>
            <span>detailspan>
        div>  
    div>  
    <div class="task-tetail">  
        <div class="content">  

        div> 
        <div> 
            <div class="desc">div>
        div> 
        <div class="remind"> 
            <input type="date">
            <button type="submit">submitbutton>
        div> 
    div>  
div> 
<script src="lib/jquery-3.2.1.min.js">script>
<script src="js/base.js">script>
body>
html>

这里写图片描述

4.细节完善
说明

你可能感兴趣的:(前端-JS基础)