1

2

3 用npm命令下载依赖,优点:不用去网上找链接,代码都一样

4.jQuery自动下载进node_modules文件下

npm install jquery --save  这句命令的意思是保存,使package.json文件与node_modules同步(save以后dependencies下才有jquery,有利于项目部署,此时若删掉node_modules文件,保留package.json,直接npm install会自动下载相关依赖)

5.把代码写成这种形式,避免直接写到window中(可能将window的属性覆盖)

;(function(){
'use strict'; })();

6.传统reset方法http://meyerweb.com/eric/tools/css/reset/index.html

现采用normalize方法https://necolas.github.io/normalize.css/(或http://www.bootcdn.cn/normalize/)

其命令为:npm install normalize.css

在html中引用normalize.css时应该放在第一位

7.原理框图如下

8.storejs插件

参考:https://www.awesomes.cn/repo/marcuswestin/store-js

适用于所有浏览器的本地存储,不使用 cookies 或者 flash。会根据浏览器的不同选择 localStorage, globalStorage, 和 userData 作为存储引擎。

store.js 公开了一个简单的接口来实现跨浏览器的本地存储。

// Store 'marcus' at 'username'
store.set('username', 'marcus') // Get 'username'
store.get('username') // Remove 'username'
store.remove('username') // Clear all keys
store.clear() // 存储一个对象字面量 - store.js 内部使用了 JSON.stringify
store.set('user', { name: 'marcus', likes: 'javascript' }) // 获取存储的对象 - store.js 内部使用了 JSON.parse
var user = store.get('user')
alert(user.name + ' likes ' + user.likes) // Get all stored values
store.getAll().user.name == 'marcus' // Loop over all stored values
store.forEach(function(key, val) {
console.log(key, '==', val)
})

在本项目中

    function refresh_task_list() {
store.set('task_list',task_list);
render_task_list();
}
function get(index) {
return store.get('task_list')[index];
}

9.datatimepicker插件

参考:http://www.jq22.com/jquery-info332

该插件可以精确到分钟

function render_task_detail(index) {
if(index===undefined||!task_list[index]) return;
var item =task_list[index];
var tpl=
'<form>'+
'<div class="content">'+
(item.content||'')+
'</div>'+
'<div class="input-item"><input style="display: none" type="text" name="content" value="'+item.content+'"></div>'+
'<div>'+
'<div class="desc input-item">'+
'<textarea name="desc">'+(item.desc||'')+'</textarea>'+
'</div>'+
'</div>'+
'<div class="remind input-item">'+
'<label>提醒时间</label>'+
'<input class="datetime" name="remind_date" type="text" value="'+(item.remind_date||'')+'">'+
'</div>'+
'<div input-item><button type="submit">更新</button></div>'+
'</form>'; /*清空task详情模板*/
$task_detail.html(null);
/*使用新模板*/
$task_detail.html(tpl);
$('.datetime').datetimepicker();
/*选中其中的form元素*/
$update_form=$task_detail.find('form');
$task_detail_content=$update_form.find('.content');
$task_detail_content_input=$update_form.find('[name=content]');
/*双击内容元素显示input,隐藏自己*/
$task_detail_content.on('dblclick',function () {
$task_detail_content_input.show();
$task_detail_content.hide();
}) $update_form.on('submit',function (e) {
e.preventDefault();
var data={};
/*获取表单中各个input的值*/
data.content=$(this).find('[name=content]').val();
data.desc=$(this).find('[name=desc]').val();
data.remind_date=$(this).find('[name=remind_date]').val();
update_task(index,data);
hide_task_detail();
})
}

项目中使用到了Deferred(延迟)对象,具体可以参考我的另一篇文章:http://www.cnblogs.com/yujihang/p/6875263.html

【jQuery】todolist的更多相关文章

  1. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  2. 【jQuery】复选框的全选、反选,推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  3. js【jquery】 - DOM操作

    1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...

  4. 【jQuery】 实用 js

    [jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...

  5. 【jQuery】 Ajax

    [jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...

  6. 【jQuery】 常用函数

    [jQuery] 常用函数 html() : 获取设置元素内的 html,包含标签 text() : 获取设置元素内的文本, 不包含标签 val() : 获取设置 value 值 attr() : 获 ...

  7. 【jQuery】 资料

    [jQuery] 资料 1. 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 2. 事件 http://www.w3sch ...

  8. 【jQuery】 效果

    [jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...

  9. 【jQuery】 选择器

    [jQuery] 选择器 资料: w3school  http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...

随机推荐

  1. 0/1背包问题(DP)

    Description 给定 n 个物品和一个背包.物品 i 的重量是 wi ,其价值为 vi ,背包的容量为 C .问:应该如何选择装入背包的物品,使得装入背包中物品的总价值最大? Input 输入 ...

  2. winform程序限制只能打开一个进程

      有很多方案,先来最傻瓜式的  : static class Program     {         /// <summary>         /// 应用程序的主入口点.     ...

  3. [javaSE] 网络编程(URL)

    获取URL对象,new出来,构造参数:String的路径 调用URL对象的getProtocal()方法,获取协议 调用URL对象的getHost()方法,获取主机 调用URL对象的getPath() ...

  4. ios开发 学习积累20161101

    20161101 XML的声明 <?XML version="1.0" encoding="UTF-8" ?> XML文档必须有根元素 XML 对大 ...

  5. Cookie写入之path的坑

    问题 我在/page/index/index.html中向浏览器添加了一个useid的cookie(这里没有指定path), 然后试着从/page/demo/demo.html中取值,发现无法取到, ...

  6. CenOs7安装oracle图文详细过程(01)

    原创作品,转载请在文章头部(显眼位置)注明出处:https://www.cnblogs.com/sunshine5683/p/10011441.html 1.检查必要的安装包是否安装 命令脚本: rp ...

  7. RegExp对象的exec方法

    RegExp对象的exec方法和String对象的match方法用法十分相似,分两篇博客讲讲其各自的用法和它们之间的异同. 下一篇讨论match方法的用法和两者的异同. 定义及语法 [定义] exec ...

  8. 关于npm构建angular2项目问题

    我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...

  9. 转:使用VS Code断点调试PHP

    使用VS Code断点调试PHP vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 PHP 代码更是方便简洁,下面我们来一起看一下. ...

  10. Angular面试题二

    十一.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 会提示 Duplicates in a repeater are not allowed. 加 track by ...