前端（九）

一前言

與js動畫有關的主要有三你們族：offset/scroll/client。接下來認識一下三你們族。

offset 

每一個標籤節點對象中都會有：offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent屬性，他們表明什麼意思呢？

offsetWidth 和 offsetHight用來獲取標籤的大小：

• offsetWidth = width + padding + border;

• offsetHeight = Height + padding + border;

offsetLeft 和 offsetTop距離帶有定位的祖先盒子左邊和上邊位置 ；若是父級都沒有定位，則以body爲準。不論你是以何種手段產生的距離padding也好，絕對定位也好，返回的就是距離（只讀屬性）。

offsetParent返回距離本身最近帶有定位的祖先標籤對象。若是祖先都沒有定位，返回body標籤對象。

tips：style.left和offsetLeft 有本質的區別：style.left指定的是自身定位用到的屬性，可讀，可寫，可是讀取只能讀取行內樣式。offsetLeft 指定的是偏移量，只讀屬性，不可賦值，咱們就能夠結合這兩個屬性的特色總結以下：用offsetLeft 和 offsetTop 獲取值，用style.left 和 style.top 賦值來實現動畫。

經過上邊的幾個屬性表示的含義+定位的css樣式，理論上咱們能夠實現任何動畫：其原理是：

讓父盒子相對佈局，子盒子絕對定位：而後經過公式：

ele.style.left = ele.offsetLeft + speed + "px";複製代碼

動態去改變元素left，來達到一個動畫效果，經過上邊的公式咱們能夠看到，咱們在js中數據模型的創建須要開發者本身去作，而不是像android模型已經創建好，只須要設置初始值，結束值，動畫時間，就能夠拿到值。

scroll 

每一個標籤節點對象中都還會有：scrollWidth 、scrollHeight、scrollTop 、scrollLeft屬性，他們表明什麼意思呢？

• scrollWidth = width + padding;

• scrollHeight = height + padding;

tips:這裏不包括border，而且這裏的scrollWidth 若是內容超過盒子就是內容的高度，若是不錯超過就是盒子的高度。然而offsetWidth無論內容有沒有超過都是盒子的大小

scrollTop 和 scrollLeft 表明網頁被捲去的頭部和左邊的部分，兼容不一樣瀏覽器寫法：

function scroll() {     
 return { //此函數的返回值是json        
 "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,    
 "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,  
     }  
  }複製代碼

client 

上邊兩你們族都是針對盒子自身調用的數據或者針對整個網頁滾動的數據。而client卻不同，

clientWidth 和 clientHeight

盒子調用時：

• clientWidth= width + padding;

• clientHeight= height + padding;

tips：無論內容是否超過都是盒子的大小

body/html調用時：獲取頁面的可視區域。

event調用：鼠標距離可視區域的距離。

clientTop 和 clientLeft

• clientTop：盒子的上border。

• clientLeft：盒子的左border。

二jQuery入門

就目前來擁有的知識來看，若是用原生的js去獲取和操做DOM節點，會面臨不少問題：瀏覽器兼容、代碼繁瑣、動畫難實現（須要本身去建模）。爲了解決這些問題jQuery庫應運而生。jquery就是封裝了不少操做節點方法。首先咱們來認識一下$（參數）：傳入不一樣的參數，返回不一樣的對象。如：

$(); // 調用自定義的函數$

