offset家族
三大家族和一個事件對象
三大家族（offset/scroll/client）
事件對象/event （事件被觸動時，鼠標(biāo)和鍵盤的狀態(tài)）（通過屬性控制）
Offset家族簡介
offset這個單詞本身是--偏移，補(bǔ)償，位移的意思。
js中有一套方便的獲取元素尺寸的辦法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同組成了offset家族。
offsetWidth和offsetHight （檢測盒子自身寬高+padding+border）
這兩個屬性，他們綁定在了所有的節(jié)點(diǎn)元素上。獲取之后，只要調(diào)用這兩個屬性，我們就能夠獲取元素節(jié)點(diǎn)的寬和高。
offset寬/高 = 盒子自身的寬/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
offsetLeft和offsetTop （檢測距離父盒子有定位的左/上面的距離）
返回距離上級盒子（帶有定位）左邊s的位置
如果父級都沒有定位則以body為準(zhǔn)
offsetLeft 從父親的padding 開始算,父親的border 不算。
在父盒子有定位的情況下，offsetLeft == style.left(去掉px)
offsetParent （檢測父系盒子中帶有定位的父盒子節(jié)點(diǎn)）
1、返回改對象的父級 （帶有定位）
如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位 （position為absolute或 relative，fixed）， offsetParent為body。
2、如果當(dāng)前元素的父級元素中有CSS定位 （position為absolute或 relative，fixed）， offsetParent取最近的那個父級元素。
offsetLeft和style.left區(qū)別
最大區(qū)別在于offsetLeft可以返回沒有定位盒子的距離左側(cè)的位置。
而 style.left不可以
二、offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
三、offsetTop 只讀，而 style.top 可讀寫。（只讀是獲取值，可寫是賦值）
四、如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串。
style.left在=的左邊和右邊還不一樣。（左邊的時候是屬性，右邊的時候是值）
動畫和封裝
動畫定義
運(yùn)動的圖片。（讓圖片或者圖畫動起來）
動畫的種類
閃現(xiàn)（基本不用）
勻速（今天重點(diǎn)）
緩動（以后重點(diǎn)）
動畫原理
盒子的位置 = 盒子本身所在的位置+步長。
體驗(yàn)勻速動畫
案例
焦點(diǎn)圖
難點(diǎn)1：先點(diǎn)亮盒子，然后移動圖片。
2：移動圖片的目標(biāo)位置都是負(fù)值。
（負(fù)的圖片的個數(shù)乘以圖片的寬，到0之間）（負(fù)數(shù)）
3：獲取盒子的索引值，我們才能知道，ul向右移動幾張圖片。
切換圖
難點(diǎn)：1.為什么移動的圖片是負(fù)值。（參看上面的案例難點(diǎn)2）
為什么要計(jì)數(shù)器。
（我們需要一個值， 記錄當(dāng)前圖片，方便后續(xù)操作）
為什么方法1里的num--；方法2里面的num++。
我們要看之前的圖片，就要num--，要看后面的圖片就要num++；
圖片想左走顯示后面的，圖片向右走顯示前面的。
無縫滾動
緩動動畫
三個函數(shù)
都是在數(shù)軸上向上或者向下取整。
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round(); 四舍五入
緩動動畫原理
leader=leader+(target-leader)/10; 盒子位置 = 盒子本身位置+（目標(biāo)位置-盒子本身位置）/ 10；
動畫原理 = 盒子位置 + 步長（步長越來越小）。
體驗(yàn)緩動動畫
分析為什么沒有到達(dá)指定位置
盒子本身位置 目標(biāo)位置 步長 已經(jīng)到達(dá)了的位置
0 400 0 0
0 400 40 40
40 400 36 76
76 400 32.4 108.4
.........
JS實(shí)際運(yùn)算時會四舍五入取整，然后計(jì)算。
396(四舍五入獲取) 400 0.4 396.4
396(四舍五入獲取) 400 0.4 396.4
....
offsetLeft和style.left的值的獲取問題
獲取盒子距離左側(cè)具有定位的父盒子的距離（沒有的body），四舍五入取整。
Style.left獲取的是具體值。 （賦值的時候也是直接賦值）
按例：筋斗云
鼠標(biāo)懸停和鼠標(biāo)移開不會影響初始化值，只有點(diǎn)擊影響。而移開的情況下，span移動到計(jì)數(shù)器的位置。
第二系列scroll
Scroll家族組成
ScrollWidth和scrollHeight（不包括border）
檢測盒子的寬高。（調(diào)用者：節(jié)點(diǎn)元素。屬性。）
盒子內(nèi)容的寬高。（如果有內(nèi)容超出了，顯示內(nèi)容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollTop和scrollLeft
網(wǎng)頁，被瀏覽器遮擋的頭部和左邊部分。
被卷去的頭部和左邊部分。
他有兼容性問題
未聲明 DTD（谷歌只認(rèn)識他）
document.body.scrollTop
已經(jīng)聲明DTD（IE678只認(rèn)識他）
document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容寫法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
獲取title、body、head、html標(biāo)簽
document.title --- 文檔標(biāo)題；
document.head --- 文檔的頭標(biāo)簽
document.body --- 文檔的body標(biāo)簽；
document.documentElement --- 這個很重要
它表示文檔的html標(biāo)簽， 也就是說，基本結(jié)構(gòu)當(dāng)中的html標(biāo)簽并不是通過document.html 去訪問的，而是document.documentElement 。
Json
Json是一種和數(shù)組類似的數(shù)據(jù)類型。
不同的是：數(shù)組中的元素是單一的。
而json中的元素，是以鍵值對的形式出現(xiàn)的。（key: value）
定義方法
var json = { key1：value1,key2：value2,key3：value3... };
數(shù)組是通過索引值獲取數(shù)組中的元素的，而json是通過key獲取元素的。
獲取內(nèi)容
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，我們稱之為JavaScript對象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢之一。表示方法為鍵值對，key：value。
var myjson={k1:v1,k2:v2,k3:v3...}
獲取方式：v1 == myjson.k1 v2 == myjson.k2
Json一般就是被當(dāng)做一個配置單用；
Json的遍歷（了解）
用的是新的語法方法：for ... In ....
Scroll()的封裝
判斷頁面有沒有DTD
document.compatMode === "BackCompat"
BackCompat 未聲明
CSS1Compat 已經(jīng)聲明
注意大小寫
案例
固定導(dǎo)航欄
廣告跟隨
返回頭部小火箭 （原理類似：緩動框架。只不過是多一個頁面跳轉(zhuǎn)）
小知識
onscroll事件
只要頁面滾動無論向左向右，向上向下，哪怕只有1px，都會觸動這個事件
屏幕跳轉(zhuǎn)
window.scrollTo
方法可把內(nèi)容滾動到指定的坐標(biāo)。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)。
ypos 必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo)
scroll家族
案例
樓層跳躍
100%子盒子會繼承父盒子的寬高。父盒子繼承body寬高。Body繼承html的寬高。
盒子屬性：auto:適應(yīng)盒子自身的寬度或者高度。（對自己負(fù)責(zé)）
盒子屬性：100%:適應(yīng)盒子父盒子的寬度或者高度。（對爸爸負(fù)責(zé)）
事件對象（event）
再觸發(fā)DOM上的某個事件時，會產(chǎn)生一個事件對象event，這個對象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對象，但支持的方式不同。
比如鼠標(biāo)操作時候，會添加鼠標(biāo)位置的相關(guān)信息到事件對象中。（類似Date）
普通瀏覽器支持 event（帶參，任意參數(shù)）
ie 678 支持 window.event（無參，內(nèi)置）
總結(jié)：他是一個事件中的內(nèi)置對象。內(nèi)部裝了很多關(guān)于鼠標(biāo)和事件本身的信息。
事件對象的獲取（event的獲取）
IE678中，window.event
在火狐谷歌中，event或者，在事件綁定的函數(shù)中，加參，這個參數(shù)就是event.
Box.onclick = function (aaa){ aaa就是event }
兼容獲取方式有兩種：
不寫參數(shù)直接使用event;
寫參數(shù)，但是為event....var event = event || window.event;(主要用這種)
event內(nèi)容重要內(nèi)容
screenX、pageX和clientX的區(qū)別
PageY/pageX: 鼠標(biāo)位于整個網(wǎng)頁頁面的頂部和左側(cè)部分的距離。（頁面）
ScreenY/screenX: 鼠標(biāo)位于屏幕的上方和左側(cè)的距離。（屏幕）
ClientX/clientY: 鼠標(biāo)位于瀏覽器的左側(cè)和頂部的距離。（瀏覽器大小和位置）
PageY和pageX的兼容寫法（很重要）
在頁面位置就等于 = 看得見的+看不見的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
新事件（onmousemove）
只要鼠標(biāo)在綁定該事件的事件源上移動，哪怕1像素，也會觸動這個事件。
（這個事件可以直接或者間接的替代定時器）
案例
放大鏡
注意1：CSS部分要注意：大圖片/大盒子 = 小圖片/顯示部分
注意2：(大圖片/大盒子 = 小圖片/黃盒子)
大盒子滑動的距離/小盒子滑動的距離 = 大盒子滑倒頭/小盒子滑倒頭
大盒子滑倒頭/小盒子滑倒頭（他們的距離如何獲取呢？）
（大圖片-大盒子）（兩邊各有一伴兒大盒子的距離是沒有走的）（小盒子-小圖片）（兩邊各有一伴兒小盒子的距離是沒有走的）
注意3：
onmouseover、onmouseout事件給定一個盒子，子元素也會獲取這個事件。
替代方法：onmosueenter和onmouseleave.
拖拽案例
模擬滾動條
第三大家族client
主要成員
1、clientWidth 獲取網(wǎng)頁可視區(qū)域?qū)挾龋▋煞N用法）
clientHeight 獲取網(wǎng)頁可視區(qū)域高度（兩種用法）
調(diào)用者不同，意義不同：
盒子調(diào)用： 指盒子本身。
body/html調(diào)用： 可視區(qū)域大小。
2、clientX 鼠標(biāo)距離可視區(qū)域左側(cè)距離（event調(diào)用）
clientY 鼠標(biāo)距離可視區(qū)域上側(cè)距離（event調(diào)用）
3、clientTop/clientLeft 盒子的border寬高
三大家族區(qū)別（三大家族總結(jié)）
Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內(nèi)容寬度（不包含border）
scrollHeight = 內(nèi)容高度（不包含border）
top和left
offsetTop/offsetLeft ：
調(diào)用者：任意元素。(盒子為主)
嘛作用：距離父系盒子中帶有定位的距離。
scrollTop/scrollLeft:(盒子也可以調(diào)用，必須有滾動條)
調(diào)用者：document.body.scrollTop/.....(window)
嘛作用：瀏覽器無法顯示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
調(diào)用者：event.clientX(event)
嘛作用：鼠標(biāo)距離瀏覽器可視區(qū)域的距離（左、上）。
client家族特殊用法之:檢瀏覽器寬/高度(可視區(qū)域)
Onresize事件
只要瀏覽器的大小改變，哪怕1像素，都會觸動這個事件。
案例：根據(jù)瀏覽器可視區(qū)域大小，給定背景色
事件總結(jié)
區(qū)分：
1.window.onscroll 屏幕滑動
2.window.onresize 瀏覽器大小變化
3.window.onload 頁面加載完畢
4.div.onmousemove 鼠標(biāo)在盒子上移動
（注意：不是盒子移動！！！）
5.onmouseup/onmousedown == onclick
獲得屏幕寬高
window.screen.width
分辨率是屏幕圖像的精密度，指顯示器所能顯示的像素有多少。
我們的電腦一般：
橫向1280個像素點(diǎn)，
縱向960個像素點(diǎn)。
我們看電影的時候是滿屏和半屏的，就是這。
冒泡
事件冒泡: 當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點(diǎn)擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。(BUG)
（本來應(yīng)該一人做事一人當(dāng)，結(jié)果，我做錯了事情，你去告訴我媽）
什么是冒泡：子元素事件被觸動，父盒子的同樣的事件也會被觸動。
取消冒泡就是取消這種機(jī)制。
阻止冒泡
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下則是使用：event.cancelBubble = true
兼容代碼如下：
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
addEventListenner(參數(shù)1，參數(shù)2，參數(shù)3)
調(diào)用者是：事件源。 參數(shù)1：事件去掉on 參數(shù)2 ：調(diào)用的函數(shù)
參數(shù)3：可有可無。沒有默認(rèn)false.false情況下，支持冒泡。True支持捕獲。
案例
點(diǎn)擊空白隱藏模態(tài)框
Document事件的綁定，無論綁定什么事件，只要事件被出發(fā)，傳遞過來的應(yīng)該是指定的元素本身，而不是document。
事件委托
緩動框架
封裝框架遇到的兩個問題
原有的方法：div.style.width :這個方法比較固定，不能用變量或者字符串的形式更換屬性，不方便我傳值獲取屬性，和給屬性賦值。
屬性值的獲取和屬性的賦值
div.style["width"] = "5000px";
可以通過傳字符串或者變量的方式獲取和賦值屬性。
缺點(diǎn)：他的操作完全是對行內(nèi)式CSS來操作的。賦值的時候毫無問題。但是，獲取值的時候有問題了。
獲取任意類型的CSS樣式的屬性值
Div.style.width
div.currentStyle.width
Window.getComputedStyle(div,null).width;
他們的公共使用變量或者字符串獲取屬性值的方法都是：去電屬性和點(diǎn)，然后加上中括號和屬性的字符串形式。
Div.style[“width”];
div.currentStyle[“width”];
Window.getComputedStyle(div,null)[“width”];
開閉原則
定義一個變量。數(shù)據(jù)可以修改。但是，只能修改成為兩個值。
回調(diào)函數(shù)
程序執(zhí)行完畢，在次執(zhí)行的函數(shù)。
在函數(shù)中給指定的函數(shù)定義一個形參，然后程序執(zhí)行到最后，調(diào)用這個形參后面加一個括號。
案例（緩動框架的應(yīng)用）
手風(fēng)琴案例
鼠標(biāo)放上去的時候，該li變大的速度太快，而其他的li變小的速度沒有跟上。導(dǎo)致盒子右側(cè)出現(xiàn)了空白。
360關(guān)閉廣告
緩動框架
存在的問題
很多屬性我們的框架無法獲取值和賦值。
border-radius: 1px 21px 41px 1px ;
opacity: 0.5;
background: rgba(0,0,0,.4);
z-index: 1;
主要處理兩個
第一個是透明度（旋轉(zhuǎn)木馬）
值為小數(shù)，獲取的時候要特殊處理。
兼容問題。IE678不識別opacity;
第二個是層級（旋轉(zhuǎn)木馬）（由需求決定的）
層級的提高是一次性直接提到最高，不需要一點(diǎn)一點(diǎn)兒的緩動。
緩動框架案例
旋轉(zhuǎn)木馬
原理：我們先定義一個數(shù)組，數(shù)組中的元素是json；json中的元素是屬性。
點(diǎn)擊一個按鈕，按順序更換數(shù)組中元素的位置。
（如果我們想完成旋轉(zhuǎn)木馬，只需要更換數(shù)組中元素的位置）
步驟：
我們必須讓頁面加載的時候把所有的屬性加載出來，讓我看看。（核心）
鼠標(biāo)放到大盒子上顯示對應(yīng)的左右切換按鈕，移開隱藏
獲取兩個按鈕。對他們進(jìn)行事件綁定。對他們進(jìn)行判斷。
如果是左側(cè)的按鈕執(zhí)行一套程序，如果是右側(cè)的按鈕執(zhí)行另一套程序。
綁定按鈕的函數(shù)，一個是正轉(zhuǎn)，一個是反轉(zhuǎn)。（傳參確定）
調(diào)換相應(yīng)的數(shù)組對應(yīng)的元素。（先刪除誰，在怎么添加）
正轉(zhuǎn)反轉(zhuǎn)的問題
最開始是：12345；我想讓他變成：23451
把1刪除，在最后添加1；
在數(shù)組json中，刪除第一個元素，添加到最末尾。（正轉(zhuǎn)）
在數(shù)組json中，刪除最后一個元素，添加到第一位。（反轉(zhuǎn)）
函數(shù)節(jié)流
定義一個變量，只有函數(shù)執(zhí)行完畢在去執(zhí)行下一個。
正則表達(dá)式（RegExp）
概述
正則表達(dá)式（英語：Regular Expression）
本質(zhì)：用來記錄文本規(guī)則的代碼
（為字符串定義規(guī)則，為輸入內(nèi)容定義規(guī)則！）
應(yīng)用非常廣泛，如：表單驗(yàn)證、高級搜索、生化科學(xué)
（有一定難度，不要求非常熟練，但至少會表單驗(yàn)證）
表單驗(yàn)證
隱藏手機(jī)號碼： 150****7654
可以通過正則表達(dá)式，從字符串中獲取我們想要的特定部分
正則表達(dá)式的特點(diǎn)是：
- 靈活性、邏輯性和功能性非常的強(qiáng)；
- 可以迅速地用極簡單的方式達(dá)到字符串的復(fù)雜控制。
- 對于剛接觸的人來說，比較晦澀難懂。
比如：
匹配國內(nèi)電話號碼：\d{3}-\d{8}|\d{4}-\d{7}
驗(yàn)證手機(jī)號：
/((13[0-9])|(15[4,\D])|(18[0,5-9]))\d{8}$/
很難記住。
正則表達(dá)式聲明
1.通過構(gòu)造函數(shù)定義
var 變量名= new RegExp(/表達(dá)式/);
2.通過直接量定義 （較為常用）
var 變量名= /表達(dá)式/;
console.log(regexp1.test(345));
console.log(/\d/.test(567));（直接使用）
正則表達(dá)式的組成是：(總結(jié))
有一些普通字符和元字符組成，普通字符就是字母和數(shù)字，元字符具有特殊意義的字符
匹配騰訊QQ號：[1-9][0-9]{4,}
評注：騰訊QQ號從10000開始
比如 \d
預(yù)定義類: 表示數(shù)字 [0-9]
test() 方法
正則對象方法，檢測測試字符串是否符合該規(guī)則，返回true和false，參數(shù)（測試字符串）
使用語法：
Boolean = 表達(dá)式.test("要驗(yàn)證的內(nèi)容");
console.log(/\d/.test(567));
驗(yàn)證 567 符不符合 \d 的規(guī)范
正則內(nèi)部類（幫我們寫好的工具直接使用）
預(yù)定義類
. [^\n\r] 除了換行和回車之外的任意字符（“”不行）
\d [0-9] 數(shù)字字符
\D [^0-9] 非數(shù)字字符
\s [ \t\n\x0B\f\r] 空白字符
\S [^ \t\n\x0B\f\r] 非空白字符
\w [a-zA-Z_0-9] 單詞字符
\W [^a-zA-Z_0-9] 非單詞字符
簡單類（正則：//中什么特殊符號都不寫，和[]的加入）
1、/string/.test(“string”); 必須是完整的，只多不能少
/andy/.test(“andy”) // true
/andy/.test(“andylv”) // true
/andy/.test(“an”) // false
一句話，只要完整包含了andy 就可以了（有他就行）
2、/[string]/.test(“string”); 只要包含里面的任何一個就可以
/[andy]/.test("andy"); // true
/[andy]/.test("an"); // true
/[andy]/.test("ady"); // true
/[andy]/.test("anll"); // true
/[andy]/.test("assd"); // true
/[andy]/.test("ss"); // false
/[3aH8]/.test("ss"); // false
負(fù)向類（不能是其中的整體或者一部分）
中括號內(nèi)，前面加個元字符^進(jìn)行取反，不是括號里面的字符（一部分也不行）。
(可以不夠，但是不能多)（不夠和正好，返回false；多了或者沒有返回true）
console.log(/[^abc]/.test('a'));
console.log(/[^abc]/.test('gg'));
注意: 這個符號 ^ 一定是寫到方括號里面
范圍類
有時匹配的東西過多，而且類型又相同，全部輸入太麻煩，我們可以在中間加了個橫線
console.log(/[a-z]/.test('1111'));
console.log(/[A-Z]/.test('aa'));
組合類
用中括號匹配不同類型的單個字符。
console.log(/[a-m1-5]/.test("b"))//true
正則邊界（重點(diǎn)）
^ 會匹配行或者字符串的起始位置
注：^在[]中才表示非！這里表示開始
$ 會匹配行或字符串的結(jié)尾位置
^$在一起 表示必須是這個（精確匹配）
// 邊界可以精確說明要什么console.log(/lily/.test("lilyname")); // trueconsole.log(/^lily$/.test("lily")); // trueconsole.log(/^lily$/.test("ly")); // false
console.log(/^andy$/.test("andy")); // true
這個的最終意思就是 說， 必須是 andy 這四個字母
量詞（重點(diǎn)）
（多個字母，重復(fù)最后一個）
- (貪婪) 重復(fù)零次或更多 (>=0)
- (懶惰) 重復(fù)一次或更多次 (>=1)
? (占有) 重復(fù)零次或一次 （0||1） 要么有 要么沒有
{} 重復(fù)多少次的意思 可以有多少個
您的銀行卡密碼只能是 6位 {6}
{n} n次 （x=n）
{n,} 重復(fù)n次或更多 (x>=n)
{n,m} 重復(fù)出現(xiàn)的次數(shù)比n多但比m少 (n<=x<=m)
{0,}
{1,}
? {0,1}
x|y 一個 | x 或者 y（沒有&，用的是，代替的）
（）提高權(quán)限，有限計(jì)算
案例：
匹配座機(jī)號
var regexp = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;var demo = /0\d{2}-\d{8}$|0\d{3}-\d{7}$/;
匹配中文
（ /^[\u4e00-\u9fa5]{2,4}$/ ）
3.匹配驗(yàn)證表單（注冊QQ）
replace 函數(shù)
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。
語法格式：(返回值是新字符串)
需要匹配的對象.replace(正則式/字符串，替換的目標(biāo)字符)
正則表達(dá)式的匹配模式支持的2個標(biāo)志
g：表示全局模式（global），即模式將被應(yīng)用于所有字符串而非發(fā)現(xiàn)一個而停止
i：表示不區(qū)分大小寫（ease-insensitive）模式，在確定匹配想時忽略模式與字符串的大小寫
封裝自己的trim 函數(shù)
function trim(str) {
return str.replace(/（^\s+）|（\s+$）/g,""); // 去掉前面和后面的空格
}
