03.jQuery 第三天笔记

03.jQuery 第三天笔记

一、思维导图

1. jQuery事件方法
   绑定事件：on
   1）同时绑定多个事件
   设置不同的事件处理函数
   jQuery对象.on({
   事件名1:事件处理函数1,
   事件名2:事件处理函数2,
   事件名3:事件处理函数3
   })
   设置相同的事件处理函数
   jQuery对象.on( 事件名字符串 , 事件处理程序 )
   jQuery对象.on(“click mouseleave”,function(){
   alert(1)
   })
   2）事件委托
   上层元素.on( 事件名 , 下层元素选择器 , 事件处理程序)
   注意
   1、事件是绑定到了上层元素上，由下层元素触发
   2、可以为动态创建的元素（未来元素）预定事件
   3、在事件处理程序中，this指向触发事件的下层元素
   解绑事件：off
   解绑所有事件
   jQuery对象.off()
   解绑指定类型事件
   jQuery对象.off(事件类型名)
   jQuery对象.off(“click”)
   解绑委托事件（本身的事件还在）
   jQuery对象.off(事件类型名,选择器)
   $(“ul”).off(“click”,“li”)
   jQuery对象.off(事件类型名,"**")
   解绑所有委托事件
   触发事件
   jQuery对象.事件名()
   会触发浏览器默认行为
   jQuery对象.trigger(事件类型)
   会触发浏览器默认行为
   jQuery对象.triggerHandler(事件类型)
   （最常用）
   不能触发浏览器的默认行为,只能让事件处理程序执行

二、理解

1. one()只能触发事件一次
2. 要解绑所有委托事件jQuery对象.off(事件类型名，"**")
3. 自动触发事件
   4） $(“div”).click();
   5） $(“div”).trigger(“click”);
   6） $(“div”).triggerHandler(“click”);

案例

今天的重点是 todolist 案例

1. 本地存储数据格式：
   

2. 1）本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()

   2）获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()

3. 存： 对象———> JSON.stringify()———>字符串———>存储到localStorge
   取： 从localStorge获取———>字符串———>JSON.parse———>对象

4. 原理
   

5. 步骤：
   1>先获取本地数据
   2>修改数据
   3>存储到本地
   4>重新渲染页面

6. 自定义属性 attr 固有属性 prop

三、todolist案例js代码示例

1、

2、

3、

4、

5、

6、

总结：

独立完成todolist案例