jQuery笔记

jQuery

javascript库

比如说 仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了
Javascript库：即libray,是一个封装好的待定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解： 就是一个JS文件，里面对我们原生JS代码进行了封装。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

常见的javascript库

• jQuery
• prototype
• TUI
• Dojo
• Ext JS
• 移动端的zepto

这些库都是对原生javascript的封装，内部都是用javascript实现的，主要学的是jQuery

jQuery的概念

jQuery是一个快速。简洁的javascript库，其设计的宗旨是 “write less Do More” ，即倡导写更少的代码，做更多的事情。
j 就是 javascript ； Query 查询；意思是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了javascript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax 互交
jQuery的本质：就是学习调用这些函数(方法)。
jQuery的出现就是加快前端人员的开发速度。可以非常方便的调用和使用它，从而提升开发效率

优点

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程、隐式跌代
• 对事件、样式。动画支持。大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三发的插件，列如：树形菜单、日期控件、轮播图等
• 免费，开源

jQuery的下载

官方地址：https://jquery.com/
版本：

• 1x ：兼容IE 678等低版本浏览器，官网不再更新
• 2x ： 不兼容 IE 678 等低版本浏览器， 官网不再更新
• 3x ：不兼容IE 678 等低版本浏览器，是官方主要更新维护的版本

各版本的下载 ：https://code.jquery.com/

使用步骤

1.引入jQuery文件

jQuery的入口函数

第一种

$(function (){
	. . .// 此处是页面DOM加载完成的入口
});

第二种

$(document) . ready(function(){
	. . . //此处是页面DOM加载完成的入口
});

1.等着DOM结构渲染完毕即可执行内部代码，不必等到外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js 中的DOMContentLoaded。
3.不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码。
更推荐第一种方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtBG6pqK-1599838705695)(./1591019224945.png)]

jQuery的顶级对象$

jQuery对象和DOM 对象转换

DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，想要使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用

1. DOM对象转换为jQuery对象： $(DOM对象)

$('div')

2. jQuery对象转换成DOM对象(两种方式)
   ①

$('div')[index]   //index是索引号

②

$('div').get(index)     //index是索引号

API部分

基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准

$("选择器")   //里面选择器直接写CSS选择器即可，**但是要加引号**

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类class的类
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div.p.li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用 > 号 ,获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

**知识铺垫：**jQuery设置样式

$("div").css('属性' , '值')

隐式迭代(重要)

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们使用。

案例

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

筛选方法(重点)

语法	用法	说明
parent()	$(“li”).parent();	查找父级
children()	$(“ul”).children(“li”)	相当于(“ul>li”),最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”)	相当于(“ul li”),后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll(expr)	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll(expr)	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	查找当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于(“li:eq(2)”),inde从0开始

重点记住：parent() , children() , find() ，siblings() , eq()

案例部分：

链式编程

• 链式编程是为了节省代码量,看起来更优雅。

$(this).css("color', 'red").siblin().css("color,");

使用链式编程一定注意是 哪个对象执行样式

jQuery的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素消除样式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C22Us5sj-1599838705716)(./1591183717589.png)]

样式操作

操作css方式

jQuery可以使用css方法来修改简单元素样式：也可以操作类，修改多个样式。
1.参数只写属性名，则是返回属性值

$(this).css("color")

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引导

$(this).css("color","red");

3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引导

$(this).css("color":"white","font-size":"20px")

设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1.添加类

&("div").addClass("current");

2.移除类

$("div").removeClass("current")

3.切换类

$("div").toggleClass("current");

类操作与className 区别

原生JS中 className 会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作，不影响原先的类名

JQuery效果

显示

1.显示语法规范

show ([speed, [easing], [fn]])

2.显示参数

