js小知识4
2017-10-22 本文已影响0人
晓箬
一、BOM
浏览器对象模型
window.location 包含地址信息
.pathname
.host
.port
window.open(); 打开新窗口
window.close(); 关闭窗口
二、获取元素的各种信息
获取元素盒子模型
oEle.offsetWidth
oEle.offsetHeight
获取元素相对位置
oEle.offsetLeft
oEle.offsetTop
获取元素绝对位置
function getPos(obj){
var l = 0,
t = 0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj = obj.offsetParent;
}
return {left: l, top: t};
}
获取可视区宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
获取滚动距离
document.documentElement.scrollTop||document.body.scrollTop
document.documentElement.scrollLeft||document.body.scrollLeft
新事件
window.onresize 可视区大小改变触发
window.onscroll 滚动距离改变触发
可视区宽高
document.documentElement.clientWidth 可视区宽
document.documentElement.clientHeight 可视区高
滚动距离
scrollTop 垂直方向
document.documentElement.scrollTop||document.body.scrollTop
scrollLeft 水平方向
document.documentElement.scrollLeft||document.body.scrollLeft
三、瀑布流
oEle.getElementsByTagName
oEle.getElementsByClassName
oEle.children;
注意:获取出来的都是伪数组,不能使用数组的方法
获取高度
获取盒子模型高度
oEle.offsetHeight
获取内容高度
oEle.scrollHeight
当内容小于高度,获取的是height+padding,如果内容超过高度,获取的是内容高度
四、事件、事件对象
事件
onclick 点击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onscroll 滚动距离改变
onresize 改变可视区大小
onload 加载完执行
onmousemove 鼠标移动触发
oncontextmenu 上下文菜单
---------------------------------------------------
事件对象 包含了事件的详细信息
ev(参数) 不兼容IE6、7、8
event 不兼容Firefox
var oEvent = ev||event;
获取鼠标在可视区中的坐标
oEvent.clientX
oEvent.clientY
----------------------------------------------------
键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
获取键码
oEvent.keyCode
a 65
0 48
1 49
← 37
↑ 38
→ 39
↓ 40
浏览器默认行为
需求:
阻止浏览器默认行为
事件中:
return false;
事件冒泡
子级的事件,会触发父级相同的事件
取消冒泡
oEvent.cancelBubble = true;
五、拖拽
鼠标按下
onmousedown
获取鼠标在元素中的位置
disX = clientX-offsetLeft
disY = clientY-offsetTop
鼠标移动
onmousemove
clientX-disX
clientY-disY
鼠标抬起
onmouseup
onmousemove = null;
onmouseup = null;
会选中文字
return false阻止默认行为
ie低版本失效
解决:
设置捕获
oEle.setCapture&&oEle.setCapture();
释放捕获
oEle.releaseCapture&&releaseCapture();