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. [javaSE] 标识符大小写

    java中是严格区分大小写的. PHP中函数,类名称不区分大小写,变量和常量区分大小写 public class VariableDemo { public static void test(){ S ...

  2. org.apache.commons.lang.StringUtils

    org.apache.commons.lang.StringUtils 作为jdk中lang包的补充 检查CharSequence是否为空,null或者空格 CharSequence (CharBuf ...

  3. oracle数据库的安装与连接关键点

    一.window xp系统上安装Oracle Database 10G 解锁Scott.Hr账号并重置口令 远程连接数oracle数据库地址 二.在Mac系统上使用Navicat远程连接oracle数 ...

  4. window.addEventListener绑定事件记得删除

    在做postMessage通信时,window.addEventListener绑定的事件记得要remove掉 就和setTime一样,不然占用内存资源

  5. JS判断客户端是手机还是PC的2个代码

    搬了下砖 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", & ...

  6. ASP.NET MVC学习笔记 第三天

    布局: 如果不使用布局页,需要将Layout属性设置为null. @{     Layout = null; } 使用默认布局页: 使用Add View对话框,选择使用布局页(是布局页的名称文本框为空 ...

  7. ArcGIS 地类净面积计算工具

    地类净面积计算工具可以自己定义图层.字段.地类代码计算任意图层的椭球面积.线状地物扣除.零星扣除和其他扣除,计算地类净面积计算:可以用于二调数据图斑地类.规划地块和基本农田等等需要计算净面积的都可以. ...

  8. Android dialog圆角显示及解决出现的黑色棱角

    最近在开发一个天气预报的app,看到一个比较不错友情提示,如下:                怎么样,看起来比原始的dialog好看吧.好了,做法也许有很多,我介绍下我的做法吧, 首先,我第一个想到 ...

  9. Remove Duplicates from Sorted List 去除链表中重复值节点

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  10. Word 最后一页无法删除-解决办法

    Word 最后一页无法删除-解决办法 制服 word 最后一页无法删除 今天在做一个简历的时候,编辑 word 文档的时候,最后一页空白页怎么也删不掉,百度了很多方法之后,只有一个可行,记录一下. 1 ...