$(document）.ready(function(){}); // 調用入口函數

$(function(){}); // 調用入口函數

$("#btnShow") // 獲取id屬性爲btnShow的元素
$("div") // 獲取全部的div標籤元素

$(".btnShow") // 獲取全部class是btnShow的元素複製代碼

jqueryAPI有兩個特性：鏈式調用和隱式迭代。

• 鏈式調用是由於return的是this（只有設置操做才能把鏈式編程延續下去）
• 隱士迭代是由於返回的對象都是數組，內部默認迭代了對象

總結：jQuery 把 DOM節點對象包裝成 jQuery 節點對象，而且節點對象之間能夠互相轉換：

• jquery節點對象 = $(DOM節點對象)
• DOM節點對象  = jquery節點對象[下標]

咱們在前邊已經學過，要獲取DOM節點對象，能夠經過doctoment配合選擇器來獲取DOM節點對象。一樣的jQuery也封裝了直接經過選擇器能夠獲取jQuery節點的方法，css選擇器均可以用到jQuery中，寫到字符串中,如：$("選擇器")。固然，因爲jQuery返回的是一個數組，因此他還有過濾選擇器，來幫助開發者更方便使用：

• "div:eq(a)"： a表示選擇第幾個元素,返回當前位置元素數組；
• "div:gt(a)": a表示第幾個位置，返回大於a位置的元素數組；
• "div:It(a)"：a表示第幾個位置，返回小於a位置的元素數組；
• "div:odd"：選擇序號爲奇數位置，返回數組；
• div:even"：選擇序號爲奇數位置，返回數組；
  
• "div:first"：選擇第一個位置，返回數組；
• "div:last"：選擇最後一個位置，返回數組；

同時還提供了：屬選擇器、篩選選擇器 jquery節點篩選選擇器方法：

• find（"div"）:獲取當前節點全部後代div;
• children("div"):獲取當前節點親兒子div；
• siblings():獲取當前節點的兄弟，不包括本身；
• parent():獲取當前節點的父節點；
  
• eq(index):指定索引位置的節點；

三jQuery動畫

上邊咱們已經知道動畫的實現原理，由於js並無對動畫提早建模，作爲開發者，實現動畫就須要本身去建模，這是不能忍的，jQuery封裝了不少動畫，接下來咱們就一塊兒瞭解一下jQuery關於動畫的方法。

顯示隱藏動畫

在js中咱們經過display值爲none或black去顯示或者隱藏DOM節點，可是這種顯示和隱藏比較生硬。jQuery幫咱們封裝了一個帶有動畫的顯示和隱藏：

• $(selector).show()
• $(selector).show(time)
• $(selector).show("slow")
• $(selector).show(time,function(){})

隱藏同上只是把show方法變成hide方法。咱們在開發時候經常顯示和隱藏使用一個按鈕，jQuery還提供了toggle方法，免除咱們本身去定義標記。如：

$(".bb").toggle(3000,function(){alert("動畫執行完畢")})複製代碼

仔細觀察咱們會發現show和hide方法動畫是三組動畫同時執行：從上到下顯示+從左到右顯示+透明度從0-1變化。那麼猜想應該有這三個動畫獨立執行的API：

從上到下顯示隱藏有三個方法：slideDown()、slideUp()、slideToggle()，API使用如上顯示和隱藏。

透明度顯示隱藏有三個方法：fadeOut()、fadeIn()、fadeToggle(),API使用如上顯示和隱藏。

僅僅有上邊這些簡單的動畫，在實際開發中仍是難以知足需求，由於不夠任意多樣化。固然jQuery給咱們提供了自定義動畫，相似android的插值器的功能同樣，只要給開始值（開始值就是當前div的css值），結束值，動畫執行時間，就能夠給你一系列的變化值，甚至比android更簡單的是，它會自動刷新渲染。語法以下：

$(selector).animate({params}, speed, callback);複製代碼

• 第一個參數表示：要執行動畫的CSS屬性（必選）

• 第二個參數表示：執行動畫時長（可選）

• 第三個參數表示：動畫執行完後，當即執行的回調函數（可選）

例：

var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100 };
$("div").animate(json, 1000, function () {         });複製代碼

中止動畫：

$(selector).stop(false, false);複製代碼

第一個參數：

• true：後續動畫不執行。(廢除動畫隊列)

• false：後續動畫會執行。（廢除隊列裏邊的當前動畫）

第二個參數：

• true：當即完成當前動畫。

• false：當即中止當前動畫。