BOM/大小位置

当我们使用window成员的时候可以省略,window代表整个浏览器窗口,不是可视区。

window固有属性不能赋值

页面加载事件:
window.onload = function() {

}
等待页面加载完毕,包括元素创建完毕,引用的资源文件完毕。
在页面底部写的<script>会在页面元素创建完毕就执行。(效率更高)

定时器:

setTimeout()   定时炸弹,隔一段时间执行,并且只会执行一次
setInterval()  闹钟     会重复执行
window.setTimeout()  第一个参数是函数,第二个是时间间隔,毫秒
有一个返回值,表明定时器的标识,通过这个标识可以取消定时器。
取消定时器:clearTimeout(timerId);

window.setInterval() 用法与上面的类似
location是window下的一个对象,
可以获取地址栏的地址
location.href = 'http://www.baidu.com';
location.assign();  和href功能一样
location.replace(); 替换完地址之后不记录历史,不能后退
location.reload();  重新加载,就是f5  
参数如果是true从服务器获取,  ctrl+f5
如果是false就是从本地缓存获取。  f5
offsetLeft偏移坐标,可以通过这个属性获取当前元素距离左侧的偏移值
offetTop  与上方的偏离值
window.history  返回上一页面
window.forward()  前进

nvaigator.userAgnet 可以获取操作系统,浏览器版本
offset:
element.offsetLeft 获取距离offsetParent的左距离坐标
element.offsetTop  获取距离offsetParent顶部坐标

offsetParent 获取距离当前元素最近定位父元素,如果没有父元素是body
获取这个父元素的结点
offsetWidth   获取元素的宽度 包括边框
offsetHeight  获取元素的高度 包括边框
client:
element.clientLeft 对应的是border-left的宽度
element.clientTop  对应的是border-top的宽度
clientWidth    不包括外边框
clientHeight   不包括外边框
scroll:
element.scrollLeft  内容滚动出去的距离
element.scrollTop  内容滚动出去的距离
scrollWidth   元素的宽度,包括padding,不包括滚动条
scrollHeight  元素的高度,包括padding,不包括滚动条
获取窗口可见区域的宽高:
document.documentElement.clientWidth
document.documentElement.clientHeight
鼠标跟随两种
var img = document.getElementsByTagName('img')[0];
document.addEventListener('mousemove',function(e) {
	var X = e.clientX + document.documentElement.scrollLeft;
	var Y = e.clientY + document.documentElement.scrollTop;
	img.style.top = Y + 'px';
	img.style.left = X + 'px';
});
var img = document.getElementsByTagName('img')[0];
document.addEventListener('mousemove',function(e) {
	var X = e.pageX;
	var Y = e.pageY;
	img.style.top = Y + 'px';
	img.style.left = X + 'px';
});
mouseenter和mouseover的区别
两者都是鼠标进入触发事件,但当结构是父子结构的时候
mouseover会触发事件冒泡   mouseout是鼠标移出,同理
mouseenter则不会触发事件冒泡   mouseleave 是鼠标移出,同理

发表评论

邮箱地址不会被公开。 必填项已用*标注