一.client家族
1.1.clientWidth 和 clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高:document.body.clientHeight
1.2clientLeft 和 clientTop
clientLeft , clientTop
返回的是元素邊框的borderWidth
如果不指定一個(gè)邊框或者不定位該元素,其值就為0
1.3offset? client 和scroll的區(qū)別分析
left 和 top分析:
? ? ? ? ?clientLeft :左邊邊框的寬度;clientTop:上邊邊框的寬度
? ? ? ? offsetLeft:當(dāng)前元素距離有定位的父盒子左邊的距離;offsetTop:當(dāng)前元素距離有定位的父盒子上邊的距離(如果沒(méi)有父元素或父元素都沒(méi)有定位,就以body為參照)
? ? ? ? scrollLeft:左邊滾動(dòng)的長(zhǎng)度;scrollTop:上邊滾動(dòng)的長(zhǎng)度;
width和height分析:
clientWidth/Height:內(nèi)容+內(nèi)邊距
offsetWidth/Height:內(nèi)容+內(nèi)邊距+邊框
scrollWidth/Height:滾動(dòng)內(nèi)容的寬度和高度
二.獲取屏幕的可視區(qū)域
ie9+ 和 最新瀏覽器
window.innerWidth,window.innerHeight
標(biāo)準(zhǔn)模式瀏覽器
document.documentElement.clientWidth,document.documentElement.clientHeight;
怪異模式
document.body.clientWidth,document.body.clientHeight;
通用寫法
function client() {
if(window.innerWidth){ // ie9及其以上的版本
return{
width: window.innerWidth,
height:? window.innerHeight
}
}else if(document.compatMode != 'CSS1Compat'){? // 怪異模式
return{
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
// 標(biāo)準(zhǔn)
return{
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
三.常用窗口事件-onresize
當(dāng)窗口或框架的大小發(fā)生改變的時(shí)候就會(huì)調(diào)用;
onresize一般被運(yùn)用于自適應(yīng)頁(yè)面布局等多屏幕適配場(chǎng)景;
應(yīng)用:當(dāng)屏幕的寬度>=900時(shí),頁(yè)面的背景顏色為紅色;當(dāng)屏幕的寬度>=600時(shí),頁(yè)面的背景顏色為綠色;當(dāng)屏幕的寬度<600時(shí),頁(yè)面的背景顏色為藍(lán)色
補(bǔ)充:獲取屏幕的分辨率
window.screen.height
window.screen.width
四.JS的事件傳遞機(jī)制
4.1冒泡機(jī)制
起泡從水底開(kāi)始往上升,由深到淺,升到最上面.在上升的過(guò)程中,起泡會(huì)經(jīng)過(guò)不同深度層次的水.
這個(gè)起泡就相當(dāng)于我們這里的事件,而水則相當(dāng)于我們的整個(gè)dom樹(shù),事件從dom樹(shù)的底層,層層往上傳遞,直至傳遞到dom的根節(jié)點(diǎn).
IE6.0:
div-->body-->html-->document-->window
注意點(diǎn):不是所有的事件都能冒泡,以下事件不冒泡:blur.focus.load.unload
4.2阻止冒泡的方法
標(biāo)準(zhǔn)瀏覽器和ie瀏覽器
W3c:event.cancelBubble=true
兼容寫法:
var event = event || window.event;
if(event.stopPropagation){ // w3c標(biāo)準(zhǔn)
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
4.3獲取當(dāng)前操作對(duì)象
開(kāi)發(fā)中,當(dāng)執(zhí)行一個(gè)事件時(shí)需要去知道觸發(fā)這個(gè)事件的對(duì)象是誰(shuí),
火狐.谷歌 event.target
ie? 678 event.srcElement
一般是獲取這個(gè)對(duì)象的id 兼容寫法如下:
js var targetId = event.target ? event.target.id : event.srcElement.id;
4.4 獲取用戶選中的內(nèi)容
標(biāo)準(zhǔn)瀏覽器
window.getSelection()
ie獲得選擇的文字
document.selection.createRange().text
兼容寫法:
var selectedText;
if(window.getSelection){ // 標(biāo)準(zhǔn)模式 獲取選中的文字
selectedText = window.getSelection().toString();
}else{ // IE 系列
selectedText = document.selection.createRange().text;
}
打開(kāi)新的窗口:
js /* * 第一個(gè)參數(shù)是url * 第二個(gè)參數(shù)是窗口的名稱 要不要打開(kāi)新的窗口 * 第三個(gè)參數(shù)是窗口的描述 窗口的位置,尺寸等 * */ window.open('http://www.reibang.com/u/ce8eba0dbfb6','newWindow','left=500,top=200,width=800,height=500');
五.綜合動(dòng)畫函數(shù)封裝
在開(kāi)發(fā)過(guò)程中,會(huì)用到很多動(dòng)畫,比如:幀動(dòng)畫,核心動(dòng)畫,轉(zhuǎn)場(chǎng)動(dòng)畫......各種復(fù)雜的動(dòng)畫都是由簡(jiǎn)單的動(dòng)畫封裝而成的,動(dòng)畫的基本原理是:盒子的offsetLeft+步長(zhǎng)
勻速動(dòng)畫函數(shù)封裝:
function animate(obj, target, speed) {?
// 1.清除定時(shí)器 clearInterval(obj.timer);?
// 2. 判斷方向 var dir = target > obj.offsetLeft ? speed : -speed; obj.timer = setInterval(function () { obj.style.left = obj.offsetLeft + dir + 'px';?
// 2.1 清除定時(shí)器 --> offsetLeft == 目標(biāo)值 if (Math.abs(target - obj.offsetLeft) <= speed) { clearInterval(obj.timer);
?// 處理偏差情況 obj.style.left = target + 'px'; } }, 10)肺稀； }
