1復(fù)習(xí)
- 根據(jù)位置返回 字符 asdfg.charAt(3)=f
根據(jù)字符返回位置 從前面索引 asdfgg.indexOf(“f”)=3
從后面索引lastIndexOf(“g”)=5 - slice(起始位置弥鹦，[ 結(jié)束位置 ])
slice(3) 從第3個(gè)開始選 slice(3,6) 從索引號(hào)3開始取荚孵，數(shù)6個(gè) 但是從索引號(hào)0 開始數(shù)
var arr = [1,3,5,7];
asdfghidk fgh
substr(3,6) 從3開始選 從第三個(gè)開始數(shù) 往后 數(shù) 6個(gè) fghidk
toFixed(2)
緩動(dòng)公式 :
leader = leader + (target - leader) / 10
2offset家族
目的： js中有一套方便的獲取元素尺寸的辦法就是offset家族帖汞；
offsetWidth offsetHeight
得到對(duì)象的寬度和高度(自己的，與他人無關(guān))
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
為什么不用 div.style.width 因?yàn)闁|西 只能得到行內(nèi)的數(shù)值offsetLeft offsetTop
返回距離上級(jí)盒子（最近的帶有定位）左邊的位置
如果父級(jí)都沒有定位則以body 為準(zhǔn)
這里的父級(jí)指的是所有上一級(jí) 不僅僅指的是 父親 還可以是 爺爺 曾爺爺 曾曾爺爺苹熏。。币喧。轨域。
offsetLeft 從父級(jí)的padding 開始算 父親的border 不算
總結(jié)一下： 就是子盒子到定位的父盒子邊框到邊框的距離offsetParent
返回改對(duì)象的父級(jí) （帶有定位） 不一定是親的爸爸
前面學(xué)過一個(gè)返回父親(親的) parentNode 有所區(qū)別
如果當(dāng)前元素的父級(jí)元素沒有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body杀餐。
2干发、如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級(jí)元素史翘。offsetTop style.top 的區(qū)別
- 最大區(qū)別在于 offsetLeft 可以返回沒有定位盒子的距離左側(cè)的位置枉长。 而 style.top 不可以 只有定位的盒子 才有 left top right
- offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串恶座，除了數(shù)字外還帶有單位：px搀暑。
style.left = 300px parseInt（300px） 結(jié)果 300
parseInt（style.left） + parseInt（style.left） - offsetTop 只讀，而 style.top 可讀寫跨琳。
- 如果沒有給 HTML 元素指定過 top 樣式自点，則 style.top 返回的是空字符串。
- 最重要的區(qū)別 style.left 只能得到 行內(nèi)樣式 offsetLeft 隨便
3事件對(duì)象
我們學(xué)過一些事件 : onmouseover onmouseout onclick .....
btn.onclick = function(event) { 語句 }
event 單詞翻譯過來 事件 的意思
event 就是事件的對(duì)象 指向的是 事件 是 onclick
在觸發(fā)DOM上的某個(gè)事件時(shí)脉让，會(huì)產(chǎn)生一個(gè)事件對(duì)象event桂敛，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息功炮。所有瀏覽器都支持event對(duì)象，但支持的方式不同术唬。
比如鼠標(biāo)操作時(shí)候薪伏，會(huì)添加鼠標(biāo)位置的相關(guān)信息到事件對(duì)象中。
普通瀏覽器支持 event
ie 678 支持 window.event
所以我們 采取兼容性的寫法 ：
var event = event || window.event;
- event 常見屬性屬性 作用
- data 返回拖拽對(duì)象的URL字符串（dragDrop）
- width 該窗口或框架的高度
- height 該窗口或框架的高度
- pageX 光標(biāo)相對(duì)于該網(wǎng)頁的水平位置（ie無）
- pageY 光標(biāo)相對(duì)于該網(wǎng)頁的垂直位置（ie無）
- screenX 光標(biāo)相對(duì)于該屏幕的水平位置
- screenY 光標(biāo)相對(duì)于該屏幕的垂直位置
- target 該事件被傳送到的對(duì)象
- type 事件的類型
- clientX 光標(biāo)相對(duì)于該網(wǎng)頁的水平位置 （當(dāng)前可見區(qū)域）
- clientY 光標(biāo)相對(duì)于該網(wǎng)頁的水平位置
- pageX clientX screenX 區(qū)別
- screen X screenY
是以我們的電腦屏幕 為基準(zhǔn)點(diǎn) 測(cè)量 - pageX pageY
以我們的 文檔 （絕對(duì)定位） 的基準(zhǔn)點(diǎn) 對(duì)齊
ie678 不認(rèn)識(shí) - clientX clientY
以 可視區(qū)域 為基準(zhǔn)點(diǎn) 類似于 固定定位
4常用事件
onmouseover onmouseout onclick
onmousemove 當(dāng)鼠標(biāo)移動(dòng)的時(shí)候 就是說粗仓，鼠標(biāo)移動(dòng)一像素就會(huì)執(zhí)行的事件
div.onmousemove = function() { 語句 }
當(dāng)鼠標(biāo)再div 身上移動(dòng)的時(shí)候嫁怀，就會(huì)執(zhí)行。
div.onmouseover 和 div.onmousemove 區(qū)別
他們相同點(diǎn) 都是 經(jīng)過 div 才會(huì)觸發(fā)
div.onmouseover 只觸發(fā)一次
div.onmousemove 每移動(dòng)一像素借浊，就會(huì)觸發(fā)一次
onmouseup 當(dāng)鼠標(biāo)彈起
onmousedown 當(dāng)鼠標(biāo)按下的時(shí)候
- 拖動(dòng) 原理 == 鼠標(biāo)按下 接著 移動(dòng)鼠標(biāo) 塘淑。
document.onmousemove = function(){
}
}
當(dāng)我們按下鼠標(biāo)的時(shí)候，就要記錄當(dāng)前 鼠標(biāo) 的位置 - 大盒子的位置
算出 bar 當(dāng)前 在 大盒子內(nèi)的距離 蚂斤。
- 防止選擇拖動(dòng)
我們知道 按下鼠標(biāo)然后拖拽可以選擇文字 的存捺。
清除選中的內(nèi)容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
