第七章 Java Script概述本章内容一 Java Script简介

第七章 Java. Script概述

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

回顾 Web 标准网页是由四层信息构成的一个共同体：行为层内容如何对事件做出响应表现层内容如何显示结构层内容的语义内容层内容

回顾： Web 标准的描述语言 v 描述网页结构的标准语言 § XML 　　可扩展标记语言 § XHTML 　　可扩展超文本标记语言 v 描述网页表现的标准语言 § CSS 层叠样式表 v 描述网页行为的标准语言 § DOM　　　　　　文档对象模型 § ECMAScript 　　ECMA制定的标准脚本语言

描述web标准的语言 v在Web标准中，结构标准语言是XML和 XHTML，表现标准语言是指CSS，行为标准语言一般指Java. Script。但是实际上 HTML语言也有很弱的描述表现的能力，而CSS也有一定的响应行为的能力（如 hover伪类） XHTML 结构 CSS 表现 Java. Script 行为

What is Java. Script? v. Java. Script is a scripting language v. Java. Script was designed to add interactivity to HTML pages v. A Java. Script is usually embedded directly into HTML pages v. Java. Script is an interpreted language (means that scripts execute without preliminary compilation) v. Everyone can use Java. Script without purchasing a license v Are Java and Java. Script the Same?

Java. Script的组成 v ECMAScript是一种标准化的脚本程序语言规范，它定义了脚本语言的基本语法，但并不与任何浏览器绑定，因此，Flash中的Action. Script及Javascript都是 ECMAScript的具体实现 Java. Script ECMAScript BOM DOM

What can a Java. Script Do? v. Java. Script 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. v. Java. Script 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 Java. Script Into an HTML page? v<body> v<script type="text/javascript"> vdocument. write ("Hello World!") v</script> Example Explained v</body> To The code Java. Script into anthis output on an v insert a above will produce HTML page, we use the <script> tag (also use the type attribute HTML page: to define the scripting language). v Hello<script type="text/javascript"> and World! So, the </script> tells where the Java. Script starts and ends:

v. The word document. write is a standard Java. Script command for writing output to a page. v. By entering the document. write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a Java. Script command execute the code line. In this case the browser will write Hello World! to the page:

Java. Script Where To. . . v. Java. Scripts in the body section will be executed WHILE the page loads. v. Java. Scripts in the head section will be executed when CALLED or when an event is triggered, go in the head section. v. When you place a script in the body section, you will ensure that the script is loaded before anyone uses it.

网页中插入Java. Script脚本的方法 v Java. Script的最大特点便是和HTML结合， Java. Script需要被嵌入到HTML中才能对网页产生作用。就像网页中嵌入CSS一样，必须通过适当的方法将Java. Script引入到HTML中才能使Java. Script 脚本正常的作。在HTML语言中插入Java. Script 脚本的方法有三种，即： v 使用script标记对将脚本嵌入到网页中（嵌入式） v 直接将脚本嵌入到HTML标记的事件中（行内式） v 通过script标记的src属性链接外部脚本文件（链接式）

1. 使用<script>标记对将脚本嵌入到网页中（嵌入式） <html> <head><title>第一个Java. Script程序</title> <script language="javascript" type="text/javascript"> function msg () //Java. Script注释：建立函数 { alert ("Hello, the WEB world!") } </script> </head> <body> <p on. Click="msg()">Click Here</p> </body> </html>

2. 直接将脚本嵌入到HTML标记的事件中（行内式） v 可以直接在HTML某些标记内添加事件，然后将 Java. Script脚本写在该事件的值内，以响应输入元素的事件 <html> <head> <title>行内式引入Java. Script脚本</title> </head> <body> <p on. Click="Java. Script: alert('Hello, the WEB world!'); ">Click Here</p> </body> </html>

3. 通过script标记的src属性链接外部脚本文件（链接式） v 如果需要同一段脚本供多个网页文件使用，可以把这一段脚本保存成一个单独的文件，Java. Script的外部脚本文件扩展名为“js” v <html> v <head> v <title>链接式插入Js脚本文件</title> v <script language="javascript" type="text/javascript" src="7 -3. js "></script> v </head> v <body> 7 -3. js的代码 v <p on. Click="msg()">Click Here</p> function msg () //建立函数 v </body> {alert ("Hello, the WEB world!")} v </html>

Java. Script语言基础