1. 参数都可以省略,无动画直接显示。
2. speed:三种预定速度之一的字符串( “slow” , “normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果，默认是"swing” ,可用参数"linear" 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行次。

隐藏

1.隐藏语法规范

hide ([speed, [easing], [fn]])

2.隐藏参数

1. 参数都可以省略,无动画直接显示。
2. speed :三种预定速度之-的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"Ilinear" 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行次。

切换

1.切换语法规范

toggle ([speed, [easing], [fn]])

2.切换参数

1. 参数都可以省略,无动画直接显示。
2. speed :三种预定速度之-的字符串( “slow”，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"Ilinear” 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行次。

滑动效果

1.滑动切换效果语法规范

slideToggle ([speed, [easing], [fn]])

2.滑动切换效果参数

1. 参数都可以省略。
2. speed :三种预定速度之-的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear" 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

事件切换

hover([over],out)

1. over:鼠标移到元素上要触发的函数(相当于mouseenter )
2. out:鼠标移出元素要触发的函数(相当于mouseleave )

动画队列及其停止排队方法 stop()方法

1.动画或效果队列

动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。

2.停止排队

stop()

1. stop()方法用于停止动画或效果。
2. 注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
   

淡入 效果语法

fadeIn ([speed, [easing], [fn]])

淡入 效果参数

1. 参数都可以省略。
2. speed:三种预定速度之一 的字符串( “slow”，“normal” ,or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"Ilinear" 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行-次。

淡出 效果语法

fadeOut ( [speed, [easing], [fn]])

淡出 效果参数

1. 参数都可以省略。
2. speed:三种预定速度之一 的字符串( “slow” ，“normal” , or "fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"Ilinear” 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行次。

淡入淡出切换效果

fadeToggle ([speed, [easing], [fn]])

淡入淡出切换效果参数

1. 参数都可以省略。
2. speed :三种预定速度之一 的字符串( “slow” ，“normal” ,or “fast” )或表示动画时长的秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"linear" 。

渐进方式调整到指定的不透明度

fadeTo([ [speed], opacity, [easing], [fn]])

效果参数

1. opacity透明度必须写,取值0~1之间。
2. speed:三种预定速度之一 的字符串( “slow”，“normal” , or "fast” )或表示动画时长的毫秒数值(如: 1000)。 必须写
3. easing : (Optional)用来指定切换效果,默认是"swing”, 可用参数"Iinear" 。
4. fn:回调函数,在动画完成时执行的函数,每个元素执行次。

自定义动画 animate

1.语法

animate (params, [speed], [easing], [fn] )

2.参数

1. params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号，如果是复合属性则需要采
   取驼峰命名法borderLeft。其余参数都可以省略。
2. speed:三种预定速度之一的字符串( “slow” ，“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
3. easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"Iinear"
4. fn:回调函数,在动画完成时执行的函数,每个元素执行-次。

属性操作

设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 a 元素里面的href，比如 input 元素里面的 type
1.获取属性语法

prop("属性")

2.设置属性值语法

prop("属性","属性值")

设置或获取元素自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=“1”
1.获取属性语法

attr("属性")  //类似原生  getAttribute()

2.设置属性语法

attr("属性","属性值")  //类似原生  setAttribute()

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不服修改DOM元素结构。一旦页面刷新，，之前存放的数据都将被移除。

1.附加数据语法

data("name","value")  //向被选元素附加数据

2.获取数据语法

date("name") //向被选元素获取数据

案例：购物车模块-全选分析

① 全选思路：里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3个小复选框就可以了
④ 当我们每次点击小的复选框按钮，就来判断：
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮上，否则全选按钮不选。
⑥ :checked选择器 :checked 查找被选中的表单元素。

内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容html()(相当于原生inner HTML)

html()//     获取元素的内容
html("内容") // 设置元素的内容

2. 普通元素文本内容text( (相当与原生 innerText)

text()    //获取元素的文本内容
text("文本内容") // 设置元素的文本内容

主要针对元素的内容还有表单的值操作

①.普通元素内容html() (相当于原生innerHTML)

html() //获取元素的内容
html("文本内容") //获取元素的文本内容

获取值：  $("a").html()
赋  值： $("a").html("赋值内容，识别标签")

②.普通元素文本内容text() (相当于于原生innerText)

text()  //获取元素的文本内容
text("文本内容")    //设置元素的文本内容

获取值：$("a").text()
赋   值：$("a").text("赋值内容，NO识别标签") 

③.表单(input)的值 val() (相当于原生value)

获取值：$("input").val()
赋   值：$("input").val("val()操作标签，必须带有value属性--表达标签") 

购物车模块-增减商品数量分析

①核心思路：首先声明一个变量，当我们点击+号(increment),就让这个值++，然后赋值给文本框。
② 注意1：只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值
③修改表单的值是val()方法
④注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++，要获取表单的值
⑤减号(decrement)思路同理，但是如果文本框的值是1，就不能再减

购物车模块–修改商品小计分析

① 核心思路：当每次点击+号 或者 -号 ，根据文本框的值，乘以 当前商品的价格 就是 商品的小计
② 注意1：只能增加本商品的小计，就是当前商品的小计模块(p-sum)
③ 修改普通元素的内容是text()方法
④ 注意2：当前商品的价格，要把￥符号去掉在相乘 截取字符串substr(1)
⑤parents(“选择器”)可以返回指定祖先元素(注意是parents不是parent)
⑥最后计算的结果如果想要保留2位小数 通过toFixed(2)方法

⑦ 用户也可以直接修改表单里面的值，同样要计算小计。用表单channge事件
⑧ 用最新的表单内的值乘以 单价(p-price)即可 但是还是当前商品小计

jQuery 元素操作

主要是 遍历，创建，添加，删除元素操作。

遍历元素

jQuery隐式迭代是对同一类元素做出了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历(比如说有3个相同的div ，div里面的元素分别为 1 2 3)。

语法1 - .each

$("div").each(function (index,domEle){
	//回调函数
})

1. each()方法遍历匹配(相同)的每一个元素，主要用DOM处理，cach每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jQuery对象。
3. 所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)
   

语法2 - $.each

$.each (object，function (index, element) { XXX; } )

1. $.each0方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数: index 是每个元素的索引|号; element 遍历内容

$.each(object,function(index,element){
	//回到函数
})

1. $.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index是每个元素的索引号; element 遍历内容

购物车模块–计算总计和总额

1. 核心思路： 把所有文本框里面的值相加就是总计数量，总额同理
2. 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
3. 点击+号 -号 会改变总计(amount-sum)和总额(price-sum)
4. 因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可
5. 注意1：总计是文本框里面的值相加用val() 总额是普通元素的内容用 text()
6. 要注意普通元素里面的内容要去掉￥并且转换成数字型才能相加

创建元素

语法：

$("<li><li>")

添加元素

内部添加

element.append("内容")

把内容放入匹配元素内部后面，类似原生appendChild。

element.prepend("内容")

把内容放入匹配元素内部前面，类似原生appendChild。

外部添加

element.after("内容") 

把内容放入目标元素的后面

element.before("内容") 

把内容放入目标元素的前面

区别

内部添加元素，生成之后，它们是父子关系。
外部添加，生成之后，它们是兄弟关系

删除元素

element.remove() //  删除匹配的元素(本身)

element.empty() //  删除匹配的元素集合中的所有子节点

element.html(" ") // 清空匹配的元素内容  注意空格

购物车模块-删除商品

1.核心思路：把商品remove() 删除元素即可
2.有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
3.商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
4.删除选中的商品： 先判断小的复选框按钮是否选中状态(checked)，如果是选中，则删除对应的商品
5.清理购物车： 则是把所有的商品全部删掉
6.不要忘记改变总价 删除商品后调用 总计和总额模块函数

购物车模块-选中商品添加商品

1.核心思路: 选中商品添加背景，不选中移除背景即可。
2.全选按钮点击; 如果全选是选中的，则所有的商品添加背景，否则移除背景。
3.小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景。
4.这个背景可以通过类名修改，添加类和删除类。

jQuery事件

jQuery事件注册

单个事件注册

• 语法：

element.事件(function() { } )

列如：

$(".div").click(function(){  事件处理程序})

其他事件源和原生基本一致。
比如mouseover、mouseout、blur、foucs、change、keydown、keyup、resize、scroll 等

jQuery事件处理

on() 绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：

element.on(event,[selector],fn)

1.event:一个或多个用于空格分隔的事件类型，如 “click” 或”keydown“.
2.selector:元素的子元素选择器。
3.fn: 回调函数 即绑定在元素上的侦听函数。

on()方法优势1

可以绑定多个事件，多个处理事件处理函数

$("div").on({
	mouseover:function(){},
	mouseout:function(){},
	click:function(){}
});

如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
				$(this).toggleClass("current");
});

on()方法优势2:

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click','li',function(){
		alert('hello world');
})

在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本用on()方法替代。

on()方法优势3:

动态创建的元素，click()没有办法绑定事件，on()可以动态生成的元素绑定事件

发布微博案例

1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中。

2.点击删除按钮，可以删除当前的微博微博。

off()解绑事件

off( )方法可以移除通过on()方法添加的事件处理程序。

$("p").off()  //解绑p元素所有事件处理程序
$("p").off("click")  // 解绑p元素上的点击事件  后面的 off 是监听函数名
$("ul").off("click","li"):  //解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

自动触发事件 trigger()

比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()  //第一种简写形式   元素.事件()

 element.trigger("type") //第二种自动触发模式  元素.trigger("事件")

$("p").on("click",function(){
		alert("hi-")
});
$("p").trigger("click");  //此时自动触发点击事件，不需要鼠标点击

第三种，不会触发元素的默认行为 ，如表单的光标会闪动

element.triggerHandler(type)  //第三种自动触发模式

jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector]，function(event) {} )

阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagataion()

jQuery对象拷贝

如果想要把某个对象拷贝(合并)给另一个对象使用，此时可以使用$.extend()方法
语法：

$.extend([deep],target,object1,[object N])

1.deep: 如果设为true 为深拷贝，默认为false 浅拷贝
2.target： 要拷贝的对象
3.object 1：带拷贝到第一个对象的对象。
4.object N: 带拷贝到第N个对象的对象。

5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6.浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象

7.深拷贝，前面加true，完全克隆(拷贝对象，而不是地址)，修改目标对象不会影响被拷贝对象。
8.深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起

jQuery多库共存

问题概括：

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会使用同样的符号作为标识符，从而在一起使用的时候发生冲突
客观需求：
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同存在，这就叫多库共存。
jQuery解决方案

1. 把里面的$符号同一改为jQuery。比如 jQuery(“div”)
2. jQuery变量规定新的名称： $.noConflict()

var xx =$.noConflict();

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
**注意：**这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此为称为jQuery插件。

jQuery插件常用的网站

1. jQuery插件库 ：http://www.jq22.com/
2. jQuery之家：http://www.htmleaf.com/

jQuery插件使用步骤：

1. 引入相关文件。（jQuery文件和插件文件）
2. 复制相关html、css、js(调用文件)

