1 / 51

第 9 章 JavaScript 概述 续

第 9 章 JavaScript 概述 续. 本章内容. JavaScript 简介. 一. 插入 JavaScript 的方法. 二. JavaScript 程序基础. 三. BOM 和 DOM. 四. 浏览器对象模型 BOM. window. frames. navigator. location. document. screen. history. location. forms. anchors. images. links. embeds. applets. BOM.

teal
Download Presentation

第 9 章 JavaScript 概述 续

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第9章 JavaScript概述续

  2. 本章内容 JavaScript简介 一 插入JavaScript的方法 二 JavaScript程序基础 三 BOM和DOM 四

  3. 浏览器对象模型BOM

  4. 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,浏览器对象模型)

  5. JavaScript对象的层次结构 1.第一层次 JavaScript对象的层次结构中最顶层的对象是窗口对象(window),它代表当前的浏览器窗口。 Window对象常用的方法有:open()、close()、 alert()、confirm()、prompt()。 2.第二层次    窗口对象window之下是文档(document)、浏览器(navigator)、屏幕(screen)、事件(event)、框架(frame)、历史(history)、地址(location)。

  6. JavaScript对象的层次结构 3.第三层次   文档对象之下包括表单(form)、图像(image)、链接 (link)、锚对象(anchor)等多种对象。浏览器对象之下 包括MIME类型对象(mimeType)、插件对象(plugin)等。 4.第四层次   表单对象之下包括按钮(button)、复选(checkbox)、 单选按钮(radio)、文件域(fileUpload)等。

  7. window对象 • window对象对应着Web浏览器的窗口,使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类: • (1)调整窗口的大小和位置; • (2)打开新窗口; • (3)系统提示框; • (4)状态栏控制; • (5)定时操作。

  8. 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像素高,不能使用负数。

  9. 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像素。

  10. 关于target参数的取值 • target参数除了可以使用"_self","_blank"等html中的属性值外,还可以利用target参数为窗口命名,如: • window.open("pop.html", "myTarget"); • 这样可以让其他链接将目标文件指定在该窗口中打开。 • <a href="iframe.html" target="myTarget">在指定窗口打开</a> • <form target="myTarget"> <!-- 表单提交的结果将会在myTarget窗口显示-->

  11. 点击网页链接同时打开两个窗口 • <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>

  12. 系统对话框 (1)window.alert([message]) alert()方法前面已经反复使用,它只接受一个参数,即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。 (2)window.confirm([message]) 该方法将显示一个确认提示框,其中包括“确定”和“取消”按钮。 用户单击“确定”按钮时,window.confirm返回true;单击“取消”按钮时,window.confirm返回false。例如: if (confirm("确实要删除这张图片吗?")) alert("图片正在删除…"); else alert("已取消删除!");

  13. (3)window.prompt([message] [, default]) 该方法将显示一个消息提示框,其中包含一个文本输入框。输入框能够接受用户输入参数,从而实现进一步的交互。该方法接受两个参数,第一个参数是显示给用户的文本,第二个参数为文本框中的默认值(可以为空)。整个方法返回字符串,值即为用户的输入。例如: <script language="JavaScript" type="text/javascript"> var nInput=prompt("请输入你的名字",""); if(nInput!=null) document.write("Hello! "+nInput); </script>

  14. status属性 • 状态栏控制(status属性) • 浏览器状态的显示信息可以通过window.status属性直接进行修改。例如: window.status="看看状态栏中的文字变化了吗?";

  15. history属性 • 浏览器后退和前进(history属性) • window还有一个非常实用的属性是history。它可以访问历史页面,但不能获取到历史页面的URL,如果希望浏览器返回前一页可以使用如下代码: • window.history.go(-1); • 如果希望前进一页,只需要使用正数1即可,代码如下: • window.history.go(1); • 如果希望刷新显示当前页,则使用0即可,代码如下: • window.history.go(0);

  16. 上面三句的效果还可以分别用back()和forward()实现,代码如下:上面三句的效果还可以分别用back()和forward()实现,代码如下: • window.history.back(); • window.history.forward(); • location.reload();

  17. 定时操作函数 • 定时操作通常有两种使用目的,一种是周期性地执行脚本,例如在页面上显示时钟,需要每隔一秒钟更新一次时间的显示,另一种则是将某个操作延时一段时间执行,例如迫使用户等待一段时间才能进行操作,可以使用window.setTimeout函数使其延时执行,而后面的脚本可以继续运行不受影响。 • 需要注意的是,定时操作函数还是利用JavaScript制作网页动画效果的基础,例如网页上的漂浮广告,就是每隔几毫秒更新一下漂浮广告的显示位置。其他的如文字打字效果,图片轮转显示等,可以说一切用Javascipt实现的动画效果都离不开setTimeout函数。

  18. 动态显示时间 <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>

  19. 地址栏控制(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>

  20. location.replace • 如果不希望用户可以用“后退”按钮返回原来的页面,可以使用replace()方法,该方法也能转到指定的页面,但不能返回到原来的页面了,这常用在注册成功后禁止用户后退到填写注册资料的页面。例如: • <p onclick="location.replace('http://www.sohu.com');">访问搜狐</p> • 可以发现转到新页面后,“后退”按钮是灰色的了

  21. navigator对象 • navigator对象主要是用来检测客户端浏览器信息的,关于Web浏览器的信息,浏览器的类型、版本信息以及操作系统的类型都可以从该对象中获取。 • navigator对象最常用的属性是userAgent,通常浏览器及操作系统的判断都是通过该属性来实现的,最基本的方法是首先将它的值赋给一个变量,代码如下: • var sUserAgent = navigator.userAgent; • document.write(sUserAgent);

  22. document对象

  23. document对象 • document对象实际上又是window对象的属性,document对象的独特之处是它既属于BOM又属于DOM。 • 从BOM角度看,document对象由一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。 • document对象最初是用来处理页面文档的,但很多属性已经不推荐继续使用了,如改变页面的背景颜色(document.bgColor)、前景颜色(document.fgColor)和链接颜色(document.linkColor)等,因为这些可以使用DOM动态操纵CSS属性实现。如果一定要使用这些属性,应该把它们放在body部分,否则对Firefox浏览器无效

  24. document对象的属性

  25. 获得页面的标题和最后修改时间 <title>获取页面标题</title> <script language="JavaScript"> document.write(document.title+"<br />"); document.write(document.lastModified); </script>

  26. 将页面中所有超链接的打开方式都设置为新窗口打开 <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 >

  27. 改变超链接中原来的链接地址 • 改变超链接中原来的链接地址 < 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 >

  28. 用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中访问指定节点的方法访问

  29. document对象的方法(write和writeln方法) • 这两个方法都接受一个字符串参数,在当前HTML文档中输出字符串,唯一的区别是writeln在字串末尾加一个换行符(\n)。 • 但是writeln只是在HTML代码文档中添加一个换行符,由于浏览器会忽略代码中的换行符,所以以下两种方式都不会使内容在浏览器中产生换行。 • document.write("这是第一行"+"\n"); • document.writeln("这是第一行"); //等效于上一行的代码 • 要在浏览器中换行,只能再输出一个换行标记<br />,即: • document.write ("这是第一行"+"<br />");

  30. 用document.write动态引入外部js文件 • 如果要动态引入一个js文件,即根据条件判断,通过document.write输出<script>元素,则必须这样写才对: • if (prompt("是否链接外部脚本(1表示是)","")==1) • document.write("<script type='text/javascript' src='1.js'>" + "</scr"+"ipt>"); • 注意要将</script>分成两部分,因为浏览器一遇到</script>,它会假定其中代码是完整的(即使它出现字符串中。

  31. screen对象 • sreen对象主要用来获取用户电脑的屏幕信息,包括屏幕的分辨率,屏幕的颜色位数,窗口可显示的最大尺寸。有时可以利用sreen对象根据用户的屏幕分辨率打开适合该分辨率显示的网页。 • 使浏览器窗口自动满屏显示 <body> <script language="JavaScript" type="text/javascript"> window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); </script> 该窗口总是满屏幕显示</body>

  32. 文档对象模型DOM

  33. html head body meta title h2 p ul a li li li DOM模型 • 我们已经知道一段HTML代码对应一颗DOM树。 • 从图中可以看出,每个HTML元素就是DOM树中的一个节点。整个DOM模型都是由元素节点(element node)构成的。

  34. 使用DOM模型 • DOM在HTML页面中的应用可分为以下几类: • (1)访问指定节点; • (2)访问相关节点; • (3)访问节点属性; • (4)检查节点类型; • (5)创建节点; • (6)操作节点。

  35. 访问指定节点 • 访问指定节点”的含义是已知节点的某个属性(如id属性、name属性或者节点类型),在DOM树中寻找符合条件的节点。相关的方法包括getElementById(), • getElementsByName() • 和getElementsByTagName()。

  36. 访问元素属性 • 设置元素属性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>

  37. 元素节点 a href="iframe.html" target="myTarget" 在指定窗口打开 属性节点 属性节点 文本节点 节点的分类 • (1)元素节点的nodeType值为1; • (2)属性节点的nodeType值为2; • (3)文本节点的nodeType值为3。

  38. 制作Tab选项卡面板 • Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。

  39. 首先,一个tab面板可以分解成两部分,即上方的导航条和下面的内容框,实际上,导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候,才显示与其对应的一个内容框,而把其他内容框都通过(dislay:none)隐藏了,且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。

  40. 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>

  41. Tab面板的结构 • 从结构代码中可以看出,这个Tab面板是用具有2个列表项的无序列表做的导航条,使用2个div容器做的内容框。实际上这些div容器都没有上边框,而只有左、右和下边框,为了证实这一点,我们只需给这些div容器加个上边界(margin-top:12px;)就可以发现它们确实没有上边框,

  42. 其实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容器不能有上边框的原因。

  43. 所以只能使用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元素添加下边框*/ }

  44. 每个选项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; }

  45. 这样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面板的宽度了。

  46. #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; /* 下边框 */ }

  47. 当鼠标滑过时 #info2 { display: none; /*使#info2暂时隐藏起来 */ } #tab a:hover,#tab a.cur { border-bottom: 1px solid #ffeeee; /*鼠标滑过或是当前选项时改变下划线颜色 */ color: #F74533; /*改变tab项的文字颜色 */ background-color: #FFeeee; /*改变tab项的背景颜色 */ }

  48. 添加行为 <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>

  49. DW CS3对JavaScript的支持 • 行为面板 • Spry组件

  50. Jquery简介

More Related