Java. Script变量 v Java. Script的变量是一种弱类型变量，所谓弱类型变量是指它的变量无特定类型，定义任何变量都是用“var”关键字，并可以将其初始化为任何值，而且可以随意改变变量中所存储的数据类型，当然为了程序规范应该避免这样操作 v var name ="Six Hang"; v var age＝ 28; v var school="CSU"; v var male=true; v 变量命名规范：第一个单词所有字母都小写，以后每个单词第一个字母大写，例如：s. My. String

变量的命名原则 v 首字符必须是字母、下划线（_）或美元符号（$）； v 余下的字母可以是下划线。美元符号、任意字母或者数字； v 变量名不能是关键字或保留字 v 变量名对大小写敏感 v 变量名中不能有空格、回车符或其他标点字符 v 例如下面的变量名是非法的： var 5 zhao; //数字开头，非法 var tang's; //对于变量名，单引号是非法字符 var this; //不能使用关键字作为变量名

运算符 v 运算符是指完成操作的一系列符号，也称为操作符。运算符用于将一个或多个值运算成结果值，使用运算符的值称为算子或操作数 v 算术运算符 v 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

v 赋值运算符 v 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

v 比较运算符 v Operator Description Example v == is equal to 5==8 returns false v === is equal to (checks for both value and type) x=5 y="5" x==y returns true x===y returns false v != is not equal 5!=8 returns true v> is greater than 5>8 returns false v< is less than 5<8 returns true v >= is greater than or equal to 5>=8 returns false v <= is less than or equal to 5<=8 returns true

v 逻辑运算符 v Operator Description Example v && and x=6 y=3 (x < 10 && y > 1) returns true v || or x=6 y=3 (x==5 || y==5) returns false v! not x=6 y=3 !(x==y) returns true

字符串连接运算符 v A string is most often text, for example "Hello World!". To stick two or more string variables together, use the + operator. v txt 1="What a very" v txt 2="nice day!" v txt 3=txt 1+txt 2 v The variable txt 3 now contains "What a verynice day!"

条件运算符 v variablename=(condition)? value 1: value 2 v greeting=(visitor=="PRES")? "Dear President ": "Dear " v 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） v 字符串由零个或多个字符构成，字符可以是字母、数字、标点符号或空格。字符串必须放在单引号或双引号中。例如： v var course="data structure“ v var case='the birthday"19801106"' v 还可以使用转义字符（escaping）“”实现特殊字符按原样输出： v var score = " run time 3' 15""

$Java. Script中的转义字符 v Code § ' § " § & § \ § n$

Java. Script中的转义字符 v Code § ' § " § & § \ § n § r § t § b § f Outputs single quote double quote ampersand backslash new line carriage return tab backspace form feed

字符串（String）对象常见属性下面我们先定义一个示例字符串： v var my. String = "This is a sample"; （1）length属性：它返回字符串中字符的个数，例如： var name="Six tang"; alert (name. length); //返回 8 （2）char. At属性：它返回字符串对象在指定位置处的字符，第一个字符位置是 0。例如： my. String. char. At(2)；//返回i （3）char. Code. At：返回字符串对象在指定位置处字符的10 进制的ASCII码 my. String. char. Code. At(2)；//返回 105 （4）index. Of：要查找的子串在字符串对象中的位置 my. String. index. Of(“is”)；//返回 2

字符串（String）对象常见方法（5）substr方法：截取字串 my. String. substr(10, 3)；//返回sam，其中 10表示位置，3 表示长度（6）substring方法：截取字串 my. String. substring(5, 9)；//返回is a, 其中 5表示开始位置， 9表示结束位置（7）split方法：分隔字串到一个数组中 var a = my. String. split(" "); //a[0] = “This” a[1]=“is” a[2]=“a” a[3]=“sample” （8）replace方法 my. String. replace(“sample”, ”apple”); //结果”This is a apple” （9）to. Lower. Case方法：变成小写字母 my. String. to. Lower. Case()；// this is a sample

数值型（number） v 在Javascript中，数值型数据不区分整型和浮点型，数值型数据和字符型数据的区别是数值型数据不要用引号括起来。例如下面都是正确的数值表示法， v var num 1=23. 45 v var num 2=76 v var num 3=-9 e 5 //科学计数法，即-900000 v alert(num 1+ " "+ num 2+" "+ num 3);