实用插件

1. 瀑布流

(瀑布流式布局,视觉表现为参差不齐的多栏布局)

2. 图片懒加载

(图片使用延迟加载可提高网页下载速度。可以帮助减轻服务器负载) —当我们页面滑动到可视区域，再显示图片

3. 全屏滚动(fullPage.js)

全屏滚动插件fullPage.js

综合案例 toDoList

1. 文本框里面输入内容，按下回车，就可以生成待办事项
2. 点击待办事项复选框，就可以把当前数据添到已完成事项里面
3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
4. 但是本页面内容刷新页面不会丢失

分析

1. 刷新页面不会丢失数据，因此需要用到本地存储 LocalStorage
2. 核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
3. 储存数据格式 : var todolist = [{ title:‘xxx’,done:false}]
4. **注意点1：**本地存储localstorage里面只能存储字符串格式，需要把对象转换成 JSON.stringify(data).
5. **注意点2：**获取本地存储数据，需要把里面的字符串转换成对象格式 JSON.parse() 我们才能使用里面的数据。

按下回车把数据添加到本地存储里面

1. 切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以要把数据保存到本地储存里面。
2. 利用事件对象 .keyCode判断用户按下回车键(13)。
3. 声明一个数组，保存数据。
4. 先要读取本地存储原来的数据（声明函数 getData() ）,放到这个数组里面。
5. 之后把最新从表单获取过来的数据，追加到数组里面。
6. 最后把数组存储给本地存储(声明函数 savaDate() )

