1 复习
- offset 自己的 偏移
offsetWidth 得到自己的宽度
offsetHeight
构成 ： width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221 - offsetLeft offsetTop
div.offsetLeft
得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离 - offsetParent 返回自己的父亲元素 （带有定位的）
parentNode 这个返回亲父亲 不管父亲是否带有定位 - style.top offsetTop
offsetTop 只读 只可以得到结果 但是不能赋值
style.top 能得到 （行内式 ） 但是可以给值
style.top 得到的是 25px
offsetTop 得到的是 25 - 事件对象 event
div.onclick = function(event) { } event 是点击的事件对象
event 集合点击事件的相关信息
pageX 文档的 参考点
clientX 可视区域
ScreenX 屏幕 - 常用事件
onmouseover 经过
onmouseout 离开
onmousemove 鼠标移动
var num = 0;
div.onmouseover = function() { num++; console.log(num))} 1
div.onmousemove = function() { num++; console.log(num))}
onmousedown 按下鼠标
onmouseup 弹起鼠标
拖拽： 先按下鼠标 然后 移动鼠标
bar.onmousedown = funtion() {
document.onmousemove = function() {}
}
最大 window 对象 document对象
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ie
3 Html基本结构访问方法
文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;
4 scroll家族
- scrollTop scrollLeft
scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离 - 怎么得到scrollTop
我们学习一个事件 ： 页面滚动效果
window.onscroll = function() { 页面滚动语句 }
谷歌浏览器 和没有声明 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐 和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器 都认识
window.pageXOffset; pageYOffset （scrollTop）
兼容性写法：
1 var scrollTop = window.pageYOffset || document.documentElement.scrollTop 2 || document.body.scrollTop || 0; - JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript
Json很像我们学过的样式条；
var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;
Json一般就是被当做一个配置单用；
我们的网站，可以注册会员：
姓名： 李白
年龄: 500
职业： it
json 对象 结构书写：
var json = { key: value， key1:value } var json = {name: “李白”,age: 15} 使用： json名.属性 json.name 李白 var json1 = {name :"刘德华",age: 55}; console.log(json1.name); // 输出名字 刘德华 console.log(json1.age); // 输出年龄 55 - 判断是不是怪异模式的浏览器
document.compatMode == "CSS1Compat" document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明注意大小写 ` - scrollTo(x,y)
window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。
