黑马JS学习笔记——PC端网页特性

1. 元素偏移量offset 系列

1.1 offset概述

~可以动态地得到某元素的位置（偏移）、大小等。

• 获得的元素距离带有定位父元素的位置；
• 获得元素自身的大小（宽度高度）；
• 注意：返回的数值都不带单位

element.parentNode //返回最近一级的父元素，不管是否有定位

1.2 offset与style区别

案例——京东商品放大镜效果

 

2. 元素可视区client 系列

client:客户端，可获取元素可视区相关信息，动态得到该元素的边框大小、元素大小等

立即执行函数：不需要调用，立马能够自己执行的函数；

~最大作用：创建了一个独立的作用域，避免了命名冲突问题

//立即执行函数 写法1
(function() {})()  //第二个小阔哈可以看作是调用函数，里面可以放实参，传递给形参

//立即执行函数 写法2
(function(){}())

//多个匿名函数之间用 ; 隔开

3.元素scroll系列属性

~可以动态得到该元素的大小、滚动距离等

 不含边框，含padding

 

3.3 页面被卷去的头部兼容性解决方案

1.声明了DTD，使用document.documentElement.scrollTop;

2.未声明DTD，使用document.body.scrollTop;

3.新方法window.pageYOffset 和 window.pageXOffset,IE9开始支持

//考虑页面被卷去的头部的兼容性代码
function getScroll() {
    return {
        left:window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft ||0,
        top:window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop ||0
    };
}
//调用的时候为：
getScroll().left;

三大系列总结

 主要用法：

offset系列经常用于获得元素位置：offsetLeft  offsetTop;

client用于获取元素大小 clientWidth clientHeight

scroll用于获取滚动距离 scrollTop scrollLeft

页面滚动距离：window.pageXOffset

mouseenter 和 mouseover的区别

• 两者都是鼠标经过触发事件；
• mouseover鼠标经过自身盒子会处罚法，经过子盒子也会触发；mouseenter只会经过自身盒子触发，在子盒子中不会触发；
• 原因：mouseenter不会冒泡 
• 跟mouseenter搭配的鼠标离开事件：mouseleave同样不会冒泡