前端学习日志1013

BOM对象

location对象：

 URL

location对象的常见方法:

navigator对象:

 navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

 history对象:

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

元素偏移量 offset 系列 

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置（没有定位，则到HTML）
2. 获得元素自身的大小（宽度高度）
3. 注意：返回的数值都不带单位

offset 与 style 区别:

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width

• offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串

• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值

• 所以，我们想要给元素更改值，则需要用style改变

 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

元素滚动 scroll 系列 

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

三大系列总结 

他们主要用法：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

2.client经常用于获取元素大小  clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset  获得 

mouseenter 和mouseover的区别

• 当鼠标移动到元素上时就会触发mouseenter 事件
• 类似 mouseover，它们两者之间的差别是

• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter  只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡

• 跟mouseenter搭配鼠标离开 mouseleave  同样不会冒泡