JavaScript学习基础笔记08

javascript学习笔记08——本地存储

一、 本地存储sessionStorage和localStorage

1. 本地存储的特征
   • 数据存储在用户浏览器中
   • 设置，读取方便，甚至页面刷新不丢失数据
   • 容量较大，sessionStorage约5M，localStorage约20M
   • 只能存储字符串，可以将对象JSON.stringify()编码后存储
2. window.sessionStroage
   • 生命周期为关闭浏览器窗口
   • 在同一个窗口（页面）下数据可以共享
   • 以键值对的形式存储使用,
   • 存储数据：sessionStorage.setItem(key,value);
   • 获取数据：sessionStorage.getItem(key);
   • 删除数据：sessionStorage.removeItem(key);
   • 删除所有数据：sessionStorage.clear()
3. window.localStorage
   • 生命周期是永久生效，除非手动删除，否则关闭页面也会存在。\
   • 可以多窗口（页面）共享（同一个浏览器可以共享）
   • 以键值对的形式存储
   • 存储数据：localStorage.setItem(key,value)
   • 获取数据：localStorage.getItem(key)
   • 删除数据：localStorage.removeItem(key)
   • 删除所有数据：localStorage.clear()
4. 案例：记住用户名
   • 把数据存储起来，用到本地存储
   • 关闭页面，可以显示用户名，故为使用localStorage
   • 打开页面，先判断是否有这个用户名，如果有则在表单里面显示用户名，并且勾选复选框
   • 当复选框发生改变的时候change事件

二、jQuary基础知识

1. jquery概述
   • JavaScript库：即library,是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很对预先定义好的函数在里面，比如动画animate，hide，show。比如获取元素等
   • 常见的JavaScript库：这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，主要学习jQuery
     • jQuery
     • prototype
     • YUI
     • Dojo
     • Ext Js
     • 移动端的zepto
2. jQuery的概念
   -jQuery是一个快速的、简洁的JavaScript库 ，其设计的宗旨是”write Less,Do More“,即提倡写更少的代码，做更多的事情。
   • jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax请求。
   • 优点：
     • 轻量级。核心文件才几十kb，不会影响页面加载速度
     • 垮浏览器兼容，基本兼容了现在主流的浏览器
     • 链式编程，隐式迭代
     • 对事件，样式，动画的支持。大大简化了DOM操作
     • 支持插件扩展开发。有着丰富的第三方插件。例如：树形菜单、日期控件、轮播图等
3. jQuery使用
   • jQuery的下载：https://jquery.com/
   • 引入jQuery函数
   • jQuery入口函数:等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源都加载完。

     $(function(){
         // 此处是页面DOM加载完成后的入口（更常用）
     });
     //或者
     
     $(document).ready(function(){
          // 此处是页面DOM加载完成后的入口
     });

   • jQuery的顶级对象$
     • $是jQuery的别称（另外的名字），在代码中可以使用jQuery代替$,通常使用$
     • $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
   • jQuery对象和DOM对象
     • 用原生JS获取来的对象就是DOM对象
     • 用jQuery获取来的元素就是jQuery对象
     • jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组的形式存储）
     • jQuery只能使用jQuery方法，DOM对象则使用原生的JavaScript方法。
   • DOM对象与jQuery对象之间可以相互转换
     • DOM对象转换为jQuery对象：$(DOM对象)

       $('div');  
       //或者
       var mydiv=document.querySelector('div');
       $(mydiv); // z转换为jQuery对象 

     • jQuery对象转换为DOM对象

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

三、jQuery常用的API

