jQuery纯前端TODO
2018-01-08 本文已影响313人
吕阳
1.0 创建
npm init
- 初始化
npm install jquery --save
-
--save 会把信息保存到package.json里面
INIT
如果有package.json, npm init会安装package里面的依赖
*这里想起来vscode如何调试html，直接搭建服务器，使用live-server
微信截图_20180107164539.png
1.3结构说明
*创建目录，创建js/base.js
···
;(function(){
'use strict';
alert(1);
})();
···
不污染windows对象
微信截图_20180107165437.png
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TODO</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container">
<div class="add-task">
<input type="text">
<button>submit</button>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-list">
<div class="task-item">
<span>
<input type="checkbox">
</span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div>
</div>
<div class="task-detail">
<div class="content"></div>
<div>
<div class="remind">
<input type="date">
<button type="submit">submit</button>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="js/base.js"></script>
</body>
</html>
- base.css
* {
background: rgba(0,0,0, 0.1)
}
body {
/* background: #000000; */
}
.container {
max-width: 900px;
margin: 0 auto;
}
成果：
微信截图_20180107195220.png
3.1 细节完善
- css初始化,去掉默认浏览器添加的CSS,常规化，该去掉的去掉。
normalize.css
npm install normalize.css --save
微信截图_20180107195909.png
- 1月8号开始
微信截图_20180108112213.png
