第7章Javascript.ppt

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

2、cript程序 function msg ()/JavaScript注释：建立函数 alert (Hello, the WEB world!) Click Here ,2. 直接将脚本嵌入到HTML标记的事件中（行内式）,可以直接在HTML某些标记内添加事件，然后将JavaScript脚本写在该事件的值内，以响应输入元素的事件 行内式引入JavaScript脚本 Click Here ,3. 通过script标记的src属性链接外部脚本文件（链接式）,如果需要同一段脚本供多个网页文件使用，可以把这一段脚本保存成一个单独的文件，JavaScript的外部脚本文件扩展名为“js” 链接式插入Js脚

3、本文件 Click Here ,7-3.js的代码 function msg ()/建立函数 alert (Hello,the WEB world!),JavaScript语言基础,JavaScript变量,JavaScript的变量是一种弱类型变量，所谓弱类型变量是指它的变量无特定类型，定义任何变量都是用“var”关键字，并可以将其初始化为任何值，而且可以随意改变变量中所存储的数据类型，当然为了程序规范应该避免这样操作 var name =Six Hang; var age28; var school=CSU; var male=true; 变量命名规范：第一个单词所有字母都小写，以后每个单

4、词第一个字母大写，例如：sMyString,变量的命名原则,首字符必须是字母、下划线（_）或美元符号（$）； 余下的字母可以是下划线。美元符号、任意字母或者数字； 变量名不能是关键字或保留字 变量名对大小写敏感 变量名中不能有空格、回车符或其他标点字符 例如下面的变量名是非法的： var 5zhao;/数字开头，非法 var tangs;/对于变量名，单引号是非法字符 var this;/不能使用关键字作为变量名,运算符,运算符是指完成操作的一系列符号，也称为操作符。运算符用于将一个或多个值运算成结果值，使用运算符的值称为算子或操作数 算术运算符 Operator Description Ex

5、ample 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=

