520 likes | 695 Views
第 9 章 JavaScript 概述 续. 本章内容. JavaScript 简介. 一. 插入 JavaScript 的方法. 二. JavaScript 程序基础. 三. BOM 和 DOM. 四. 浏览器对象模型 BOM. window. frames. navigator. location. document. screen. history. location. forms. anchors. images. links. embeds. applets. BOM.
E N D
本章内容 JavaScript简介 一 插入JavaScript的方法 二 JavaScript程序基础 三 BOM和DOM 四
window frames navigator location document screen history location forms anchors images links embeds applets BOM • JavaScript是运行在浏览器中的,因此提供了一系列对象用于与浏览器窗口进行交互。这些对象主要有:window、document、location、navigator和screen等,把它们统称为BOM(Browser Object Model,浏览器对象模型)
JavaScript对象的层次结构 1.第一层次 JavaScript对象的层次结构中最顶层的对象是窗口对象(window),它代表当前的浏览器窗口。 Window对象常用的方法有:open()、close()、 alert()、confirm()、prompt()。 2.第二层次 窗口对象window之下是文档(document)、浏览器(navigator)、屏幕(screen)、事件(event)、框架(frame)、历史(history)、地址(location)。
JavaScript对象的层次结构 3.第三层次 文档对象之下包括表单(form)、图像(image)、链接 (link)、锚对象(anchor)等多种对象。浏览器对象之下 包括MIME类型对象(mimeType)、插件对象(plugin)等。 4.第四层次 表单对象之下包括按钮(button)、复选(checkbox)、 单选按钮(radio)、文件域(fileUpload)等。
window对象 • window对象对应着Web浏览器的窗口,使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类: • (1)调整窗口的大小和位置; • (2)打开新窗口; • (3)系统提示框; • (4)状态栏控制; • (5)定时操作。
window对象的方法 window对象有如下4个方法用来调整窗口的位置或大小。 (1)window.moveBy(dx, dy) 该方法将浏览器窗口相对于当前的位置移动指定的距离(相对定位),当dx和dy为负数时则向反方向移动。 (2)window.moveTo(x, y) 该方法将浏览器窗口移动到屏幕指定的位置(x、y处)(绝对定位)。同样可使用负数,只不过这样会把窗口移出屏幕。 (3)window.resizeBy(dw, dh) 相对于浏览器窗口的当前大小,把宽度增加dw个像素,高度增加dh个像素。两个参数也可以使用负数来缩写窗口。 (4)window.resizeTo(w, h) 把窗口大小调整为w像素宽,h像素高,不能使用负数。
window.open • 打开新窗口 • 用法:window.open([url] [, target] [, options]) • options参数可能的选项包括: • (1)height: 窗口的高度,单位为像素; • (2)width:窗口的宽度,单位为像素; • (3)left:窗口的左边缘位置; • (4)top:窗口的上边缘位置; • window.open("pop.html", "new", "width=400,height=300"); • 表示在新窗口打开pop.html,新窗口的宽和高分别是400像素和300像素。
关于target参数的取值 • target参数除了可以使用"_self","_blank"等html中的属性值外,还可以利用target参数为窗口命名,如: • window.open("pop.html", "myTarget"); • 这样可以让其他链接将目标文件指定在该窗口中打开。 • <a href="iframe.html" target="myTarget">在指定窗口打开</a> • <form target="myTarget"> <!-- 表单提交的结果将会在myTarget窗口显示-->
点击网页链接同时打开两个窗口 • <SCRIPT LANGUAGE="JavaScript">function adClick(ad, site) {window.open(ad);window.location = site;}</script><!--修改链接地址,前一个在新窗口打开,后一个在当前窗口打开 --> <a href="javascript:adClick(http://www.sohu.com, http://www.163.com);"> 同时打开两个页面</a>
系统对话框 (1)window.alert([message]) alert()方法前面已经反复使用,它只接受一个参数,即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。 (2)window.confirm([message]) 该方法将显示一个确认提示框,其中包括“确定”和“取消”按钮。 用户单击“确定”按钮时,window.confirm返回true;单击“取消”按钮时,window.confirm返回false。例如: if (confirm("确实要删除这张图片吗?")) alert("图片正在删除…"); else alert("已取消删除!");
(3)window.prompt([message] [, default]) 该方法将显示一个消息提示框,其中包含一个文本输入框。输入框能够接受用户输入参数,从而实现进一步的交互。该方法接受两个参数,第一个参数是显示给用户的文本,第二个参数为文本框中的默认值(可以为空)。整个方法返回字符串,值即为用户的输入。例如: <script language="JavaScript" type="text/javascript"> var nInput=prompt("请输入你的名字",""); if(nInput!=null) document.write("Hello! "+nInput); </script>
status属性 • 状态栏控制(status属性) • 浏览器状态的显示信息可以通过window.status属性直接进行修改。例如: window.status="看看状态栏中的文字变化了吗?";
history属性 • 浏览器后退和前进(history属性) • window还有一个非常实用的属性是history。它可以访问历史页面,但不能获取到历史页面的URL,如果希望浏览器返回前一页可以使用如下代码: • window.history.go(-1); • 如果希望前进一页,只需要使用正数1即可,代码如下: • window.history.go(1); • 如果希望刷新显示当前页,则使用0即可,代码如下: • window.history.go(0);
上面三句的效果还可以分别用back()和forward()实现,代码如下:上面三句的效果还可以分别用back()和forward()实现,代码如下: • window.history.back(); • window.history.forward(); • location.reload();
定时操作函数 • 定时操作通常有两种使用目的,一种是周期性地执行脚本,例如在页面上显示时钟,需要每隔一秒钟更新一次时间的显示,另一种则是将某个操作延时一段时间执行,例如迫使用户等待一段时间才能进行操作,可以使用window.setTimeout函数使其延时执行,而后面的脚本可以继续运行不受影响。 • 需要注意的是,定时操作函数还是利用JavaScript制作网页动画效果的基础,例如网页上的漂浮广告,就是每隔几毫秒更新一下漂浮广告的显示位置。其他的如文字打字效果,图片轮转显示等,可以说一切用Javascipt实现的动画效果都离不开setTimeout函数。
动态显示时间 <script type="text/javascript"> function $(id) { return document.getElementById(id); } function dispTime() { $("clock").innerHTML = (new Date()).toLocaleString();// 将时间显示在clock的div中 } function init() { // 启动时钟显示 dispTime(); //显示时间 window.setTimeout(init, 1000); // 过1秒钟更新执行一次init() } </script>
地址栏控制(location对象) location对象的主要作用是分析和设置页面的URL地址,它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL <select name="select" onchange="window.location.href=this.options[this.selectedIndex].value"> <option>请选择需要的网址</option> <option value="http://www.sohu.com">搜狐</option> <option value="http://www.sina.com">新浪</option> <option value="http://www.MSN.com.cn">MSN中国</option> </select>
location.replace • 如果不希望用户可以用“后退”按钮返回原来的页面,可以使用replace()方法,该方法也能转到指定的页面,但不能返回到原来的页面了,这常用在注册成功后禁止用户后退到填写注册资料的页面。例如: • <p onclick="location.replace('http://www.sohu.com');">访问搜狐</p> • 可以发现转到新页面后,“后退”按钮是灰色的了
navigator对象 • navigator对象主要是用来检测客户端浏览器信息的,关于Web浏览器的信息,浏览器的类型、版本信息以及操作系统的类型都可以从该对象中获取。 • navigator对象最常用的属性是userAgent,通常浏览器及操作系统的判断都是通过该属性来实现的,最基本的方法是首先将它的值赋给一个变量,代码如下: • var sUserAgent = navigator.userAgent; • document.write(sUserAgent);
document对象 • document对象实际上又是window对象的属性,document对象的独特之处是它既属于BOM又属于DOM。 • 从BOM角度看,document对象由一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。 • document对象最初是用来处理页面文档的,但很多属性已经不推荐继续使用了,如改变页面的背景颜色(document.bgColor)、前景颜色(document.fgColor)和链接颜色(document.linkColor)等,因为这些可以使用DOM动态操纵CSS属性实现。如果一定要使用这些属性,应该把它们放在body部分,否则对Firefox浏览器无效
获得页面的标题和最后修改时间 <title>获取页面标题</title> <script language="JavaScript"> document.write(document.title+"<br />"); document.write(document.lastModified); </script>
将页面中所有超链接的打开方式都设置为新窗口打开 <body onload="newwin()"> <script language="JavaScript" type="text/javascript"> function newwin(){ for (i=0;i<=document.links.length-1;i++) document.links[i].target="_blank"; }</script> <a href="01.htm">测试1</a> <a href="02.htm">测试2</a> < /body >
改变超链接中原来的链接地址 • 改变超链接中原来的链接地址 < body > < a href ="http://www.blogjava.net/amigoxie" > link </ a > < script type ="text/javascript" > document.write( " 原链接: " + document.links[ 0 ].href + " <br> " ); document.links[ 0 ].href = " http://blog.csdn.net/amigoxie " ; document.write( " 改变后的链接: " + document.links[ 0 ].href); </ script > </ body >
用document对象的集合属性访问html元素 <body> <img src=“logo.gif" name="imgHome"/> <form method="post" action="1.htm" name="data"> <input type="text" name="txtEmail"/> <input type="submit" value="提交"/> </form></body> • 要访问body中的img图像,可用 document.images[“imgHome”] • 访问表单中的输入框 document.forms[“data”].txtEmail • 但如果要访问table,div等html元素,由于document对象没有tables、divs这些集合属性,所以就不能这样访问了,要用后面介绍的DOM中访问指定节点的方法访问
document对象的方法(write和writeln方法) • 这两个方法都接受一个字符串参数,在当前HTML文档中输出字符串,唯一的区别是writeln在字串末尾加一个换行符(\n)。 • 但是writeln只是在HTML代码文档中添加一个换行符,由于浏览器会忽略代码中的换行符,所以以下两种方式都不会使内容在浏览器中产生换行。 • document.write("这是第一行"+"\n"); • document.writeln("这是第一行"); //等效于上一行的代码 • 要在浏览器中换行,只能再输出一个换行标记<br />,即: • document.write ("这是第一行"+"<br />");
用document.write动态引入外部js文件 • 如果要动态引入一个js文件,即根据条件判断,通过document.write输出<script>元素,则必须这样写才对: • if (prompt("是否链接外部脚本(1表示是)","")==1) • document.write("<script type='text/javascript' src='1.js'>" + "</scr"+"ipt>"); • 注意要将</script>分成两部分,因为浏览器一遇到</script>,它会假定其中代码是完整的(即使它出现字符串中。
screen对象 • sreen对象主要用来获取用户电脑的屏幕信息,包括屏幕的分辨率,屏幕的颜色位数,窗口可显示的最大尺寸。有时可以利用sreen对象根据用户的屏幕分辨率打开适合该分辨率显示的网页。 • 使浏览器窗口自动满屏显示 <body> <script language="JavaScript" type="text/javascript"> window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); </script> 该窗口总是满屏幕显示</body>
html head body meta title h2 p ul a li li li DOM模型 • 我们已经知道一段HTML代码对应一颗DOM树。 • 从图中可以看出,每个HTML元素就是DOM树中的一个节点。整个DOM模型都是由元素节点(element node)构成的。
使用DOM模型 • DOM在HTML页面中的应用可分为以下几类: • (1)访问指定节点; • (2)访问相关节点; • (3)访问节点属性; • (4)检查节点类型; • (5)创建节点; • (6)操作节点。
访问指定节点 • 访问指定节点”的含义是已知节点的某个属性(如id属性、name属性或者节点类型),在DOM树中寻找符合条件的节点。相关的方法包括getElementById(), • getElementsByName() • 和getElementsByTagName()。
访问元素属性 • 设置元素属性setAttribute方法 • <title>setAttribute()</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>
元素节点 a href="iframe.html" target="myTarget" 在指定窗口打开 属性节点 属性节点 文本节点 节点的分类 • (1)元素节点的nodeType值为1; • (2)属性节点的nodeType值为2; • (3)文本节点的nodeType值为3。
制作Tab选项卡面板 • Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。
Tab面板的结构代码 <ul id="tab"> <li><a id="tab1" class="cur" href="#">课程特色</a></li> <li><a id="tab2" href="#">教学方法</a></li> </ul> <div id="info1"> ·<a href="#">本课程主要特色</a><br /> ·<a href="#">课程地位</a><br /> </div> <div id="info2"> ·<a href="#">教学方法和教学手段</a><br /> ·<a href="#">课程的历史</a><br /> </div>
Tab面板的结构 • 从结构代码中可以看出,这个Tab面板是用具有2个列表项的无序列表做的导航条,使用2个div容器做的内容框。实际上这些div容器都没有上边框,而只有左、右和下边框,为了证实这一点,我们只需给这些div容器加个上边界(margin-top:12px;)就可以发现它们确实没有上边框,
其实div的上边框是由导航条ul#tab元素的下边框实现的,这是因为当鼠标滑过tab项时,要让tab的子元素的下边框变为白色,而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。其实div的上边框是由导航条ul#tab元素的下边框实现的,这是因为当鼠标滑过tab项时,要让tab的子元素的下边框变为白色,而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 • 为了实现这种边框的遮盖,首先必须使两个元素的边框重合,当然,有人会说,如果给div容器加个上边框,再让div容器使用负边界法向上偏移1像素(margin-top:-1px;),那么它的上边框也会和tab项的下边框重合,但这样的话是div容器的上边框覆盖在tab项的下边框上,这样即算tab项的下边框变白色,也会被div容器的上边框覆盖而看不到效果,这就是div容器不能有上边框的原因。
所以只能使用ul的子元素的下边框覆盖ul元素的下边框,因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色,而IE 6只支持a元素的hover伪类,所以选择用a元素的下边框覆盖ul元素的下边框 #tab { margin: 0; /*通用设置,将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动,ul盒子高度为0,用填充使高度扩展*/ list-style-type: none; /*去掉列表元素列表项前的小黑点*/ border-bottom:1px solid #11a3ff; /*给ul元素添加下边框*/ }
每个选项a元素的样式 #tab a { display: block; padding: 0 10px; /*给a元素左右加10像素填充 */ height:23px; /*使a元素的高度正好等于ul元素高度,从而它们的下边框重合 */ line-height:23px; /*以上两条使a元素文字垂直居中 */ border: 1px solid #11a3ff; /*设置边框 */ margin:0 4px 0 0; /*设置右边界 */ font-size: 14px; color: #993300; text-decoration: none; /*去下划线 */ background-color: #BBDDFF; }
这样ul#tab元素的高是24+1=25象素,a元素的高是23+1+1=25象素,而且a元素是浮动的,脱离了标准流,所以a元素不会占据ul元素的空间,在IE中ul元素的高也不会被a元素撑开。这样ul#tab元素的高是24+1=25象素,a元素的高是23+1+1=25象素,而且a元素是浮动的,脱离了标准流,所以a元素不会占据ul元素的空间,在IE中ul元素的高也不会被a元素撑开。 • 注意:ul元素作为浮动盒子a的外围容器不能设置宽和高,否则在IE中浮动盒子(a元素)将不会脱离标准流,这样a元素的盒子将被包含在ul元素的盒子中,两个盒子的下边框将无法重叠。这就是为什么对ul#tab元素设置下填充为24像素,而不设置高度为24像素(height:24px;)的原因。 • 同样,ul元素不能设置宽度,这意味着tab面板的宽度是无法由其自身控制的,但这并不构成一个问题,因为tab面板总是放在网页中其他元素(如div)中的,只要设置外围容器的宽度,就能控制tab面板的宽度了。
#tab li { float:left; /*使tab项水平排列 */ margin:0 4px 0 0; /*设置右边界,使tab项之间右间距 */ } div { background-color: #FFeeee; padding: 10px; border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */ border-bottom:1px solid #11a3ff; /* 下边框 */ }
当鼠标滑过时 #info2 { display: none; /*使#info2暂时隐藏起来 */ } #tab a:hover,#tab a.cur { border-bottom: 1px solid #ffeeee; /*鼠标滑过或是当前选项时改变下划线颜色 */ color: #F74533; /*改变tab项的文字颜色 */ background-color: #FFeeee; /*改变tab项的背景颜色 */ }
添加行为 <ul id="tab"> <li><a id="tab1" onmouseover="changtab(1)" class="cur" href="#">课程特色</a></li> <li><a id="tab2" onmouseover="changtab(2)" href="#">教学方法</a></li> </ul> 最后写JavaScript代码: <script language="JavaScript" type="text/javascript"> function changtab(n) { for(i=1;i<=document.getElementsByTagName("li").length;i++) { document.getElementById('info'+i).style.display='none'; document.getElementById('tab'+i).className='none'; } document.getElementById('info'+n).style.display='block'; document.getElementById('tab'+n).className='cur'; }</script>
DW CS3对JavaScript的支持 • 行为面板 • Spry组件