布尔型（boolean） v 布尔型数据的取值只有两个：true和false。布尔型数据不能用引号引起来，否则就变成字符串了。用方法 typeof()可以很清楚地看到这点，typeof()返回一个字符串，这个字符串的内容是变量的数据类型名称。 var married = true; document. write(typeof(married) +" "); // 输出 boolean married = "true"; document. write(typeof(married)); // 输出string

数组（array） v 数组使用关键字Array来声明，同时还可以指定这个数组元素的个数，也就是数组的长度（length），例如： v var rank =new Array(12); //论坛的用户共分12级 v var Map =["China", "USA", "Britain"]; v var my. Color= new Array(); v my. Color[0]= "blue"; v my. Color[1]= "yellow"; v my. Color[2]= "purple"; v my. Color[3]= "red";

v 数组的常用属性和方法： v （1）length属性：用来获取数组的长度，而数组的位置同样也是从0开始的。例如： v var Map =new Array("China", "USA", "Britain"); v alert(Map. length+" "+ Map[2]); //返回 3 Britain v （2）to. String方法：将数组转化为字符串 v var Map =new Array("China", "USA", "Britain"); v alert(Map. to. String()+" "+ typeof(Map. to. String()));

Java. Script中的语句 v 1. 条件语句 v 条件语句可以使用程序按照预先指定的条件进行判断，从而选择需要执行的任务。在Java. Script中提供了if语句、if else语句和switch语句等三种条件判断语句。

通过条件语句判断时间 var d=new Date(); var time=d. get. Hours(); 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 = parse. Int(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+" "); 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: 2 px solid #004 B 8 A; background: white; '>"+i+"*"+j+"="+(i*j)+"</td>"); else //没有内容的单元格 document. write("<td style='border: none; '></td>"); document. write("</tr>"); }</script> </table>

for…in语句 v 在有些情况下，开发者根本没有办法预知对象的任何信息，更谈不上控制循环的次数。这个时候用for…in语句可以很好的解决这个问题。 v <script type="text/javascript"> v var x v var mycars = new Array() v mycars[0] = "Saab" v mycars[1] = "Volvo" v mycars[2] = "BMW" v for (x in mycars) v{ v document. write(mycars[x] + " ") v }</script>

函数 v 函数是一个可重用的代码块，可用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复输入大量的相同内容。不过，函数的真正威力体现在，我们可以把不同的数据传递给它们，而它们将使用实际传递给它们的数据去完成预定的操作。在把数据传递给函数时，我们把那些数据称为参数（ argument）。 functionname(arg 1, arg 2, . . . , arg. X) { statements [return[expression]] }

调用函数 function my. Name(s. Name){ alert("Hello"+s. Name); } 该函数接受一个输入参数s. Name，不返回值。调用它的代码如下： my. Name("six-tang");

