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())