第9章JavaScript概述续(免费阅读).pptVIP

screen对象 sreen对象主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸。有时可以利用sreen对象根据用户的屏幕分辨率打开适合该分辨率显示的网页。 使浏览器窗口自动满屏显示 body script language=JavaScript type=text/javascript window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); /script 该窗口总是满屏幕显示/body 文档对象模型DOM DOM模型 我们已经知道一段HTML代码对应一颗DOM树。 从图中可以看出，每个HTML元素就是DOM树中的一个节点。整个DOM模型都是由元素节点（element node）构成的。 html head li meta title h2 p ul a li body li 使用DOM模型 DOM在HTML页面中的应用可分为以下几类： （1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。 访问指定节点 访问指定节点”的含义是已知节点的某个属性（如id属性、name属性或者节点类型），在DOM树中寻找符合条件的节点。相关的方法包括getElementById()， getElementsByName() 和getElementsByTagName()。 访问元素属性 设置元素属性setAttribute方法 titlesetAttribute()/title script language=javascript function changePic(){ //获取图片 var myImg = document.getElementsByTagName(img)[0]; //设置图片src和title属性 myImg.setAttribute(src,02.jpg); myImg.setAttribute(title,紫荆公寓); } /script /head body img src=“01.jpg” title=“山坡 onclick=changePic() / /body 节点的分类 （1）元素节点的nodeType值为1； （2）属性节点的nodeType值为2； （3）文本节点的nodeType值为3。 a href=iframe.html target=myTarget 在指定窗口打开 属性节点 属性节点 文本节点 元素节点 制作Tab选项卡面板 Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。 首先，一个tab面板可以分解成两部分，即上方的导航条和下面的内容框，实际上，导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候，才显示与其对应的一个内容框，而把其他内容框都通过（dislay:none）隐藏了，且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。 Tab面板的结构代码 ul id=tab lia id=tab1 class=cur href=#课程特色/a/li lia id=tab2 href=#教学方法/a/li /ul div id=info1 ·a href=#本课程主要特色/abr / ·a href=#课程地位/abr / /div div id=info2 ·a href=#教学方法和教学手段/abr / ·a href=#课程的历史/abr / /div Tab面板的结构 从结构代码中可以看出，这个Tab面板是用具有2个列表项的无序列表做的导航条，使用2个div容器做的内容框。实际上这些div容器都没有上边框，而只有左、右和下边框，为了证实这一点，我们只需给这些div容器加个上边界（margin-top:12px;）就可以发现它们确实没有上边框， 其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 为了实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器使用负边界法向上偏移1像素（margin-top:-1px;），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是