1. jQuery选择器

   • jQuery基础选择器将原生JS做了封装，使获取元素统一标准

     $('选择器')    //里面选择器直接写CSS选择器即可，添加引号

   • 常用选择器

     名称	用法	描述
     ID选择器	$(‘#ID’)	获取固定ID的元素
     全选选择器	$(‘*’)	匹配所有元素
     类选择器	$(‘.class’)	获取同一类class元素
     标签选择器	$(‘div’)	获取同一标签所有元素
     并集选择器	$(‘div,p,li’)	选取多个元素
     交集选择器	$(‘li.current’)	交集元素
     子代选择器	$(‘ul>li’)	使用>号，获取亲儿子的层级元素，注：并不会获取孙子层的元素
     后代选择器	$(‘ul li’)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

   • jQuery样式设置$('div').css("属性","值")

   • 隐式迭代（重要）

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

   • jQuery筛选选择器

     语法	用法	描述
     :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元素中，选择索引号为偶数的元素

   • jQuery筛选方法

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

   • jQuery里面的排他思想

     • 想要多选一的效果，排他思想：当前元素设置样式，其余元素清除样式

               	$(function(){
           $('button').click(function(){
       //点击的元素背景变为蓝色
       $(this).css('background','blue');
       //其余兄弟去除背景
       $(this).siblings('button').css('background','');
          })
          })

   • jQuery中得到元素索引号$(this).index()

        	 $('.left li').mouseover(function(){
     var index=$(this).index();
     console.log(index);  //打印出鼠标经过1元素的索引号
     $('.right div').eq(index).show();
     $('.right div').eq(index).siblings().hide();
     })

   • 链式编程：节省代码量，使代码看起来更加简洁

      //实现排他思想，当前元素文字颜色变为红色，其余元素去除样式
     $(this).css('color','red');
     $(this).siblings().css('color','');
     // 简化写法，运用链式编程
     $(this).css('color','red').siblings().css('color','');

     • 使用链式编程需要注意是在为哪个元素执行样式

2. jQuery样式操作

   • jQuery可以使用CSS方法来修改简单元素样式；同时也可以操作类修改多个样式
   • 参数只写属性名，则是返回属性值$(this).css("color"),（带有单位的字符串）
   • 参数是属性名，属性值，使用逗号分隔，是设置样式，属性必须加引号，值如果是数字可以可以不用跟单位和引号。
   • 参数可以是对象形式，方便设置多个样式。属性名和属性值用冒号隔开，属性可以不用加引号。
     • 基本写法$(this).css({'color':'white','font-size':'24px'});
     • 如果是复合属性则必须使用驼峰命名法，例如background-color必须写为backgroundColor
     • 如果值不是数字则需要添加引号
   • 设置类样式方法
     • 作用等同于以前的classList,可以操作类样式。注：操作类里面的样式不用加点。
     • 添加类：$('div').addClass('current'); (addClass)
     • 删除类：$('div').removeClass('current'); (removeClass)
     • 切换类：$('div').toggleClass('current'); (toggleClass) 如果元素没有这个类则添加上这个类名，如存在这个类则删除掉。
   • 类操作与className区别
     • 原生JS中className会覆盖元素原先里面的类名。
     • jQuery里面的类操作只是对指定类进行操作，不影响原先的类名。

3. Jquery效果

   • 常见的动画效果：
     • 显示与隐藏：show() , hide() , toggle()
     • 滑动：slideDown() , slideUp() , slideToggle()
     • 淡入淡出：fadeIn() , fadeOut() , fadeToggle() , fadeTo()
     • 自定义动画：animate()
   • 显示隐藏元素效果
     • 显示元素语法规范：show([speed],[easing],[fn])，参数可以都省略，无动画直接显示
     • 隐藏元素：hide([speed],[easing],[fn])，参数可以都省略，无动画直接显示
     • 切换元素：toggle([speed],[easing],[fn])，参数可以都省略，无动画直接显示
     • speed：三种预定速度之一的字符串（’slow’ , ‘noeral’ , ‘fast’ ）或表示动画时长的毫秒数值。
     • easing：（Optional）用来指定切换效果,默认是”swing”，可用参数“linear”。
     • fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
   • 滑动效果：
     • 下滑：slideDown([speed],[easing],[fn])，参数可以都省略，无动画直接显示
     • 上滑：slideUp([speed],[easing],[fn])，参数可以都省略，无动画直接显示
     • 滑动切换：slideToggle([speed],[easing],[fn])，参数可以都省略，无动画直接显示
   • 事件切换：
     • hover([over],out)
     • over：鼠标移动到元素上需要触发的函数(相当于mouseenter)
     • out: 鼠标移出元素需要触发的函数 (相当于mouseleave)、

       $('div').hover(function(){
           //鼠标移动到元素上触发
           console.log("鼠标移动到元素上");
       },function(){
           //鼠标移出元素触发
           console.log("鼠标移出元素");
       })

     • 如果只写一个函数，鼠标移动到元素上和鼠标移出元素都会触发这个函数
   • 动画队列及其停止排队的方法
     • 动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发就会造成多个动画或者效果排队执行。
     • 停止排队stop() 用于停止动画或效果。注：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
   • 淡入淡出效果
     • 淡入效果语法规范：fadeIn([speed],[easing],[fn]) ,参数都可以省略
     • 淡出效果：fadeOut([speed],[easing],[fn]) ,参数都可以省略
     • 切换效果：fadeToggle([speed],[easing],[fn]) ,参数都可以省略
     • 渐进方式调整到指定的不透明度fandeTo([speed],opacity,[easing],[fn])。其中opacity透明度为必填项，取值为0~1之间。有两个必须的参数。
   • 自定义动画animate
     • 语法：animate(params,[speed],[easing],[fn])
     • params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名方法borderLeft。其余参数都可以省略。

           $(function(){
          $('button').click(function(){
         $('div').animate({
         	left:100,
         	top:400,
       	  opacity:0.5
        	},1000)
         })
       })

4. Jquery属性操作

   • 设置或获取元素固有属性值prop()方法
     • 元素固有属性是指元素自带的属性，比如<a>标签自带href属性，<input> 自带type
     • 获取属性值：prop('属性')
     • 设置属性值：prop('属性','属性值')
   • 元素自定义属性的获取使用attr()方法
     • 获取属性值：attr('属性') ,类似于原生的getAttribute()
     • 设置属性值：attr('属性','属性值'), 类似于原生的setAttribute()
   • 数据缓存data()
     • data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面被刷新，之前存放的数据都将被移除。
     • 附加数据：data('数据名称','数据值')，向被选元素附加属性
     • 获取数据：data('数据名称');，向被选元素获取属性
     • 这个方法获取data-index H5自定义属性,第一个不用写data- 。并且返回的是数字型的值。
   • 复选框被选中的:checked

     if($('.checkbox:checked').length===$('.checkbox').length){  //如果选中个数等于复选框个数
       $('.checkall').prop('checked',true);   // 则全选按钮选中
     }else{
        $('.checkall').prop('checked',false);  //否则全选按钮不选中
     }

5. jQuery内容文本值

   • 主要针对元素的内容和表单的值进行操作。
   • 普通元素内容：html（）,相当于原生innerHTML
     • 获取元素内容：html()
     • 设置元素内容：html('内容')
   • 普通元素文本内容text()，相当于原生innerText
     • 获取元素内容：text()
     • 设置元素内容：text('内容')
   • 表单的值val()，相当于原生的value
     • 获取元素内容：val()
     • 设置元素内容：val('内容')
   • parents('选择器')可以返回其祖先级元素，不价值可以返回所有的祖先元素
   • 保留两位小数shiyongtoFixed(2)方法

6. jQuery元素操作

   • 主要是遍历、创建、添加、删除元素操作
   • 遍历元素：jQuery隐式迭代是对同一元素做了相同的操作。如果想要给同一元素做不同的操作，就需要用到遍历。
     • 语法：$('div').each(function(index,doEle){xxx;})
     • each()方法遍历匹配的每一个元素。主要用DOM处理，each每一个元素
     • 里面回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM对象，不是jQuery对象
     • 所以想要使用jQuery方法。需要给这个DOM元素转换为jQuery对象$(domEle)
     • $.each()方法遍历元素，主要用于遍历数据，处理数据。

       var arr=['red','blue','green','pink'];
       $.each(arr,function(index,Ele){
         console.log(index);   //输出索引号
         console.log(Ele);    //输出元素
       })

   • 创建元素
     • 语法：$("<li></li>"); 动态创建一个li标签
   • 添加元素
     • 内部添加：Element.append("内容")，把内容方到匹配元素内部的后面，类似于原生的appendChild。 Element.prepend("内容") ，把内容方到匹配元素内部的前面。
     • 外部添加：Element.after("内容"), 把元素放到目标元素的后面。 Element.before("内容")，把元素放到目标元素的前面。
     • 注： 内部添加元素，生成之后它们是父子关系。外部添加元素，生成之后它们是兄弟关系。
   • 删除元素
     • Element.remove(),删除匹配到的元素本身
     • Element.empty()，删除匹配到的元素集合中的所有子元素
     • Element.html() ，清空匹配的元素内容里面的子节点

7. jQuery尺寸位置操作

   • jQuery尺寸操作

     语法	用法
     width()/height()	取得匹配元素宽度和高度的值 只算width/height
     innerWidth()/innerHeight()	取得匹配元素宽度和高度的值 包含padding
     outerWidth()/outerHeight()	取得匹配元素宽度和高度的值 包含padding，border
     outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度的值 包含padding,border,margin

     • 以上参数为空，则是获取相应值，返回的是数字类型
     • 如果参数为数字，则是修改相应值
     • 参数不用加单位
   • jQuery位置
     • 位置主要有三个：offset() , position() , scrollTop()/scrollLeft()
     • offset()设置或获取元素偏移。设置或返回被选元素相对于文档的偏移量，跟父级没有关系。

       //获取元素偏移量
        $('div').offset();
       //   设置文档偏移量使用  
        $('div').offset({left:100,top:100});

     • position()获取元素偏移量。返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有坐标则以文档为准。z这个方法只能获取不能设置偏移
     • scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
     • 带有动画的返回顶部，使用animate动画函数里面的scrollTop属性，可以设置位置

       $("body,html").animate({scrollTop:0})

8. jQuery事件

   • jQuery事件注册
     -单个事件注册：$('div').click(function(){事件处理函数})
   • jQuery事件处理on()绑定事件
     • on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
     • 语法：element.on(events,[selector],fn)
     • events：一个或多个用空格分隔的事件类型，入’click’ ,或’keydowm’
     • selector:元素的子元素选择器
     • on()方法优势：（1）可以绑定多个事件，多个处理事件处理函数；（2）可以实现事件委派操作，事件委派的定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 （3）动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

       $('div').on({
         mouseover:function(){},
         mouseout:function(){},
         click:function(){}
       })
       //如果事件处理函数相同则
       $('div').om("mouseover mouseout",function(){$(this).toggleClass("current")})
       //事件委派,click是绑定在ul上面的，但是触发对象是ul里面的li
       $('ul').on('click','li',function(){
         alert("hello world");
       })

   • 案例：发布微博案例
     • 运用动态添加元素生成列表
     • 点击删除按钮使用on()方法可以给动态生成的元素绑定事件
   • 事件处理off()解绑事件
     • off()方法可以移除通过on()方法添加的事件处理程序。

       $('div').off();    //解除div身上发所有事件
       $('div').off('click');  //解除div上的点击 事件
       $('div').off('click','li');  //解绑事件委托

     • 如果有的事件只想触发一次，可以使用one()来绑定事件。
   • 自动触发事件trigger()
     • 有些事件希望自动触发，比如轮播图自动播放功能跟点击左右侧按钮一致。可以利用定时器自动触发左右按钮点击事件，不必鼠标点击触发。
     • element.click() ,简写方式
     • element.trigger("type") ，第二种自动触发模式
     • element.triggerHandler(type),第三种默认触发模式，不会触发元素的默认行为~
   • jQuery事件对象
     • 事件被触发就会有事件对象的产生。
     • element.on(events,[selector],function(event){})
     • 阻止默认行为：event.preventDefault() 或者 return false
     • 阻止冒泡：event.stopPropagation()

9. jQuery其他方法

   • jQuery对象拷贝
     • 如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extebd()方法
     • 语法：$.extend([deep],target,object1,[objectN])
     • deep：如果设置为true为深拷贝，默认为false浅拷贝
     • target：要拷贝的目标对象
     • object1：待拷贝到第一个对象的对象
     • objectN：待拷贝到第N个对象的对象
     • 浅拷贝：是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响拷贝对象。
     • 深拷贝：完全克隆（拷贝的对象而不是地址），修改目标对象不会影响拷贝对象。把里面的数据完全复制一份给目标对象，如果里面有不冲突属性，会合并到一起。
   • jQuery多库共存
     • jQuery使用$作为标识符,其他js库也会使用到$作为标识符，这样一起使用会引起冲突。
     • 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
     • jQuery解决方案：(1)把里面的$符号统一改为jQuery，比如jQuery('div'); (2)jQuery变量规定新的名称：$.noConflict() var xx=$.noConflict();

       //如果$符号冲突 可以使用jquery代替
       jQuery.each();
       //让jQuery释放对$符号的控制权，让用户自己决定
       var newname=jQuery.noConflict();
       newname('div');

   • jQuery插件
     • jQuery插件常用的网站：http://www.htmlleaf.com/
     • jQuery插件使用步骤：（1）引入相关文件；（2）复制相关html，css，js
   • 图片懒加载：当页面滑动到可视区域再加载图片
   • 全屏滚动效果：http://www.dowebok.com/