v 与其他编程语言一样，函数在执行过程中只要执行完 return语句就会停止继续执行函数体中的代码，因此 return语句后的代码都不会执行。下例中函数中的 alert()语句就永远都不会执行。 function fn. Sum(i. Num 1, i. Num 2){ return i. Num 1+i. Num 2; alert (i. Num 1+i. Num 2); //永远不会被执行 }

v 一个函数中有时可以包含多个return语句，但每次只有一个会被执行，例如： v function substr(i. Num 1, i. Num 2){ if (i. Num 1>=i. Nmu 2) return i. Num 1 -i. Num 2; else return i. Num 2 -i. Num 1; }

v 如果函数本身没有返回值，但又希望在某些时候退出函数体，则可以调用无参数的return语句来随时返回函数体，例如： v function my. Name(s. Name){ if (my. Name =="bye") return; alert("Hello"+s. Name); }

对象 v 在客观世界中，对象指一个特定的实体。一个人就是一个典型的对象，他包含身高、体重、年龄等特性，又包含吃饭、走路、睡觉等动作。同样，一辆汽车也是一个对象，它包含型号，颜色，种类等特性，还包含加速、拐弯等动作。 v 在Java. Script语言中，也具有并能自定义各种各样的对象。例如，一个浏览器窗口可看成是一个对象，它包含窗口大小、窗口位置等属性，又具有打开新窗口、关闭窗口等方法。网页上的一个表单也可以看成一个对象，它包含表单内控件的个数、表单名称等特性，以及表单提交和表单重设等方法。

对象的特点 v 从上面的例子可以看出，对象包含两个要素： v ①用来描述对象特性的一组数据，也就是若干变量，通常称为属性； v ②用来操作对象特性的若干动作，也就是若干函数，通常称为方法。

对象的创建 v 使用new运算符和内部构造函数object()来创建一个空对象 v var Car= new object(); v 在Java. Script中给对象创建新的实例采用new关键字，如下所示： v var my. Car = new Car(); v 这样就创建了一个Car对象的新实例my. Car，通过这个实例就可以利用Car的属性、方法来设置关于 my. Car的属性或方法了，代码如下： v my. Car. brand=Fiat; v my. Car. accelerate(3);

this关键字 v 在Java. Script的对象系统中，this关键字常用于两种地方：（1）在构造器函数中，指代新创建的对象实例；（2）在对象的方法被调用时，指代调用该方法的对象实例。 for (… in …)语句可以遍历对象的所有属性和方法，例35所示的代码就遍历了Car对象的属性和方法，如果是属性则输出属性值，如果是方法则执行方法。

时间日期：Date对象 v <script language="javascript"> var my. Date 1 = new Date(); //运行代码前的时间 for(var i=0; i<3000000; i++); var my. Date 2 = new Date(); //运行代码后的时间 alert(my. Date 2 -my. Date 1); v </script>

数学计算：Math对象 v Math对象也是Java. Script的一个内置对象，不需要由函数创建， random方法：该方法可以用来生成随机数，它返回一个 0~1之间的随机数，不包括 0和1。 v var i. Num=Math. floor(Math. random()*100+1); v 这样i. Num将随机产出一个 1～ 100之间的整数（包括 1 和100）。

浏览器对象模型BOM

BOM v Java. Script是运行在浏览器中的，因此提供了一系列对象用于与浏览器窗口进行交互。这些对象主要有： window、document、location、navigator和screen等，把它们统称为BOM（Browser Object Model，浏览器对象模型） window navigator location forms location anchors document images frames screen links history embeds applets

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

window对象的方法 window对象有如下4个方法用来调整窗口的位置或大小。（1）window. move. By(dx, dy) 该方法将浏览器窗口相对于当前的位置移动指定的距离（相对定位），当dx和dy为负数时则向反方向移动。（2）window. move. To(x, y) 该方法将浏览器窗口移动到屏幕指定的位置（x、y处）（绝对定位）。同样可使用负数，只不过这样会把窗口移出屏幕。（3）window. resize. By(dw, dh) 相对于浏览器窗口的当前大小，把宽度增加dw个像素，高度增加dh个像素。两个参数也可以使用负数来缩小窗口。（4）window. resize. To(w, h) 把窗口大小调整为w像素宽，h像素高，不能使用负数。

window. open v 打开新窗口 v 用法：window. open([url] [, target] [, options]) v options参数可能的选项包括： v （1）height: 窗口的高度，单位为像素； v （2）width：窗口的宽度，单位为像素； v （3）left：窗口的左边缘位置； v （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="Java. Script" type="text/javascript"> var n. Input=prompt("请输入你的名字", ""); if(n. Input!=null) document. write("Hello! "+n. Input); </script>

status属性 v 状态栏控制（status属性） v 浏览器状态的显示信息可以通过window. status属性直接进行修改。例如： window. status="看看状态栏中的文字变化了吗？";

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

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

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

动态显示时间 <script type="text/javascript"> function $(id) { return document. get. Element. By. Id(id); } function disp. Time() { $("clock"). inner. HTML = (new Date()). to. Locale. String(); // 将时间显示在clock的div中 } function init() { // 启动时钟显示 disp. Time(); //显示时间 window. set. Timeout(init, 1000); // 过1秒钟更新执行一次init() } </script>

地址栏控制（location对象） location对象的主要作用是分析和设置页面的URL地址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL <select name="select" onchange="window. location. href=this. options[this. sel ected. Index]. 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 v 如果不希望用户可以用“后退”按钮返回原来的页面，可以使用replace()方法，该方法也能转到指定的页面，但不能返回到原来的页面了，这常用在注册成功后禁止用户后退到填写注册资料的页面。例如： v <p onclick="location. replace('http: //www. sohu. com'); "> 访问搜狐</p> v 可以发现转到新页面后，“后退”按钮是灰色的了

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

screen对象 v screen对象主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸。 v 1. 根据屏幕分辨率打开适合的网页 v 2. 使浏览器窗口自动满屏显示 window. move. To(0, 0); window. resize. To(screen. avail. Width, screen. avail. Height);

文档对象模型DOM

DOM（Document Object Model）文档对象模型DOM（Document Object Model）: v 将HTML网页看成一棵由结点构成的树状结构; v DOM接口中定义了若干方法, 用于对HTML文档进行访问（增删改查）; v 大部分编程语言（如Java、PHP、Python）都提供 DOM接口, 实现对HTML文档的访问； v 在HTML网页中可以通过嵌入Java. Script代码, 利用 DOM接口, 完成对HTML文档的访问（增删改查）。

网页中的DOM模型 html <html> <head> <meta…/> <title>…</title> </head> <body> head body <h 2> <a href=“…”>…. </a> </h 2> <p>…</p> meta title h 2 p <ul> <li>…</li><li>…</li> </ul> a </body> </html> ul li li 每个HTML元素都是DOM树中的一个结点，整个DOM模型就是由各种类型的结点构成的。 li

使用DOM模型对于每一个DOM结点node，都有一系列的属性、方法可以使用。属性/方法返回类型/类型说明 node. Name String 结点名称 node. Value String 结点的值 node. Type Number 结点类型，用数值表示 first. Child Node child. Nodes中的第一个结点 last. Child Node child. Nodes中的最后一个结点

属性/方法返回类型说明 child. Nodes Node. List 子结点列表，item(0)代表第 1个 parent. Node 指向父结点 previous. Sibling Node 指向前一个兄弟结点 next. Sibling Node 指向后一个兄弟结点 has. Child. Nodes Boolean 判断一个结点有无子结点 attributes Named. Node 包含一个元素的Attr对象 Map append. Child(node Node ) 将node结点作为最后一个孩子 replace. Child() Node 替换孩子结点 insert. Before() Node 在指定位置插入孩子结点

总的来说，利用DOM接口可以对HTML进行以下操作： v 访问指定节点； v 访问相关节点； v 访问节点属性； v 检查节点类型； v 创建节点； v 操作节点。

1. 访问指定节点已知结点的id属性或name属性，在DOM树中寻找符合条件的结点。相关方法包括： v get. Element. By. Id(): 根据元素的id属性进行访问； v get. Elements. By. Name()：根据元素的name属性访问； v get. Elements. By. Tag. Name() ：根据标记名访问元素

get. Element. By. Id()的用法示例 <html><head> <script type="text/javascript"> function search. DOM() { var o. Li=document. get. Element. By. Id("css"); alert(o. Li. tag. Name+" "+o. Li. child. Nodes[0]. node. Value); } </script> </head> <body onload="search. DOM()"> <ul>客户端语言 <li>HTML</li> <li>Java. Script</li> <li id="css">CSS</li> </ul> <ul>服务器端语言 <li>ASP. NET</li> <li>JSP</li> <li>PHP</li> </ul> </body> </html>

get. Elements. By. Tag. Name()方法示例 <html><head> <script type="text/javascript"> function search. DOM() { var o. Li=document. get. Elements. By. Tag. Name("li"); alert(o. Li. length+" "+o. Li[0]. tag. Name+" "+o. Li[3]. child. Nodes[0]. node. Value); var o. Ul=document. get. Elements. By. Tag. Name("ul"); var o. Li 2=o. Ul[1]. get. Elements. By. Tag. Name("li"); alert(o. Li 2. length+" " +o. Li 2[0]. tag. Name+ " " +o. Li 2[1]. child. Nodes[0]. node. Value); } </script> </head> <body onload="search. DOM()"> <ul>客户端语言 <li>HTML</li> <li>Java. Script</li> <li>CSS</li> </ul> <ul>服务器端语言 <li>ASP. NET</li> <li>JSP</li> <li>PHP</li> </ul> </body> </html>

2. 访问元素属性在找到需要的结点之后通常需要对其属性进行读取或修改，DOM定义了三个便捷的方法来查询和设置结点的属性。 v get. Attribute(name): 读取指定名称的属性 v set. Attribute(name, value) : 修改指定名称的属性值 v remove. Attribute(name): 删除指定名称的属性

用get. Attribute()方法获取元素属性 <html><head> <script type="text/Java. Script"> function init() { var img=document. get. Element. By. Id("img 1"); alert(img. get. Attribute("src")); alert(img. src); } </script> </head> <body onload="init()"> <img id="img 1" src="01. jpg" alt="一幅图片" /> </body> </html>

用set. Attribute()方法设置元素属性 <html><head> <script type="text/Java. Script"> function change. Pic() { var my. Img=document. get. Elements. By. Tag. Name("img")[0]; my. Img. set. Attribute("src", "02. jpg"); my. Img. set. Attribute("title", "兴盛公寓"); my. Img. set. Attribute("width", "300"); } </script> </head> <body> <img src="01. jpg" onclick="change. Pic()" /> </body> </html>

访问相关结点 v “访问相关结点”的含义是根据已知的结点，寻找和它存在联系的结点，如父结点、子结点、兄弟结点等。 v （1）访问html结点和head结点、body结点 html结点： var htmlnode=document. Element; head结点: var headnode=htmlnode. first. Child; 或 var headnode=htmlnode. child. Nodes[0]; body结点： var bodynode=htmlnode. last. Child; 或 var bodynode=htmlnode. child. Nodes[1]; 或 var bodynode=document. body;

用child. Nodes()方法访问孩子结点示例 <html><head> <script type="text/Java. Script"> function init() { var body=document. body; var DOMString=" "; if(body. has. Child. Nodes()) { var childs=body. child. Nodes; for(var i=0; i<childs. length; i++) DOMString+=childs[i]. node. Name+"n"; } alert(DOMString); } </script> </head> <body onload="init()"> <h 1>HTML Sample Page</h 1> <p>Hello, this is a sample page. </p> </body> </html>

检查节点类型 v 在DOM中可以使用结点对象的node. Type属性返回结点的类型，该属性返回一个代表结点类型的整数值。 v DOM中的节点主要有三种类型，分别是元素节点、属性节点和文本节点 v （1）元素节点的node. Type值为 1； v （2）属性节点的node. Type值为 2； v （3）文本节点的node. Type值为 3。

创建结点 v 创建元素节点采用document对象的create. Element()方法； v 创建文本节点采用document对象的create. Text. Node() 方法； v 创建文档片断采用document对象的 create. Document. Fragment()方法；

创建元素结点和文本结点示例 <html><head> <script type="text/Java. Script"> function init() { var p=document. create. Element("p"); var text=document. create. Text. Node("新闻 2: 叙利亚局势 …"); p. append. Child(text); document. body. append. Child(p); } </script> </head> <body> <p onclick="init()">新闻 1: 伊朗局势 …</p> </body> </html>

利用create. Document. Fragment()方法创建文档片断 <html><head> <script type="text/Java. Script"> function add. Button() { var container=document. get. Element. By. Id("div 1"); var frag=document. create. Document. Fragment(); for(var i=0; i<10; i++) { var btn=document. create. Element("input"); btn. type="button"; btn. value="button"+(i+1); frag. append. Child(btn); } container. append. Child(frag); } </script> </head> <body> <div id="div 1" onclick="add. Button()"> 一开始没有按钮，点击后加入 10个按钮 </div> </body> </html>

操作结点 append. Child(): 在当前结点的最后插入子结点； insert. Before(): 在指定位置插入子结点； replace. Child(): 将某个子结点替换为另一结点； remove. Child(): 删除某个子结点。

用replace. Child()方法替换结点示例 <html><head> <script type="text/Java. Script"> function replace. P() { var old. Node=document. get. Elements. By. Tag. Name("p")[0]; var new. Node=document. create. Element("h 1"); var new. Text=document. create. Text. Node("这行文字是新文字，且是一级标题!"); new. Node. append. Child(new. Text); old. Node. parent. Node. replace. Child(new. Node, old. Node); } </script> </head> <body> <p onclick="replace. P()">这行文字是老文字</p> </body> </html>

DOM编程实例

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

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

Tab面板的结构代码 <ul id="tab"> <li><a id="tab 1" class="cur" href="#">课程特色 </a></li> <li><a id="tab 2" href="#">教学方法</a></li> </ul> <div id="info 1"> ·<a href="#">本课程主要特色</a> ·<a href="#">课程地位</a> </div> <div id="info 2"> ·<a href="#">教学方法和教学手段</a> ·<a href="#">课程的历史</a> </div>

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

v 其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 v 为了实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器使用负边界法向上偏移 1像素（ margin-top: -1 px; ），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在 tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是 div容器不能有上边框的原因。

v 所以只能使用ul的子元素的下边框覆盖ul元素的下边框，因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素的下边框 #tab { margin: 0; /*通用设置，将列表的边界、填充都设为 0*/ padding: 0 0 24 px 0; /*由于li元素浮动，ul盒子高度为 0，用填充使高度扩展*/ list-style-type: none; /*去掉列表元素列表项前的小黑点*/ border-bottom: 1 px solid #11 a 3 ff; /*给ul元素添加下边框*/ }

每个选项a元素的样式 #tab a { display: block; padding: 0 10 px; /*给a元素左右加 10像素填充 */ height: 23 px; /*使a元素的高度正好等于ul元素高度，从而它们的下边框重合 */ line-height: 23 px; /*以上两条使a元素文字垂直居中 */ border: 1 px solid #11 a 3 ff; /*设置边框 */ margin: 0 4 px 0 0; /*设置右边界 */ font-size: 14 px; color: #993300; text-decoration: none; /*去下划线 */ background-color: #BBDDFF; }

v 这样ul#tab元素的高是 24+1=25象素，a元素的高是 23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被a元素撑开。 v 注意：ul元素作为浮动盒子a的外围容器不能设置宽和高，否则在IE中浮动盒子（a元素）将不会脱离标准流，这样a元素的盒子将被包含在ul元素的盒子中，两个盒子的下边框将无法重叠。这就是为什么对ul#tab元素设置下填充为 24像素，而不设置高度为 24像素（ height: 24 px; ）的原因。 v 同样，ul元素不能设置宽度，这意味着tab面板的宽度是无法由其自身控制的，但这并不构成一个问题，因为tab面板总是放在网页中其他元素（如div）中的，只要设置外围容器的宽度，就能控制tab面板的宽度了。

#tab li { float: left; /*使tab项水平排列 */ margin: 0 4 px 0 0; /*设置右边界，使tab项之间右间距 */ } div { background-color: #FFeeee; padding: 10 px; border-left: 1 px solid #11 a 3 ff; /* 左边框 */ border-right: 1 px solid #11 a 3 ff; /* 右边框 */ border-bottom: 1 px solid #11 a 3 ff; /* 下边框 */ }

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

添加行为 <ul id="tab"> <li><a id="tab 1" onmouseover="changtab(1)" class="cur" href="#">课程特色</a></li> <li><a id="tab 2" onmouseover="changtab(2)" href="#">教学方法 </a></li> </ul> 最后写Java. Script代码： <script language="Java. Script" type="text/javascript"> function changtab(n) { for(i=1; i<=document. get. Elements. By. Tag. Name("li"). length; i++) { document. get. Element. By. Id('info'+i). style. display='none'; document. get. Element. By. Id('tab'+i). class. Name='none'; } document. get. Element. By. Id('info'+n). style. display='block'; document. get. Element. By. Id('tab'+n). class. Name='cur'; }</script>

DW CS 3对Java. Script的支持 v 行为面板 v Spry组件

j. Query 入门

JQuery简介 v 随着Java. Script、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）。这使得Web程序开发变得简洁，并能显著提高开发效率。 v j. Query的官方网站（http: //jquery. com）提供了最新的j. Query框架下载，如图 7 -42所示。通常只需要下载最小的j. Query包（Minified）即可。目前最新的版本 jquery-1. 3. 2. min. js文件只有55. 9 KB

j. Query的使用 v j. Query是一个轻量级（Lightweight）的Java. Script框架，所谓轻量级是说它根本不需要安装，因为j. Query 实际上就是一个外部js文件，使用时直接将该js文件用<script>标记链接到自己的页面中即可，代码如下： v <script src=" jquery. min. js" type="text/Java. Script"></script> v 将j. Query框架文件导入后，就可以使用j. Query的选择器和各种函数功能了。

j. Query中的“$”及其作用 v 1. “$”用作选择器 <script type="text/Java. Script" src="jquery 1. 2. 6. js"></script> <script type="text/Java. Script"> $(document). ready(function(){ //页面载入后执行 $("h 2>a"). css("color", "red"); $("h 2>a"). css("text. Decoration", "none"); }); </script> v 则使得本来不支持子选择器的IE 6也能支持子选择器了

j. Query中的“$”及其作用 2. “$”用作功能函数前缀 (1) 遍历数组 v $. each( [0, 1, 2], function(i){document. write( "Item #" + i +" "); }); (2) 遍历选择器中的元素 v $(function(){ v $("img"). each(function(index){ v this. title = "这是第" + (index+1)+ "幅图，路径是：" + this. src; v });

j. Query中的“$”及其作用 v 3. 用作$(document). ready() $(document). ready(function(){ ("#loading"). css("display", "none"); }) v j. Query的写法则会使页面仅加载完DOM结构后就执行，即加载完html文档后，还没加载图像等其他文件就执行ready()函数，给图像添加“display: none”的样式，因此id为“loading”的图片不可能被显示。 v 所以$(document). ready()比window. onload载入执行更快

j. Query中的“$”及其作用 v 4. 创建DOM元素 v 在j. Query中使用“$”可以直接创建DOM元素，例如： var new. P =$("<p>武广高速铁路即将通车！</p>"); v 创建了DOM元素后，还要用下面的方法将这个元素插入到在页面的某个具体位置上 new. P. insert. After(“#chapter”); //将创建的new. P元素插入到ID为#chapter的元素之后或者 new. P. append. To("body");

创建DOM元素的方法总结 v 将新元素插入到匹配元素的里面 v append() append. To () prepend. To () v append()表示在原有元素中插入新元素 v $ ("body") append(new. P); v append. To ()表示将新元素插入到原有元素里 new. P. append. To("body"); v 将新元素插入到匹配元素的盘边 v after () insertafter () before () insertbefore () v 将新元素包含住匹配的元素 v wrap ()

j. Query的选择器 v 要使某个动作应用于特定的html元素，需要有办法找到这个元素。在j. Query中，执行这一任务的方法称为 j. Query选择器。 v j. Query选择器把网页的结构和行为完全分离。利用 j. Query选择器，能快速地找出特定的html元素，然后轻松的给元素添加一系列行为动作。 v j. Query的选择器主要有三大类，即CSS 3的基本选择器，CSS 3的位置选择器和过滤选择器。

j. Query中的常用方法 v 1. find()方法 v find()方法可以通过查询获取新的元素集合，通过匹配选择器来筛选元素，例如： v $("div"). find("p"); v 2. hover方法 v 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。 v 3. toggleclass方法 v toggleclass方法用于切换元素的样式。

j. Query的应用举例 v 1. 制作折叠式菜单（Accordion） v 折叠式菜单是和Tab面板一样流行的高级网页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图 7 -48所示。因此折叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式是不是有点像在拉手风琴呢？

1. 制作折叠式菜单（Accordion） <script language="Java. Script" src="jquery. min. js"></script> <script type="text/Java. Script"> $(document). ready(function(){ //页面载入时隐蔽除第一个元素外所有元素 $("#accordion > li > a + *: not(: first)"). hide(); //对所有元素的标题绑定点击动作 $("#accordion > li > a"). click(function(){ $(this). parent(). each(function(){ $("> li > a + *", this). slide. Up(); //隐蔽所有元素 }); $("+ *", this). slide. Down(); //展开当前点击的元素 }); </script>

2. 制作渐变背景色的下拉菜单 $(document). ready(function(){ $("#nav>li"). hover(function(){ $(this). children("ul"). fade. In(600); $(this). find("img"). attr("src", "minus. gif"); }, function(){ $(this). children("ul"). fade. Out(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)+")"); });

3. 制作图片轮显效果 v <div class="imgs. Box"> v <div class="imgs"> v <a href="#"><img id="pic" src="images/01. jpg" width="282" height="164" /></a> v </div> v <div class="click. Button"> v <div> v <a class="active" href="">1</a> v <a class="" href="">2</a><a class="" href="">3</a><a class="" href="">4</a> v <a class="" href="">5</a> v </div>

7. 8. 7 j. Query的插件应用举例 v 1. 使用j. Query插件Lightbox制作Lightbox效果

2. 使用j. Query插件jqzoom实现图片放大镜效果 v 在一些电子商务的商品展示网页上，为了更好的展示商品，一般都会添加放大镜的效果。当把鼠标放到小图片上，右边会自动的出现小图局部的放大图，

复习题 v 1. 试说明以下代码输出结果的顺序，并解释其原因，最后在浏览器中验证。 v <script type="text/javascript"> v set. Timeout (function(){ v alert("A"); v }, 0); v alert("B"); v </script> v 2. 编写代码实现以下效果：打开一个新窗口，原始大小为 400*300 px，然后将窗口逐渐增大到 600*450 px，保持窗口的左上角位置不变。

第七章 Java Script概述 本章内容 一 Java Script简介

第七章 Java Script概述本章内容一 Java Script简介