本地存储数据渲染加载到页面

1. 因为后面也会经常渲染加载操作，所以声明一个函数 load() ，方便后面调用。
2. 先要读取本地存储数据。（数据不要忘记转换成对象格式）
3. 之后遍历这个数据（$.each() ）,有几条数据，就生成几个小li添加到ol里面。
4. 每次渲染之前，先把原先里面ol的内容清空（$(“ol”)empty()）然后渲染加载最新的数据

删除操作

1. 点击里面的a链接，不是删除的li，而是删除本地储存对应的数据
2. 核心原理：先获取本地储存数据，删除对应的数据，保存给本地储存，重新渲染列表li
3. 我们可以给链接自定义属性记录当前的索引号
4. 根据这个索引号删除相关的数据——数组的splice(i,1)方法
5. 储存修改后的数据，然后存储给本地存储
6. 重新渲染加载数据列表
7. 因为a是动态创建的，我们使用on方法绑定事件

正在进行和以完成选型操作

① 当我们点击了小的复选框，修改本地存储数据,再重新渲染数据列表。
② 点击之后,获取本地存储数据。
③ 修改对应数据属性done为当前复选框的checked状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load加载函数里面,新增一 个条件，如果当前数据的done为true就是已经完成的,就把列表渲染加载到ul里面
⑦如果当前数据的done为false ,则是待办事项,就把列表渲染加载到ol里面

统计正在进行个数和已经完成个数

①在我们load函数里面操作
②声明2个变量: todoCount待协个数doneCount已皖成个数
③当进行遍历本地存储数据的时候，如果数据done为false ,则todoCount+ +,否则doneCount+ +
④最后修改相应的元素tdxst0

jQuery尺寸和位置操作

尺寸

语法	用法
width()/ height()	取得匹配元素宽度和高度值只算width / height
innerWidth（） / innerHieght（）	取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含padding、borde、 margin

• 以上参数为空,则是获取相应值,返回的是数字型。
• 如果参数为数字,则是修改相应值。
• 参数可以不必写单位。

位置操作

位置主要有三个: offset()、 position()、 scrollTopO/scrollLeft()

1. offset(设置或获取元素偏移)

1. offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
2. 该访法有2个属性left、top。 offset0.top 于获取距离文档顶部的距离, offset).left 于获取距离文档左侧的距离。
3. 可以设置元素的偏移: offset({ top: 10, left: 30 });

2. position()获取元素偏移

1. position0 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
   

3. scrollTop0/scrollLeft(设置或获取元素被卷去的头部和左侧

1. scrolITop0 方法设置或返回被选元素被卷去的头部。

案例:带有动画的返回顶部

①核心原理:使用animate动画返回顶部。
②animate动画函数面有个scrollTop属性,可以设置位置
③但是元素做动画,因此$( “body,html” ).animate({scrollTop:O})

案例代码

jQuery部分

$(function() {
    // alert(11);
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                // 先读取本地存储原来的数据
                var local = getDate();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                local.push({ title: $(this).val(), done: false });
                // 把这个数组local 存储给本地存储
                saveDate(local);
                // 2. toDoList 本地存储数据渲染加载到页面
                load();
                $(this).val("");
            }
        }
    });
    // 3. toDoList 删除操作
    $("ol, ul").on("click", "a", function() {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        console.log(data);
        // 修改数据
        var index = $(this).attr("id");
        console.log(index);
        data.splice(index, 1);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    // 4. toDoList 正在进行和已完成选项操作
    $("ol, ul").on("click", "input", function() {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop("checked");
        console.log(data);

        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    // 读取本地存储的数据 
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    // 渲染加载数据
    function load() {
        // 读取本地存储的数据
        var data = getDate();
        console.log(data);
        // 遍历之前先要清空ol里面的元素内容
        $("ol, ul").empty();
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        // 遍历这个数据
        $.each(data, function(i, n) {
            // console.log(n);
            if (n.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                todoCount++;
            }

        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);

    }

})

html部分

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>


</body>

</html>

es6