JavaScript概述
advertisement
第七章 JavaScript概述
本章内容
一
JavaScript简介
二
插入JavaScript的方法
三
JavaScript程序基础
四
BOM和DOM
回顾 Web 标准
网页是由四层信息构成的一个共同体：
行为层
内容如何对事件做出响应
表现层
内容如何显示
结构层
内容的语义
内容层
内
容
回顾： Web 标准的描述语言
描述网页结构的标准语言
XML
可扩展标记语言
XHTML
可扩展超文本标记语言
描述网页表现的标准语言
CSS
层叠样式表
描述网页行为的标准语言
DOM
文档对象模型
ECMAScript
ECMA制定的标准脚本语言
描述web标准的语言
在Web标准中，结构标准语言是XML和
XHTML，表现标准语言是指CSS，行为标
准语言一般指JavaScript。但是实际上
HTML语言也有很弱的描述表现的能力，
而CSS也有一定的响应行为的能力（如
hover伪类）
XHTML
结构
CSS
表现
JavaScript
行为
What is JavaScript?
JavaScript is a scripting language
JavaScript was designed to add interactivity to
HTML pages
A JavaScript is usually embedded directly into
HTML pages
JavaScript is an interpreted language (means
that scripts execute without preliminary
compilation)
Everyone can use JavaScript without purchasing
a license
Are Java and JavaScript the Same?
JavaScript的组成
ECMAScript是一种标准化的脚本程序语言规范，它
定义了脚本语言的基本语法，但并不与任何浏览器绑
定，因此，Flash中的ActionScript及Javascript都是
ECMAScript的具体实现
JavaScript
ECMAScript
BOM
DOM
What can a JavaScript Do?
JavaScript is used in millions of Web pages
to improve the design, put dynamic text into
an HTML page, read and write HTML
elements, react to events, validate forms,
detect browsers, create cookies, and much
more.
JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Mozilla, Firefox, Safari, and Opera.
How to put a JavaScript Into an HTML page?
<body>
<script type="text/javascript">
document.write ("Hello World!")
</script>
Example
Explained
</body>
To
insert
a JavaScript
into anthis
HTML
page,
we
The
code
above will produce
output
on an
useHTML
the <script>
page: tag (also use the type attribute
to define the scripting language).
Hello
World! type="text/javascript"> and
So,
the <script
</script> tells where the JavaScript starts and
ends:
The word document.write is a standard
JavaScript command for writing output to a
page.
By entering the document.write command
between the <script type="text/javascript">
and </script> tags, the browser will
recognize it as a JavaScript command and
execute the code line. In this case the
browser will write Hello World! to the page:
JavaScript Where To ...
JavaScripts in the body section will be
executed WHILE the page loads.
JavaScripts in the head section will be
executed when CALLED or when an event
is triggered, go in the head section.
When you place a script in the body section,
you will ensure that the script is loaded
before anyone uses it.
网页中插入JavaScript脚本的方法
JavaScript的最大特点便是和HTML结合，
JavaScript需要被嵌入到HTML中才能对网页产生
作用。就像网页中嵌入CSS一样，必须通过适当的
方法将JavaScript引入到HTML中才能使
JavaScript脚本正常的工作。在HTML语言中插入
JavaScript脚本的方法有三种，即：
使用script标记对将脚本嵌入到网页中（嵌入式）
直接将脚本嵌入到HTML标记的事件中（行内式）
通过script标记的src属性链接外部脚本文件（链接
式）
1. 使用<script>标记对将脚本嵌入到网页中（嵌入式）
<html>
<head><title>第一个JavaScript程序</title>
<script language="javascript" type="text/javascript">
function msg ()
//JavaScript注释：建立函数
{
alert ("Hello, the WEB world!")
}
</script>
</head>
<body>
<p onClick="msg()">Click Here</p> </body>
</html>
2. 直接将脚本嵌入到HTML标记的事件中（行内式）
可以直接在HTML某些标记内添加事件，然后将
JavaScript脚本写在该事件的值内，以响应输入元素
的事件
<html>
<head>
<title>行内式引入JavaScript脚本</title>
</head>
<body>
<p onClick="JavaScript:alert('Hello,the WEB
world!');">Click Here</p>
</body>
</html>
3. 通过script标记的src属性链接外部脚本文件（链接式）
如果需要同一段脚本供多个网页文件使用，可以把这
一段脚本保存成一个单独的文件，JavaScript的外部
脚本文件扩展名为“js”
<html>
<head>
<title>链接式插入Js脚本文件</title>
<script language="javascript" type="text/javascript"
src="7-3.js "></script>
</head>
<body>
7-3.js的代码
<p onClick="msg()">Click Here</p>
function msg ()
//建立函数
</body>
{alert
</html>
("Hello,the WEB world!")}
JavaScript语言基础
JavaScript变量
JavaScript的变量是一种弱类型变量，所谓弱类
型变量是指它的变量无特定类型，定义任何变量
都是用“var”关键字，并可以将其初始化为任何
值，而且可以随意改变变量中所存储的数据类型，
当然为了程序规范应该避免这样操作
var name ="Six Hang";
var age＝28;
var school="CSU";
var male=true;
变量命名规范：第一个单词所有字母都小写，以后每
个单词第一个字母大写，例如：sMyString
变量的命名原则
首字符必须是字母、下划线（_）或美元符号（$）；
余下的字母可以是下划线。美元符号、任意字母或者
数字；
变量名不能是关键字或保留字
变量名对大小写敏感
变量名中不能有空格、回车符或其他标点字符
例如下面的变量名是非法的：
var 5zhao;
//数字开头，非法
var tang's; //对于变量名，单引号是非法字符
var this;
//不能使用关键字作为变量名
运算符
运算符是指完成操作的一系列符号，也称为操作符。
运算符用于将一个或多个值运算成结果值，使用运算
符的值称为算子或操作数
算术运算符
Operator Description
Example
Result
+
*
/
%
++
--
Addition
x=2 y=2 x+y
Subtraction x=5 y=2 x-y
Multiplication x=5 y=4 x*y
Division
15/5 5/2
Modulus
5%2 10%8 10%2
Increment
x=5
x++
Decrement
x=5
x--
4
3
20
3 2.5
120
x=6
x=4
赋值运算符
Operator Example
=
+=
-=
*=
/=
%=
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
Is The Same As
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
比较运算符
Operator Description
Example
==
is equal to
5==8 returns false
=== is equal to (checks for both value and type) x=5
y="5" x==y returns true
x===y returns false
!=
is not equal
5!=8 returns true
>
is greater than
5>8 returns false
<
is less than
5<8 returns true
>= is greater than or equal to
5>=8 returns false
<=
is less than or equal to
5<=8 returns true
逻辑运算符
Operator Description Example
&&
and
x=6 y=3 (x < 10 && y > 1)
returns true
||
or
x=6 y=3 (x==5 || y==5) returns false
!
not
x=6 y=3 !(x==y) returns true
字符串连接运算符
A string is most often text, for example "Hello
World!". To stick two or more string variables
together, use the + operator.
txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
The variable txt3 now contains "What a verynice
day!"
条件运算符
variablename=(condition)?value1:value2
greeting=(visitor=="PRES")?"Dear President
":"Dear "
If the variable visitor is equal to PRES, then put
the string "Dear President " in the variable named
greeting. If the variable visitor is not equal to
PRES, then put the string "Dear " into the
variable named greeting.
字符串（String）
字符串由零个或多个字符构成，字符可以是字母、数
字、标点符号或空格。字符串必须放在单引号或双引
号中。例如：
var course="data structure“
var case='the birthday"19801106"'
还可以使用转义字符（escaping）“\”实现特殊字符
按原样输出：
var score = " run time 3\' 15\""
JavaScript中的转义字符
Code
\'
\"
\&
\\
\n
\r
\t
\b
\f
Outputs
single quote
double quote
ampersand
backslash
new line
carriage return
tab
backspace
form feed
字符串（String）对象常见属性
下面我们先定义一个示例字符串：
var myString = "This is a sample";
（1）length属性：它返回字符串中字符的个数，例如：
var name="Six tang";
alert (name.length);
//返回8
（2）charAt属性：它返回字符串对象在指定位置处的字符，
第一个字符位置是0。例如：
myString.charAt(2)；//返回i
（3）charCodeAt：返回字符串对象在指定位置处字符的10
进制的ASCII码
myString.charCodeAt(2)；//返回105
（4）indexOf：要查找的子串在字符串对象中的位置
myString.indexOf(“is”)；//返回2
字符串（String）对象常见方法
（5）substr方法：截取字串
myString.substr(10,3)；//返回sam，其中10表示位置，
3表示长度
（6）substring方法：截取字串
myString.substring(5,9)；//返回is a,其中5表示开始位置，
9表示结束位置
（7）split方法：分隔字串到一个数组中
var a = myString.split(" ");
//a[0] = “This” a[1]=“is” a[2]=“a” a[3]=“sample”
（8）replace方法
myString.replace(“sample”,”apple”);
//结果”This is a apple”
（9）toLowerCase方法：变成小写字母
myString.toLowerCase()；// this is a sample
数值型（number）
在Javascript中，数值型数据不区分整型和浮点型，
数值型数据和字符型数据的区别是数值型数据不要用
引号括起来。例如下面都是正确的数值表示法，
var num1=23.45
var num2=76
var num3=-9e5 //科学计数法，即-900000
alert(num1+ " "+ num2+" "+ num3);
布尔型（boolean）
布尔型数据的取值只有两个：true和false。布尔型数
据不能用引号引起来，否则就变成字符串了。用方法
typeof()可以很清楚地看到这点，typeof()返回一个字
符串，这个字符串的内容是变量的数据类型名称。
var married = true;
document.write(typeof(married) +"<br />");// 输出
boolean
married = "true";
document.write(typeof(married));
// 输出string
数组（array）
数组使用关键字Array来声明，同时还可以指定这个
数组元素的个数，也就是数组的长度（length），例
如：
var rank =new Array(12); //论坛的用户共分12级
var Map =["China", "USA", "Britain"];
var myColor= new Array();
myColor[0]= "blue";
myColor[1]= "yellow";
myColor[2]= "purple";
myColor[3]= "red";
数组的常用属性和方法：
（1）length属性：用来获取数组的长度，而数组
的位置同样也是从0开始的。例如：
var Map =new Array("China", "USA",
"Britain");
alert(Map.length+" "+ Map[2]); //返回3 Britain
（2）toString方法：将数组转化为字符串
var Map =new Array("China", "USA", "Britain");
alert(Map.toString()+" "+ typeof(Map.toString()));
JavaScript中的语句
1. 条件语句
条件语句可以使用程序按照预先指定的条件进行判断，
从而选择需要执行的任务。在JavaScript中提供了if语
句、if else语句和switch语句等三种条件判断语句。
通过条件语句判断时间
var d=new Date();
var time=d.getHours();
if (time<10){
document.write("<b>Good morning</b>")
}
else if (time>10 && time<16){
document.write("<b>Good day</b>")
}
else{
document.write("<b>Hello World!</b>")
}
Switch语句
<script language="javascript">
evalue = parseInt(prompt("请输入1－4对我们的服务做出评
价",""));
switch(evalue){
case 1:
document.write("非常满意");
break;//如果不使用break，则在执行完此case的语句
后会接着执行下面所有的case中的语句
case 2:
document.write("满意");
break;
case 3:
document.write("一般");
break;
case 4:
document.write("不满意");
break;
default:
document.write("您的输入有误！");
}
</script>
循环语句
var i=0;
while (i<100)
{document.write (i+"<br>");
i++;}
九九乘法表
<table cellpadding="6" cellspacing="0" style="bordercollapse:collapse; border:none;">
<script language="javascript">
for(var i=1;i<10;i++){
//乘法表一共九行
document.write("<tr>");
//每行是table的一行
for(j=1;j<10;j++)
//每行都有9个单元格
if(j<=i)
//有内容的单元格
document.write("<td style='border:2px solid #004B8A;
background: white;'>"+i+"*"+j+"="+(i*j)+"</td>");
else
//没有内容的单元格
document.write("<td style='border:none;'></td>");
document.write("</tr>");
}</script>
</table>
for…in语句
在有些情况下，开发者根本没有办法预知对象的任何信息，
更谈不上控制循环的次数。这个时候用for…in语句可以很
好的解决这个问题。
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}</script>
函数
函数是一个可重用的代码块，可用来完成某个特定功
能。每当需要反复执行一段代码时，可以利用函数来
避免重复输入大量的相同内容。不过，函数的真正威
力体现在，我们可以把不同的数据传递给它们，而它
们将使用实际传递给它们的数据去完成预定的操作。
在把数据传递给函数时，我们把那些数据称为参数
（argument）。
function functionname(arg1,arg2,...,argX)
{
statements
[return[expression]]
}
调用函数
function myName(sName){
alert("Hello"+sName);
}
该函数接受一个输入参数sName，不返回值。调用它
的代码如下：
myName("six-tang");
与其他编程语言一样，函数在执行过程中只要执行完
return语句就会停止继续执行函数体中的代码，因此
return语句后的代码都不会执行。下例中函数中的
alert()语句就永远都不会执行。
function fnSum(iNum1, iNum2){
return iNum1+iNum2;
alert (iNum1+iNum2); //永远不会被执行
}
一个函数中有时可以包含多个return语句，但每次只
有一个会被执行，例如：
function substr(iNum1, iNum2){
if (iNum1>=iNmu2)
return iNum1-iNum2;
else
return iNum2-iNum1;
}
如果函数本身没有返回值，但又希望在某些时候退出
函数体，则可以调用无参数的return语句来随时返回
函数体，例如：
function myName(sName){
if (myName =="bye")
return;
alert("Hello"+sName);
}
对象
在客观世界中，对象指一个特定的实体。一个人就是
一个典型的对象，他包含身高、体重、年龄等特性，
又包含吃饭、走路、睡觉等动作。同样，一辆汽车也
是一个对象，它包含型号，颜色，种类等特性，还包
含加速、拐弯等动作。
在JavaScript语言中，也具有并能自定义各种各样的
对象。例如，一个浏览器窗口可看成是一个对象，它
包含窗口大小、窗口位置等属性，又具有打开新窗口、
关闭窗口等方法。网页上的一个表单也可以看成一个
对象，它包含表单内控件的个数、表单名称等特性，
以及表单提交和表单重设等方法。
对象的特点
从上面的例子可以看出，对象包含两个要素：
①用来描述对象特性的一组数据，也就是若干变量，
通常称为属性；
②用来操作对象特性的若干动作，也就是若干函数，
通常称为方法。
对象的创建
使用new运算符和内部构造函数object()来创建一个空
对象
var Car= new object();
在JavaScript中给对象创建新的实例采用new关键字，
如下所示：
var myCar = new Car();
这样就创建了一个Car对象的新实例myCar，通过这
个实例就可以利用Car的属性、方法来设置关于
myCar的属性或方法了，代码如下：
myCar.brand=Fiat;
myCar. accelerate(3);
this关键字
在JavaScript的对象系统中，this关键字常用于两
种地方：
（1）在构造器函数中，指代新创建的对象实例；
（2）在对象的方法被调用时，指代调用该方法的对
象实例。
for (… in …)语句可以遍历对象的所有属性和方法，例
3-5所示的代码就遍历了Car对象的属性和方法，如果
是属性则输出属性值，如果是方法则执行方法。
时间日期：Date对象
<script language="javascript">
var myDate1 = new Date(); //运行代码前的时间
for(var i=0;i<3000000;i++);
var myDate2 = new Date();//运行代码后的时间
alert(myDate2-myDate1);
</script>
数学计算：Math对象
Math对象也是JavaScript的一个内置对象，不需要由
函数创建， random方法：该方法可以用来生成随机
数，它返回一个0~1之间的随机数，不包括0和1。
var iNum=Math.floor(Math.random()*100+1);
这样iNum将随机产出一个1～100之间的整数（包括1
和100）。
浏览器对象模型BOM
BOM
JavaScript是运行在浏览器中的，因此提供了一系列
对象用于与浏览器窗口进行交互。这些对象主要有：
window、document、location、navigator和screen等，
把它们统称为BOM（Browser Object Model，浏览器
对象模型）
window
navigator
location
forms
location
anchors
document
images
frames
screen
links
history
embeds
applets
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：窗口的上边缘位置；
系统对话框
（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()
实现，代码如下：
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.sele
ctedIndex].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);
screen对象
screen对象主要用来获取用户电脑的屏幕信息，包括
屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大
尺寸。
1.根据屏幕分辨率打开适合的网页
2. 使浏览器窗口自动满屏显示
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
文档对象模型DOM
DOM（Document Object Model）
文档对象模型DOM（Document Object Model）:
将HTML网页看成一棵由结点构成的树状结构;
DOM接口中定义了若干方法,用于对HTML文档进行
访问（增删改查）;
大部分编程语言（如Java、PHP、Python）都提供
DOM接口,实现对HTML文档的访问；
在HTML网页中可以通过嵌入JavaScript代码,利用
DOM接口,完成对HTML文档的访问（增删改查） 。
网页中的DOM模型
html
<html>
<head> <meta…/> <title>…</title> </head>
<body>
head
body
<h2> <a href=“…”>….</a> </h2>
<p>…</p>
meta
title
h2
p
<ul>
<li>…</li><li>…</li><li>…</li>
</ul>
a
</body>
</html>
ul
li
li
每个HTML元素都是DOM树中的一个结点，
整个DOM模型就是由各种类型的结点构成的。
li
使用DOM模型
对于每一个DOM结点node，都有一系列的属性、方法可
以使用。
属性/方法
返回类型/类型
说
明
nodeName
String
结点名称
nodeValue
String
结点的值
nodeType
Number
结点类型，用数值表示
firstChild
Node
childNodes中的第一个结点
lastChild
Node
childNodes中的最后一个结点
属性/方法
返回类型
说
明
childNodes
NodeList
子结点列表，item(0)代表第1个
parentNode
Node
指向父结点
previousSibling
Node
指向前一个兄弟结点
nextSibling
Node
指向后一个兄弟结点
hasChildNodes
Boolean
判断一个结点有无子结点
attributes
NamedNod
eMap
包含一个元素的Attr对象
appendChild(nod
e)
Node
将node结点作为最后一个孩子
replaceChild()
Node
替换孩子结点
insertBefore()
Node
在指定位置插入孩子结点
总的来说，利用DOM接口可以对HTML进行以下操作：
访问指定节点；
访问相关节点；
访问节点属性；
检查节点类型；
创建节点；
操作节点。
1. 访问指定节点
已知结点的id属性或name属性，在DOM树中寻找
符合条件的结点。相关方法包括：
getElementById():根据元素的id属性进行访问；
getElementsByName()：根据元素的name属性访问；
getElementsByTagName() ：根据标记名访问元素
getElementById()的用法示例
<html><head> <script type="text/javascript">
function searchDOM() {
var oLi=document.getElementById("css");
alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue); }
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li id="css">CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li> <li>JSP</li>
<li>PHP</li>
</ul>
</body>
</html>
getElementsByTagName()方法示例
<html><head> <script type="text/javascript">
function searchDOM() {
var oLi=document.getElementsByTagName("li");
alert(oLi.length+" "+oLi[0].tagName+"
"+oLi[3].childNodes[0].nodeValue);
var oUl=document.getElementsByTagName("ul");
var oLi2=oUl[1].getElementsByTagName("li");
alert(oLi2.length+" " +oLi2[0].tagName+ " "
+oLi2[1].childNodes[0].nodeValue); }
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言 <li>HTML</li> <li>JavaScript</li> <li>CSS</li>
</ul>
<ul>服务器端语言 <li>ASP.NET</li> <li>JSP</li> <li>PHP</li>
</ul>
</body>
</html>
2. 访问元素属性
在找到需要的结点之后通常需要对其属性进行读取
或修改，DOM定义了三个便捷的方法来查询和设置
结点的属性。
getAttribute(name):读取指定名称的属性
setAttribute(name, value) :修改指定名称的属性值
removeAttribute(name):删除指定名称的属性
用getAttribute()方法获取元素属性
<html><head> <script type="text/JavaScript">
function init() {
var img=document.getElementById("img1");
alert(img.getAttribute("src"));
alert(img.src);
}
</script>
</head>
<body onload="init()">
<img id="img1" src="01.jpg" alt="一幅图片" />
</body>
</html>
用setAttribute()方法设置元素属性
<html><head> <script type="text/JavaScript">
function changePic() {
var myImg=document.getElementsByTagName("img")[0];
myImg.setAttribute("src", "02.jpg");
myImg.setAttribute("title", "兴盛公寓");
myImg.setAttribute("width", "300");
}
</script>
</head>
<body>
<img src="01.jpg" onclick="changePic()" />
</body>
</html>
访问相关结点
“访问相关结点”的含义是根据已知的结点，寻找和它存在联系
的结点，如父结点、子结点、兄弟结点等。
（1）访问html结点和head结点、body结点
html结点：
var htmlnode=document.documentElement;
head结点:
var headnode=htmlnode.firstChild;
或
var headnode=htmlnode.childNodes[0];
body结点：
var bodynode=htmlnode.lastChild;
或
var bodynode=htmlnode.childNodes[1];
或
var bodynode=document.body;
用childNodes()方法访问孩子结点示例
<html><head> <script type="text/JavaScript">
function init() {
var body=document.body;
var DOMString=" ";
if(body.hasChildNodes())
{
var childs=body.childNodes;
for(var i=0;i<childs.length;i++)
DOMString+=childs[i].nodeName+"\n"; }
alert(DOMString); }
</script>
</head>
<body onload="init()">
<h1>HTML Sample Page</h1>
<p>Hello,this is a sample page.</p>
</body>
</html>
检查节点类型
在DOM中可以使用结点对象的nodeType属性返回结
点的类型，该属性返回一个代表结点类型的整数值。
DOM中的节点主要有三种类型，分别是元素节点、
属性节点和文本节点
（1）元素节点的nodeType值为1；
（2）属性节点的nodeType值为2；
（3）文本节点的nodeType值为3。
创建结点
创建元素节点采用document对象的createElement()方
法；
创建文本节点采用document对象的createTextNode()
方法；
创建文档片断采用document对象的
createDocumentFragment()方法；
创建元素结点和文本结点示例
<html><head> <script type="text/JavaScript">
function init() {
var p=document.createElement("p");
var text=document.createTextNode("新闻2:叙利亚局势…");
p.appendChild(text);
document.body.appendChild(p);
}
</script>
</head>
<body>
<p onclick="init()">新闻1:伊朗局势…</p>
</body>
</html>
利用createDocumentFragment()方法创建文档片断
<html><head> <script type="text/JavaScript">
function addButton()
{
var container=document.getElementById("div1");
var frag=document.createDocumentFragment();
for(var i=0;i<10;i++)
{
var btn=document.createElement("input");
btn.type="button";
btn.value="button"+(i+1);
frag.appendChild(btn); }
container.appendChild(frag);
}
</script>
</head>
<body>
<div id="div1" onclick="addButton()">
一开始没有按钮，点击后加入10个按钮
</div>
</body>
</html>
操作结点
appendChild():在当前结点的最后插入子结点；
insertBefore():在指定位置插入子结点；
replaceChild():将某个子结点替换为另一结点；
removeChild():删除某个子结点。
用replaceChild()方法替换结点示例
<html><head>
<script type="text/JavaScript">
function replaceP()
{
var oldNode=document.getElementsByTagName("p")[0];
var newNode=document.createElement("h1");
var newText=document.createTextNode("这行文字是新文
字，且是一级标题!");
newNode.appendChild(newText);
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</head>
<body> <p onclick="replaceP()">这行文字是老文字</p>
</body>
</html>
DOM编程实例
制作Tab选项卡面板
Tab面板由于能节省很多网页空间、给用户较好
的体验,受到大家的普遍喜爱,所以是目前网页中流
行的高级元素。
首先，一个tab面板可以分解成两部分，即上方的导
航条和下面的内容框，实际上，导航条中有几个tab
项就应该会有几个内容框。只是因为当鼠标滑动到某
个tab项的时候，才显示与其对应的一个内容框，而
把其他内容框都通过（dislay:none）隐藏了，且不占
据网页空间。如果不把其他内容框隐藏的话那么图1
中的tab面板就是图2这个样子。
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容器加个上边
框，再让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元素作为浮动盒子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组件
jQuery 入门
JQuery简介
随着JavaScript、CSS、Ajax等技术的不断进步，越
来越多的开发者将一个又一个丰富多彩的程序功能进
行封装，供其他人可以调用这些封装好的程序组件
（框架）。这使得Web程序开发变得简洁，并能显著
提高开发效率。
jQuery的官方网站（http://jquery.com）提供了最新
的jQuery框架下载，如图7-42所示。通常只需要下载
最小的jQuery包（Minified）即可。目前最新的版本
jquery-1.3.2.min.js文件只有55.9 KB
jQuery的使用
jQuery是一个轻量级（Lightweight）的JavaScript框
架，所谓轻量级是说它根本不需要安装，因为jQuery
实际上就是一个外部js文件，使用时直接将该js文件
用<script>标记链接到自己的页面中即可，代码如下：
<script src=" jquery.min.js"
type="text/JavaScript"></script>
将jQuery框架文件导入后，就可以使用jQuery的选择
器和各种函数功能了。
jQuery中的“$”及其作用
1. “$”用作选择器
<script type="text/JavaScript" src="jquery1.2.6.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){ //页面载入后执行
$("h2>a").css("color","red");
$("h2>a").css("textDecoration","none");
});
</script>
则使得本来不支持子选择器的IE 6也能支持子选择器
了
jQuery中的“$”及其作用
2. “$”用作功能函数前缀
(1) 遍历数组
$.each( [0,1,2], function(i){document.write( "Item #" +
i +"<br />"); });
(2) 遍历选择器中的元素
$(function(){
$("img").each(function(index){
this.title = "这是第" + (index+1)+ "幅图，
路径是：" + this.src;
});
});
jQuery中的“$”及其作用
3. 用作$(document). ready()
$(document).ready(function(){
("#loading").css("display","none");
})
jQuery的写法则会使页面仅加载完DOM结构后就执
行，即加载完html文档后，还没加载图像等其他文件
就执行ready()函数，给图像添加“display:none”的样
式，因此id为“loading”的图片不可能被显示。
所以$(document). ready()比window.onload载入执行
更快
jQuery中的“$”及其作用
4. 创建DOM元素
在jQuery中使用“$”可以直接创建DOM元素，例如：
var newP =$("<p>武广高速铁路即将通车！</p>");
创建了DOM元素后，还要用下面的方法将这个元素
插入到在页面的某个具体位置上
newP.insertAfter(“#chapter”); //将创建的newP元素插入
到ID为#chapter的元素之后
或者
newP.appendTo("body");
创建DOM元素的方法总结
将新元素插入到匹配元素的里面
append() appendTo () prepend () prependTo ()
append()表示在原有元素中插入新元素
$ ("body") append(newP);
appendTo ()表示将新元素插入到原有元素里
newP.appendTo("body");
将新元素插入到匹配元素的盘边
after () insertafter () before () insertbefore ()
将新元素包含住匹配的元素
wrap ()
jQuery的选择器
要使某个动作应用于特定的html元素，需要有办法找
到这个元素。在jQuery中，执行这一任务的方法称为
jQuery选择器。
jQuery选择器把网页的结构和行为完全分离。利用
jQuery选择器，能快速地找出特定的html元素，然后
轻松的给元素添加一系列行为动作。
jQuery的选择器主要有三大类，即CSS 3的基本选择
器，CSS3的位置选择器和过滤选择器。
jQuery中的常用方法
1. find()方法
find()方法可以通过查询获取新的元素集合，通过匹
配选择器来筛选元素，例如：
$("div").find("p");
2. hover方法
一个模仿悬停事件（鼠标移动到一个对象上面及移出
这个对象）的方法。
3. toggleclass方法
toggleclass方法用于切换元素的样式。
jQuery的应用举例
1. 制作折叠式菜单（Accordion）
折叠式菜单是和Tab面板一样流行的高级网页元素，
它是一种二级菜单，当点击某个主菜单项时，就会以
滑动的方式展开它下面的二级菜单，同时自动收缩隐
藏其他主菜单项的二级菜单，如图7-48所示。因此折
叠式菜单有一个很好听的英文名叫“Accordion”（手
风琴），它的折叠方式是不是有点像在拉手风琴呢？
1. 制作折叠式菜单（Accordion）
<script language="JavaScript" src="jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
//页面载入时隐蔽除第一个元素外所有元素
$("#accordion > li > a + *:not(:first)").hide();
//对所有元素的标题绑定点击动作
$("#accordion > li > a").click(function(){
$(this).parent().parent().each(function(){
$("> li > a + *",this).slideUp(); //隐蔽所有元素
});
$("+ *",this).slideDown(); //展开当前点击的元素
});
});
</script>
2. 制作渐变背景色的下拉菜单
$(document).ready(function(){
$("#nav>li").hover(function(){
$(this).children("ul").fadeIn(600);
$(this).find("img").attr("src","minus.gif");
},function(){
$(this).children("ul").fadeOut(600);
$(this).find("img").attr("src","plus.gif");
});
$("#nav>li li").each(function(i){//下拉菜单项逐渐变色的代码部分
$(this).css("background-color","rgb("+(320-i*16)+","+(240i*16)+","+(240-i*16)+")");
}); });
3. 制作图片轮显效果
<div class="imgsBox">
<div class="imgs">
<a href="#"><img id="pic" src="images/01.jpg"
width="282" height="164" /></a>
</div>
<div class="clickButton">
<div>
<a class="active" href="">1</a>
<a class="" href="">2</a><a class=""
href="">3</a><a class="" href="">4</a>
<a class="" href="">5</a>
</div>
</div>
</div>
7.8.7 jQuery的插件应用举例
1. 使用jQuery插件Lightbox制作Lightbox效果
2. 使用jQuery插件jqzoom实现图片放大镜效果
在一些电子商务的商品展示网页上，为了更好的展示
商品，一般都会添加放大镜的效果。当把鼠标放到小
图片上，右边会自动的出现小图局部的放大图，
复习题
1. 试说明以下代码输出结果的顺序，并解释其原因，
最后在浏览器中验证。
<script type="text/javascript">
setTimeout (function(){
alert("A");
},0);
alert("B");
</script>
2. 编写代码实现以下效果：打开一个新窗口，原始大
小为400*300px，然后将窗口逐渐增大到600*450px，
保持窗口的左上角位置不变。
