12前端基本功网页特效201前端基本功js第九天

《12前端基本功网页特效201前端基本功js第九天》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、前端基本功—javascript第九天目录目录21.2复习31.3模拟垂直滚动条51.4Html基本结构访问方法71.5scroll家族71.5.1scrollTopscrollLeft71.5.2怎么得到scrollTop81.5.3JSON91.5.4判断是不是怪异模式的浏览器101.6scrollTo(x,y)10复习offset自己的偏移offsetWidth得到自己的宽度offsetHeight构成：width+padding+borderdivwidth200border3pxpadding-right:15pxdivoffsetWidth=200+6+15=2212.offset

2、LeftoffsetTopdiv.offsetLeft得到距离这个div最近的带有定位的父盒子左边距离3.offsetParent返回自己的父亲元素（带有定位的）parentNode这个返回亲父亲不管父亲是否带有定位4.style.topoffsetTopoffsetTop只读只可以得到结果但是不能赋值style.top能得到（行内式）但是可以给值style.top得到的是25pxoffsetTop得到的是255.事件对象eventdiv.onclick=function(event){}event是点击的事件对象event集合点击事件的相关信息pageX文档的参考点clientX可视区域Sc

3、reenX屏幕6.常用事件onmouseover经过onmouseout离开onmousemove鼠标移动varnum=0;div.onmouseover=function(){num++;console.log(num))}1div.onmousemove=function(){num++;console.log(num))}onmousedown按下鼠标onmouseup弹起鼠标拖拽：先按下鼠标然后移动鼠标bar.onmousedown=funtion(){document.onmousemove=function(){}}最大window对象document对象window.getSel

4、ection?window.getSelection().removeAllRanges():document.selection.empty();ie1.1模拟垂直滚动条红色盒子高度计算公式：容器的高度/内容的高度*容器的高度红色方块移动一像素，我们的内容盒子移动多少呢？（内容盒子高度-大盒子高度）/(大盒子高度-红色盒子的高度)计算倍数（内容盒子高度-大盒子高度）/(大盒子高度-红色盒子的高度)*红色盒子移动的数值1.1Html基本结构访问方法文档是documenthtmlbodyheaddocument.headdocument.bodydocument.title没有document.

5、html取而代之的是document.documentElement;1.2scroll家族Offset自己的偏移scroll滚动的1.2.1scrollTopscrollLeftscrollTop被卷去的头部它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离1.1.1怎么得到scrollTop我们学习一个事件：页面滚动效果window.onscroll=function(){页面滚动语句}谷歌浏览器和没有声明DTD：document.body.scrollTop;火狐和其他浏览器document.documentElement.scrollTop;ie9+和最新浏览器

6、都认识window.pageXOffset;pageYOffset（scrollTop）兼容性写法：1varscrollTop=window.pageYOffset

7、

8、document.documentElement.scrollTop1

9、

10、document.body.scrollTop

11、

12、0;1.1.1JSONJSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScriptJson很像我们学过的样式条；varmyjson={k:v,k:v,k:v...}

13、键值对key:valuecolor:red;Json一般就是被当做一个配置单用；我们的网站，可以注册会员：姓名：李白年龄:500职业：itxmljson对象结构书写：varjson={key:value，key1:value}varjson={name:“李白”,age:15}使用：json名.属性json.name李白varjson1={name:"刘德华",age:55};console.lo