第七章 javascript 概述
DESCRIPTION
第七章 JavaScript 概述. 本章内容. JavaScript 简介. 一. 插入 JavaScript 的方法. 二. JavaScript 程序基础. 三. BOM 和 DOM. 四. 行为层. 内容如何对事件做出响应. 表现层. 内容如何显示. 结构层. 内容的语义. 内容层. 内 容. 回顾 Web 标准. 网页是由四层信息构成的一个共同体：. 回顾： Web 标准的描述语言. 描述网页结构的标准语言 XML 可扩展标记语言 - PowerPoint PPT PresentationTRANSCRIPT
第七章 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 languageJavaScript was designed to add interactivity to
HTML pagesA JavaScript is usually embedded directly into
HTML pagesJavaScript 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></body>
The code above will produce this output on an HTML page:
Hello World!
Example ExplainedTo insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language).So, the <script type="text/javascript"> and </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> <p onClick="msg()">Click Here</p> </body> </html>
7-3.js 的代码
function msg () // 建立函数
{alert ("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 4 - Subtraction x=5 y=2 x-y 3 * Multiplication x=5 y=4 x*y 20 / Division 15/5 5/2 3 2.5 % Modulus 5%2 10%8 10%2 1 2 0 ++ Increment x=5 x++ x=6 -- Decrement x=5 x-- x=4
赋值运算符Operator Example Is The Same As
= x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= 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 Outputs \' single quote \" double quote \& ampersand \\ backslash \n new line \r carriage return \t tab \b backspace \f 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.45var num2=76var num3=-9e5 //科学计数法，即 -900000alert(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="border-collapse: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 document screen history
frames
location embedslinksforms appletsanchors images
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.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);
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>
<head> <meta…/> <title>…</title> </head>
<body>
<h2> <a href=“…”>….</a> </h2>
<p>…</p>
<ul>
<li>…</li><li>…</li><li>…</li>
</ul>
</body>
</html>
html
head body
meta title h2 p ul
a li
li
li
每个 HTML 元素都是 DOM树中的一个结点，整个 DOM 模型就是由各种类型的结点构成的。
使用 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 NamedNode
Map包含一个元素的 Attr 对象
appendChild(node)
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="jquery-
1.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)+","+(240-
i*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 ，保持窗口的左上角位置不变。