6、x/y %= x%=y x=x%y,关系运算符 运算符 说明 例子 结果 = 是否相等(只检查值) 5=8 false = 是否全等(检查值和类型) x=5 y=5 x=y true x=y false != 不等于 5!=8 true = =,逻辑运算符 Operator Description Example alert(ab?”a:b) /返回 6 Typeof运算符 ：返回表达式或变量的数据类型 var a=“abc”; alert(typeof(a) /返回string 下标运算符：用来引用数组中的元素 逗号运算符，：用来分开不同的值 成员选择运算符 . ：用来引用对象的属性或方法

7、如：document.write,JavaScript 数据类型：字符串（String）,字符串由零个或多个字符构成，字符可以是字母、数字、标点符号或空格。字符串必须放在单引号或双引号中。例如： var course=data structure“ var case=the birthday19801106 还可以使用转义字符（escaping）“”实现特殊字符按原样输出： var score = run time 3 15,JavaScript中的转义字符,CodeOutputs 单引号 “ 双引号 （1）length属性：它返回字符串中字符的个数，例如： var name=Six tang

8、; alert (name.length);/返回11 （2）charAt属性：它返回字符串对象在指定位置处的字符，第一个字符位置是0。例如： myString.charAt(2)； /返回i （3）charCodeAt：返回字符串对象在指定位置处字符的10进制的ASCII码 myString.charCodeAt(2)； /返回105 （4）indexOf：要查找的子串在字符串对象中的位置 myString.indexOf(“is”)； /返回2,字符串（String）对象常见方法,后面加参数，指定从第几个字符开始找 myString.indexOf(“is”,2) /返回2 如果找不到返回

9、-1 （5）lastIndexOf：从尾部开始查找并返回所在的位置 myString.lastIndexOf(“is”) /返回5 （6）substr方法：截取字串 myString.substr(10,3)； /返回sam 其中10表示位置，3表示长度，长度省略截取到最后 （7）substring方法：截取字串 myString.substring(5,9)；/返回is a, 其中5表示开始位置，9表示结束位置 （8）split方法：分隔字串到一个数组中 var a = myString.split( ); /a0 = “This” a1=“is” a2=“a” a3=“sample”,字符

10、串（String）对象常见方法,（9）replace方法：替换子串 myString.replace(“sample”,”apple”); /结果 “This is a apple” （10）toLowerCase方法：变成小写字母 myString.toLowerCase()；联/ this is a sample （11）toUpperCase方法：变成大写字母 myString.toUpperCase(),数值型（number）,在Javascript中，数值型数据不区分整型和浮点型，数值型数据和字符型数据的区别是数值型数据不要用引号括起来。例如下面都是正确的数值表示法， var num

11、1=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) +); / 输出boolean married = true; document.write(type

12、of(married);/ 输出string,数组（array）,数组使用关键字Array来声明，同时还可以指定这个数组元素的个数，也就是数组的长度（length），例如： var rank =new Array(12); /论坛的用户共分12级 可以用方括号直接定义 var Map =China, USA, Britain; 如果不知数组的维数，可定义动态数组 var myColor= new Array(); myColor0= blue; myColor1= yellow; myColor2= purple; myColor3= red;,数组（array）,可以用参数创建数组 var

13、Map =new Array(China, USA, Britain”); Map4= “Iraq” 数组长度为5，其中Map3的值为undefined,数组的常用属性和方法： （1）length属性：用来获取数组的长度，而数组的位置同样也是从0开始的。例如： var Map =new Array(China, USA, Britain); alert(Map.length+ + Map2);/返回3 Britain （2）toString方法：将数组转化为字符串 var Map =new Array(China, USA, Britain); alert(Map.toString()+ +

14、typeof(Map.toString();,数组的常用属性和方法： （3）concat方法：将多个数组连接起来形成新数组 var a=new Array(1,2,3); var b=new Array(4,5,6); alert(a.concat(b); /输出1,2,3,4,5,6 alert(a.length); /长度不度，仍为3 （4）join方法：将数组的元素连接起来生成字符串，默认用“，”连接 var a=new Array(1,2,3); alert(a.join(); /输出1，2，3 也可用指定的符号连接，如：alert(a.join(“-”);,数组的常用属性和方法： （

15、5）push方法：在数组的最后添加一个或多个项，同时更改数组的长度 var a=new Array(1,2,3); a.push(4,5,6); alert(a.length); /输出6 （6）pop方法：返回数组的最后一个元素，并将其删除 var a=new Array(1,2,3); alert(a.pop(); /输出3 alert(a.length); /输出2,数组的常用属性和方法： （7）reverse方法：将数组中的元素逆序排列 var a=new Array(1,2,3); alert(a.reverse(); /输出3，2，1 （8）shift方法：返回数组的第一个元素，并

16、将其删除 var a=new Array(1,2,3); alert(a.shift(); /输出3 alert(a.length); /输出2,数据类型转换,（1）数值转换为字符串：toString var a=4; a.toString; （2）字符串转换为数值：parseInt()、parseFloat() document.write(parseInt(“456red”)； /返回456 如果字符串中不存在数字，则返回NaN,JavaScript中的语句,1. 条件语句 条件语句可以使用程序按照预先指定的条件进行判断，从而选择需要执行的任务。在JavScript中提供了if语句、if

17、else语句和switch语句等三种条件判断语句。,（1）if语句 if(表达式） 语句组 if (判定条件) 语句;,JavaScript中的语句,if (判定条件) 语句1; else 语句2;,（2）if else 语句 if(表达式） 语句组1 else 语句组2 ,JavaScript中的语句,（3）ifelse if else语句 if(表达式） 语句组 ,通过条件语句判断时间,var d=new Date(); var time=d.getHours(); if (timeGood morning) else if (time10 break; case 值n:语句n; brea

18、k; default:语句 ,循环语句,（1）for语句 for(初始表达式；循环判定式；更新表达式） 循环体； ,循环语句：反复执行一些语句,循环语句,（2）while语句 while(循环判定式） 循环体； ,循环语句,（3）dowhile语句 do 循环体； while(循环判定式）,循环语句,（4）forin语句,在有些情况下，开发者根本没有办法预知对象的任何信息，更谈不上控制循环的次数。这个时候用forin语句可以很好的解决这个问题。,循环语句, var x var mycars = new Array() mycars0 = Saab mycars1 = Volvo mycars2

19、 = BMW for (x in mycars) document.write(mycarsx + ) ,循环语句,（5）break和continue语句,break 语句：结束整个循环语句 continue 语句：结束本次循环 控制循环：与if 语句配合使用,函 数,函数是一个可重用的代码块，可用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复输入大量的相同内容。不过，函数的真正威力体现在，我们可以把不同的数据传递给它们，而它们将使用实际传递给它们的数据去完成预定的操作。在把数据传递给函数时，我们把那些数据称为参数（argument）。 function functio

20、nname(arg1,arg2,.,argX) statements returnexpression ,调用函数,function myName(sName) alert(Hello+sName); 该函数接受一个输入参数sName，不返回值。调用它代 码如下： myName(six-tang);,与其他编程语言一样，函数在执行过程中只要执行完return语句就会停止继续执行函数体中的代码，因此return语句后的代码都不会执行。下例中函数中的alert()语句就永远都不会执行。 function fnSum(iNum1, iNum2) return iNum1+iNum2; alert (

21、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); ,对 象,在客观世界中，对象指一个特定的实

22、体。一个人就是一个典型的对象，他包含身高、体重、年龄等特性，又包含吃饭、走路、睡觉等动作。同样，一辆汽车也是一个对象，它包含型号，颜色，种类等特性，还包含加速、拐弯等动作。 在JavaScript语言中，也具有并能自定义各种各样的对象。例如，一个浏览器窗口可看成是一个对象，它包含窗口大小、窗口位置等属性，又具有打开新窗口、关闭窗口等方法。网页上的一个表单也可以看成一个对象，它包含表单内控件的个数、表单名称等特性，以及表单提交和表单重设等方法。,对象的属性和方法,用来描述对象特性的一组数据，也就是若干变量，通常称为属性； 用来操作对象特性的若干动作，也就是若干函数，通常称为方法。,对象的分类,自

23、定义对象：根据需要而定义的对象 内置对象：指JavaScript语言提供的对象，包括Math、Date、String、Array、Number、Boolean、Function、Object等实现最常用功能的对象 浏览器对象：是浏览器根据系统配置和所装载的页面提供的对象，如window、document、location,自定义对象,自定义对象的创建1：使用new运算符和内部构造函数object()来创建一个空对象 var person= new Object(); 注：Object对象是一种特殊的对象。JavaScript的所有对象都是Object对象类的实例，所以都可以使用Object对象

24、的属性和方法 自定义对象的创建2： var person= name=“张三”, sex=“男” ;,自定义对象,定义属性： =“张三”; 定义方法： Function对象：任何函数都是Function对象 定义Function对象：,this关键字,this指代当前元素： （1）如果this位于HTML标记中，通过事件触发调用的代码中有this，那指代当前元素。 （2）如果this作为函数的参数，那this指代函数被调用的地方所在的当前元素。,作为普通函数直接调用时，this指代window对象,内置对象,时间日期：Date对象 （1）var tDate= new Da

25、te()：创建一个含有系统日期和时间 的Date对象 （2）var tDate=new Date(2009,9,1)：创建一个指定日期的Date 对象 （3）var tDate=new Date(2009,9,1,10,20,30,50)：创建一个指定 时间的Date对象,内置对象,Date属性和方法,内置对象,数学计算：Math对象 var tDate= new Date();,内置对象,浏览器对象模型BOM,BOM,JavaScript是运行在浏览器中的，因此提供了一系列对象用于与浏览器窗口进行交互。这些对象主要有：window、document、location、navigator和sc

26、reen等，把它们统称为BOM（Browser Object Model，浏览器对象模型）,window对象,window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类： （1）调整窗口的大小和位置； （2）打开新窗口； （3）系统提示框； （4）状态栏控制； （5）定时操作。,调整窗口的大小和位置,window对象有如下4个方法用来调整窗口的位置或大小。 （1）window.moveBy(dx, dy) 该方法将浏览器窗口相对于当前的位置移动指定的距离（相对定位），当dx和dy为负数时则向反方向移动。 （2）window.mo

27、veTo(x, y) 该方法将浏览器窗口移动到屏幕指定的位置（x、y处）（绝对定位）。同样可使用负数，只不过这样会把窗口移 出屏幕。 （3）window.resizeBy(dw, dh) 相对于浏览器窗口的当前大小，把宽度增加dw个像素， 高度增加dh个像素。两个参数可以使用负数来缩写窗口 （4）window.resizeTo(w, h) 把窗口大小调整为w像素宽，h像素高，不能使用负数。,打开和关闭窗口,打开新窗口 用法：window.open(url , target , options) options参数可能的选项包括： （1）height: 窗口的高度，单位为像素； （2）width

28、：窗口的宽度，单位为像素； （3）left：窗口的左边缘位置； （4）top：窗口的上边缘位置； （5）fullscreen：是否全屏 （6）location：是否显示地址栏 （7）menubar：是否显示菜单项 （8）resizable：是否允许改变窗口大小,打开和关闭窗口,（9）scrollbars: 是否显示滚动条 （10）status：是否显示状态栏 （11）titlebar：是否显示标题栏 （12）toolbar：是否显示工具栏 例：window.open(“pop.html”, “new”, “width=400, height=300”);,系统对话框,（1）window.ale

29、rt(message) alert()方法前面已经反复使用，它只接受一个参数，即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。 （2）window.confirm(message) 该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。例如： if (confirm(确实要删除这张图片吗？) alert(图片正在删除); else alert(已取消删除！);,（3）mpt(message , defaul

30、t) 该方法将显示一个消息提示框，其中包含一个文本输入框。输入框能够接受用户输入参数，从而实现进一步的交互。该方法接受两个参数，第一个参数是显示给用户的文本，第二个参数为文本框中的默认值（可以为空）。整个方法返回字符串，值即为用户的输入。例如： var nInput=prompt(请输入你的名字,); if(nInput!=null) document.write(Hello! +nInput); ,状态栏控制,状态栏控制（status属性） 浏览器状态的显示信息可以通过window.status属性直接进行修改。例如： window.status=看看状态栏中的文字变化了吗？;,定时操作,定

31、时操作通常有两种使用目的，一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次时间的显示，另一种则是将某个操作延时一段时间执行，例如迫使用户等待一段时间才能进行操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。 setInterval函数：用于设置定时器，每隔一段时间执行一次代码 clearInterval函数：取消setInterval设置的定时器 setTimeout函数：用于设置定时器，在一段时间后执行一次指定的代码 clearTimeout函数：取消setTimeout设置的定时器, function showTime(

32、) var now=new Date(); window.status=now.toLocaleString(); var timeID=window.setInterval(showTime() ,1000); /设置定时器 function stopShowTime() window.clearInterval(timeID); /取消定时器 window.status=已取消定时器 取消定时器 , var timeID=setTimeout(navigate();,5000) function stopTimeout() window.clearTimeout(timeID); wind

33、ow.status=已取消定时器; 取消定时器 ,动态显示时间, function ab(id) return document.getElementById(id); function dispTime() ab(clock).innerHTML = (new Date().toLocaleString();/ 将时间显示在clock的div中 function init() / 启动时钟显示 dispTime();/显示时间 window.setTimeout(init, 1000); / 过1秒钟更新执行一次init() ,地址栏控制（location对象）,location对象的主要作

34、用是分析和设置页面的URL地 址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL,地址栏控制（location对象）,location对象的主要作用是分析和设置页面的URL地 址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL 请选择需要的网址 搜狐 新浪 MSN中国 ,location.replace,如果不希望用户可以用“后退”按钮返回原来的页面，可以使用replace()方法，该方法也能转到指定的页面，但不能返回到原来的页面了，这常用在注册成功后禁止用户后退到填写注册资料的页面。例如： 访

35、问搜狐 可以发现转到新页面后，“后退”按钮是灰色的了,History对象,浏览器后退和前进（history属性） window还有一个非常实用的属性是history。它可以访问历史页面，但不能获取到历史页面的URL，如果希望浏览器返回前一页可以使用如下代码： window.history.go(-1); 如果希望前进一页，只需要使用正数1即可，代码如下： window.history.go(1); 如果希望刷新显示当前页，则使用0即可，代码如下： window.history.go(0);,上面三句的效果还可以分别用back()和forward()实现，代码如下： window.history

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

37、主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸。 1.根据屏幕分辨率打开适合的网页 2. 使浏览器窗口自动满屏显示 window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);,文档对象模型DOM,DOM（Document Object Module）,DOM是“Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型。 DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们

38、提供了当前页面的模型，而我们可以通过JavaScript访问这个模型。 DOM把一份文档表示为一棵树。,如下的HTML页面：, Trees, trees, everywhere Trees, trees, everywhere Welcome to a really boring page. Come again soon. ,浏览器加载该页面并将之转换为树形结构：,DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root element）。 从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；ti

39、tle是head的孩子，而文本 “Trees, trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees, trees, everywhere” 的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构。 通常把这样的树结构成为一棵节点树。,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶。 DOM中节点的类型： 元素节点（element node），诸如、等。元素节点可以包含其它的元素，唯一没有被包

40、含在其它元素里的元素是，它是根元素。 属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中。 文本节点（text node），元素中包含着文本节点“Trees, trees, everywhere”。,DOM编程在HTML页面中的应用,（1）访问指定节点； （2）访问相关节点； （3）访问节点属性； （4）检查节点类型； （5）创建节点； （6）操作节点。,1. 访问指定节点,getElementById()：根据传入的ID参数返回指定的元素结点 getElementsByTagN

41、ame() ：通过元素的标记名来访问元素，返回一个具有某个相同标记的所有元素的集合。,childNodes：可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素。 nodeName：返回元素节点的名称。注意，返回的结果全部是大写。元素结点返回标签名称，属性节点返回属性名 nodeType：用来区分节点的类型，元素节点的nodeType属性值是1，属性节点值是2，文本节点的值是3。 nodeValue：可以用来存取节点的值。文本节点是指文本，属性结点指属性值，对于文档节点或元素节点这个属性返回空。,2. 访问元素属性,getAttribute(na

42、me) setAttribute(name, value) removeAttribute(name),访问相关节点,“访问相关节点”的含义是根据已知的节点，寻找和它存在联系的节点，如父节点、子节点、兄弟节点等。 （1）访问html节点和body节点 （2）访问子节点 childNodes：子节点的列表； firstChild：第一个子节点； lastChild：最后一个子节点。,检查节点类型,DOM中的节点主要有三种类型，分别是元素节点、属性节点和文本节点 （1）元素节点的nodeType值为1； （2）属性节点的nodeType值为2； （3）文本节点的nodeType值为3。,DOM编程

43、实例,制作Tab选项卡面板,Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。,首先，一个tab面板可以分解成两部分，即上方的导航条和下面的内容框，实际上，导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候，才显示与其对应的一个内容框，而把其他内容框都通过（dislay:none）隐藏了，且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。,Tab面板的结构代码, 课程特色 教学方法 本课程主要特色 课程地位 教学方法和教学手段 课程的历史 ,Tab面板的结构,从结构代码中可以

44、看出，这个Tab面板是用具有2个列表项的无序列表做的导航条，使用2个div容器做的内容框。实际上这些div容器都没有上边框，而只有左、右和下边框，为了证实这一点，我们只需给这些div容器加个上边界（margin-top:12px;）就可以发现它们确实没有上边框，,其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 为了实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器

45、使用负边界法向上偏移1像素（margin-top:-1px;），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是div容器不能有上边框的原因。,所以只能使用ul的子元素的下边框覆盖ul元素的下边框，因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素的下边框 #tab margin: 0; /*通用设置，将列表的边界、填充

46、都设为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元素文字垂直居

47、中 */ 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元

48、素）将不会脱离标准流，这样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

49、: #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; /*改变

50、tab项的文字颜色 */ background-color: #FFeeee; /*改变tab项的背景颜色 */ ,添加行为, 课程特色 教学方法 最后写JavaScript代码： function changtab(n) for(i=1;i,DW CS3对JavaScript的支持,行为面板 Spry组件,jQuery 入门,JQuery简介,随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）。这使得Web程序开发变得简洁，并能显著提高开发效率。 jQuery的官方网站（）提供了最新

51、的jQuery框架下载，如图7-42所示。通常只需要下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.3.2.min.js文件只有55.9 KB,jQuery的使用,jQuery是一个轻量级（Lightweight）的JavaScript框架，所谓轻量级是说它根本不需要安装，因为jQuery实际上就是一个外部js文件，使用时直接将该js文件用标记链接到自己的页面中即可，代码如下： 将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。,jQuery中的“$”及其作用,1. “$”用作选择器 $(document).ready(functi

52、on() /页面载入后执行 $(h2a).css(color,red); $(h2a).css(textDecoration,none); ); 则使得本来不支持子选择器的IE 6也能支持子选择器了,jQuery中的“$”及其作用,2. “$”用作功能函数前缀 (1) 遍历数组 $.each( 0,1,2, function(i)document.write( Item # + i +); ); (2) 遍历选择器中的元素 $(function() $(img).each(function(index) this.title = 这是第 + (index+1)+ 幅图，路径是： + this.

53、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 =$(武广高速铁路即将通车！); 创建了DOM元素后，还要用下面的方法将这个元素插入到在页面的某个具体位置上 newP.insertAfter(“#chapter”); /将创建的newP元素插入到ID为#chapter的元素之后 或者 newP.