webAPI的基础理解与运用移动端获取元素位置与本地储存（十）

获取元素位置

offset系列

     //获取元素的位置
     DOM.offsetLeft
     DOM.offsetTop

     //获取元素的大小
     DOM.offsetWidth:   元素大小内容区域大小 + 边框 + 内边距
     DOM.offsetHeight： 元素大小内容区域大小 + 边框 + 内边距

client系列

     DOM对象.clientLeft: 获取元素左边框的大小
     DOM对象.clientTop:  获取元素上边框大小
  

     DOM对象.clientHeight: 获取元素的高度 （内容区域 + 上下内边距）
     DOM对象.clientWidth: 获取元素的宽度 （内容区域 + 左右内边距）

scroll系列

    DOM对象.scrollTop :  滚动出去的距离
    DOM对象.scrollLeft:  水平方向滚动出去的距离

    --如果希望得到滚动出去的距离，那么需要给元素注册滚动事件 【onscroll】
    
    
    DOM.scrollWidth : 获取元素宽度（包括了滚动出去的宽度）

    DOM.scrollHeight: 获取元素高度（包括了滚动出去的高度）

  
   document.documentElement.scrollTop

鼠标其他事件

    1. 鼠标按下去的事件

       onmousedown


    2. 鼠标抬起时候的事件

       onmouseup 

移动端事件介绍

    1. touchstart : 手指按下去时候的事件

    2. touchmove :  手指在移动时候触发的事件

    3. touchend :   手指离开时候触发的事件

移动端的事件对象参数介绍

    移动端的事件对象参数： 获取手指在移动触发事件后的信息（位置...）


    1. 移动端事件对象参数介绍

        e.touches    ----> 获取位于移动设备屏幕上手指的信息 【伪数组】

            ☞ 手指的个数  ：  e.touches.length (获取手指的个数)

            ☞ 获取手指的位置：

                e.touches[0].clientX   (获取手指在移动设备的可视区域（整个屏幕）)

                e.touches[0].pageX     (获取手指在移动设备的位置)

                e.touches[0].screenX   (获取手指位置（整台设备）)


       e.targetTouches  ---> 获取位于元素身上的手指信息 【伪数组】

            ☞ 位于元素身上的手指个数：   e.targetTouches.length

            ☞ 获取位于元素身上手指的坐标：

                e.targetTouches[0].clientX  

                e.targetTouches[0].pageX  

                e.targetTouches[0].screenX  

        e.changedTouches   ---> 获取离开屏幕手指的信息 【该事件对象参数一般在手指离开屏幕时候获取  touchend, 伪数组】

           ☞ 获取离开手指的个数：   e.changedTouches.length 

           ☞ 获取离开手指的坐标信息

                e.changedTouches[0].clientX;
                e.changedTouches[0].pageX;
                e.changedTouches[0].screenX;

移动端轮播图效果

    js插件:  swiper

swiper使用步骤

    1. 下载 swiper 插件（js和css文件）

    2. 在网页中引用对应的js文件和CSS文件

    3. 复制对应的html结构

    4. 初始化swiper插件

本地存储

    
    本地存储： 将数据保存计算机本地

        1. 通过sessionStorage方式将数据保存到本地


        2. 通过localStorage方式将数据保存的本地


    保存数据的方式：

        1. 变量 （一个值）

        2. 数组 （多个值）

        3. 对象  （多个值）

        4. 属性（自定义属性）

sessionStorage 保存数据

    sessionStorage.setItem(k,value);    //保存数据，以键值对形式保存的

    sessionStorage.getItem(k);   //获取本地存储中的数据，通过键的方式获取数据

    sessionStorage.removeItem(k);  //删除数据，通过键的方式删除数据,只能删除指定的键对应的数据

    sessionStorage.clear();   //清空所有的数据
     

localStorage保存数据

    localStorage.setItem(k,value);    //保存数据，以键值对形式保存的

    localStorage.getItem(k);   //获取本地存储中的数据，通过键的方式获取数据

    localStorage.removeItem(k);  //删除数据，通过键的方式删除数据,只能删除指定的键对应的数据

    localStorage.clear();   //清空所有的数据

sessionStorage 和 localStorage 区别及使用

    1. sessionStorage 中保存的数据，不能实现跨页面访问（只能在当前页面中访问）
    2. sessionStorage 中保存的数据会随着页面的关闭而消失 （临时保存的数据）


    3. localStorage 保存数据的时候，数据可以实现跨页面访问
    4. localStorage 保存的数据，可以持久化

注意

1. localStorage 还是 sessionStorage 在保存数据的时候，一定是以字符串形式保存的.
    
    JSON.stringify()

2. 通过本地存储获取的值也一定是一个字符串格式的数据

3. 如果要操作获取到的结果字符串，可以考虑将字符串转化为对象 (JSON.parse())