JS学习笔记

最新推荐文章于 2020-11-29 05:41:14 发布

wkcgy

最新推荐文章于 2020-11-29 05:41:14 发布

阅读量773

点赞数

分类专栏： JavaWeb 文章标签： javascript input button 文档 html xmlhttprequest

JavaWeb 专栏收录该内容

44 篇文章

订阅专栏

1.JavaScript中的对象
分为3种。
（1）JavaScript的内置对象
常用的有Date,Array,String,Math,对象,这些都是经常会用到的，一定要掌握好。
（2）文档对象模型(Document Object Model,DOM)
这个对象表示了当前浏览器的多个组件和当前的HTML文档。DOM我认为是JS中最重要的一个对象，通过他可以获得任何一个HTML元素，1.通过document.form1.name得到，这种是浏览器支持的dom对象，不属于js，2.咱们经常用的是document.getElementById("name"),这种是w3c组织制定的一级DOM对象标准。
（3）自定义对象
我总认为js的自定义对象没必要用，如果你是按照面向对象的编程思想，那么应该用Java，而不是用js的对象。

2.DOM对象,history以及location
为了操控浏览器和文档，js使用分层的父对象和子对象，这就是DOM。这些对象的组织类似一个树形结构，并表示一个Web文档的所有内容组件。

Window是所有对象的父对象

document对象几种常用方法
document.URL：指明了文档的URL地址。不可改变，如果需要给用户不同的地址应该用window.location对象
document.write:列出了当前页面的标题
document.referrer:用户所浏览的上一个页面的URL地址。
document.lastModified：文档最后修改日期
document.cookie 允许读取和设置一个文档的cookie

history对象的几种常用方法
history.length();保存了历史列表的长度
history.go();打开历史列表中一个网址，要指定一个正数或者负数。
history.back();历史列表中的前一个网址，相当于后退按钮。
historay.forward();历史列表中的后一个网址，相当于后退按钮。

location对象的几种常用方法
location.protocol:网址的协议部分---http
location.hostname:网址的主机名---www.aaa.com
location.port:网址的端口号---80
location.pathname:网址的文件名部分---tese.do
location.search:网址的查询部分---lines=1
location.hash:网址中使用的anchor名---#anchor
location对象的两个方法
location.reload() 刷新当前文档，浏览器中的刷新按钮。
location.replace()替换一个新的位置

3.JavaScript中的变量名称，表达式，运算符，数据类型
变量名称，表达式，运算符，和Java中差别不大，就不多加叙述了
数据类型
1.数字：整数，浮点数
2.布尔值：真，假。
3.字符型：字符串对象
4.空值，null。
parseInt()----将一个字符串转换为整数值。
parseFloat----将一个字符串转换为浮点小数
字符串中有一些常用的方法，如subString,charAt等，与Java中的很像，就不叙述了

4.JavaScript中的函数
函数定义的最佳位置是文档中的<head>部分，因为<head>部分语句会首先执行。
函数中可以带有参数列表，但是参数都没有类型，也不需要在定义函数的时候声明返回值，想有返回值的话，直接return即可，和Java不同。
如：
Js代码
1. function greet(who){
2.                 alert(“Gadsden” + who);
3.                 return “asdasd”;
4.             }

5.JavaScript中的对象
他和Java中的对象很相似，之前我曾说不需要用到他，用Java的就够了，昨天看了一个人的文章，说你要想用好一门语言，就要尊重这门语言，就像现在的JavaScript，如果简单的把他当做一门脚本语言，那可能只能停留在入门和初级阶段。
如何扩展内置对象
使用prototype关键字，可以向现有对象中添加属性和方法。
例如：
Js代码
1. <script type="text/javascript" language="JavaScript">
2.             function addHead(level){
3.                 html = "H" + level;
4.                  text = this.toString();
5.                 start = "<" + html +">";
6.                  end = "</" + html +">";
7.                  return start + text + end;
8.             }
9.             String.prototype.heading = addHead;
10.             document.write("this is a test".heading(1));
11.             document.write("this is a test".heading(2));
12.             document.write("this is a test".heading(3));
13.     </script>

这样就为String对象又新增添了一个方法，heading，并指明每次调用heading的时候，他都会去调用addHead方法。

6.JavaScript中的Data Math等内置对象
他们与Java中的又是很相似，不多介绍了，有一个关键字需要说说，就是with。
with关键字制定一个对象，后面跟着括在大括号中的一大块语句。对于块语句中的每一条语句，没有指定对象的属性都将被假定为该对象的属性。
如：
Js代码
1. <script type="text/javascript" language="JavaScript">
2.                 a = "niechao";
3.                  with(a){
4.                 window.alert("长度是"+ length)
5.                 document.write(toUpperCase());
6.                 }
7.         </script>

注:这里不用在定义a的时候带有类型信息，如String a = “niechao”;这样会报错，如果非要加上，也只能是var a = “niechao”;

7.JavaScript中使用第三方程序库
每个程序库都有自己的名字，一般的名字是xxx.js，包含到你要用的jsp页面里就行了。
<
Js代码
1. script type="text/javascript" language="JavaScript" src="prototype.js">

现在流行的有几种，比如：ext,jquery,dojo等，老一辈的也有prototype这些。选一种合适自己的就行了，自己用着顺手的，可以满足项目需要的，我暂时选的而是jquery。

8.JavaScript中的事件相应
不必使用标签来定义事件处理函数
可以不在HTML中指定时间处理函数，而是使用JavaScript把一个函数指定为事件处理函数
1.首先找到元素的对象，使用obj = document.getElementById("aa")
2.定义一个函数，把该函数指定为事件处理函数，
Js代码
1. function mousealert(){
2.          alert("");
3.      }
4. bj.onclick = mousealert;

JavaScript中由属性，方法，事件组成对象，许多常用的事件处理函数都是document对象中的属性。

9.JavaScript中使用event对象
要是用event对象，可以把他传递给事件处理程序函数。
Js代码
1. <body onKetPress=”getKey(event)”>
2. function getKey(e){

火狐和IE，对event的处理方式不同，火狐是直接自动传递的，IE是将最近发生的事件存放在window.event对象中。
所以很多函数的开头，一般都是
Js代码
1. function getKey(e){
2.         if(!e) e=window.event;
3.         }

它检查了是否已经定义了e，若未定义，它将获取window.event对象，并将其存入e，这样确保任何一个浏览器中都会得到一个有效的event对象。
以下是IE4.0及更高版本的一些常用event对象属性
1.event.button：按下的鼠标键。对于鼠标左键，属性值为1，对于鼠标右键，属性值为2
2.event.clientX:事件发生位置的x轴坐标（列，以像素为单位）
3.event.clientY:事件发生位置的y轴坐标（行，以像素为单位）
4.event.altkey:该标志表示事件发生时是否按下Alt键
5.event.ctrlkey:该标志表示事件发生时是否按下Ctrl键
6.event.shiftkey:该标志表示事件发生时是否按下Shift键
7.event.keyCode：所按键的键码（用Unicode表示）
8.event.srcElement:元素出现的对象
以下是Netscape4.0及更高版本的一些常用event对象属性
1.event.modifiers:表示事件发生时按下了哪一个修饰键(Shift,Ctrl,Alt)。该属性是一个整数，表示不同键的2进制的组合
2.event.pageX:事件在网页中x轴坐标
3.event.pageY:事件在网页中y轴坐标
4.event.which:键盘事件键码，或者鼠标事件按下的键
5.event.button:按下的鼠标按键，其原理与IE一样，只是左键的属性值为0，右键为2
6.event.target:元素出现的对象

10.JavaScript中使用鼠标事件
鼠标事件中的几个函数(他们都属于document对象)
1.onMouseOver:鼠标指针移动到链接上时被调用
2.onMouseOut:鼠标移出对象边缘时被调用
3.onMouseMove:只要鼠标移动，就会触发(浏览器在，默认情况下不支持，需要使用事件捕捉技术)
4.onClick:鼠标按键何时被单击，如果onClick事件处理程序返回false，则链接不会被打开（如果对象是一个链接）
Js代码
1. <a href="http://www.cctv.com" οnclick="return(window.confirm('Are you sure?'));">Click here</a>

5.onDblClick: 鼠标按键何时被双击
6.onMouseDown:按鼠标按键时
7.onMouseUp:松开鼠标按键时
注意：单击鼠标左键，会发生3个事件，onMouseDown,onMouseUp,onClick。

观察鼠标点击超链接时，触发的对象：
Html代码
1. <html>
2.     <head><title>Simple jsp page</title></head>
3.     <body>
4.     <h2><a href="#" id="testlink">Test Link</a></h2>
5.     <form name="form1">
6.              <textarea rows="10" cols="70" name="info"></textarea>
7.     </form>
8.     <script type="text/javascript" language="JavaScript" src="click.js"></script>
9.     </body>
10. </html>

Js代码
1. function mousestatus(e){
2.              if(!e) e=window.event;
3.              btn = e.button;
4.                  whichone = (btn<2)?"left":"right";
5.              message=e.type+":"+whichone+"/n";
6.                 document.form1.info.value+=message;
7.             }
8.         obj = document.getElementById("testlink");
9.         obj.onmousedown = mousestatus;
10.         obj.onmouseup = mousestatus;
11.         obj.onclick = mousestatus;
12.         obj.ondblclick = mousestatus;

11.JavaScript中使用键盘事件
可以通过event知道用户按下的是哪个键，它会在事件发生时被传递到事件处理函数，其中Firefox中存在event.which中，而IE存在event.keyCode中
如果想处理实际的字符而非键码,可以使用函数转换
如：Key = String.fromCharCode(event.which);
因为两种浏览器支持的不同，所以要写成通用的，可以这样写:
Js代码
1. function DisplayKey(e){
2. if(e.keyCode) keycode =e. keyCode;
3. else keycode = e.which;
4. chacater = String.fromCharCode(keycode);
5. k = document.getElementById(“keys”);
6. k.innerHTML += chacater;
7. }

初次看到innerHTML就是在这里，以前做网站的时候，也用过，但是不知道这是什么意思，现在自己学习，终于又碰上了，innerHTML代表某dom对象中HTML元素从开始标签直到结束标签中的HTML文档。程序中的keys就是dom文档的id，在JSP中，有类似这样一段代码：
Html代码
1. <p id = “keys”></p>
innerHTML就代表p元素所要显示的HTML文档的内容

12.JavaScript中的onLoad和onUnload
当前页面（包括所有图像）完成从服务器上的加载时，就会发生onLoad
由于onLoad事件发生在HTML文档加载和显示完毕之后,所以不能在onLoad事件处理程序中使用document.write或document.open，否则会覆盖当前文档。
下面是一个一放到超链接，就显示名字的小例子
HTML代码如下
Html代码
1. <ul>
2. <li><a href="order.html" id="order">Order Form</a>
3. <li><a href="email.html" id="email">Email</a>
4. <li><a href="complain.html" id="complain">Complaint Department</a>
5. </ul>
6. <h2 id="description"></h2>
7. <script language="JavaScript" type="text/javascript" src="linkdesc.js">
8. </script>

Js代码
1. linkdesc.js
2. function cleardesc() {
3.    d = document.getElementById("description");
4.      d.innerHTML = "";
5. }
6. function hover(e) {
7.     if (!e) var e = window.event;
8.     // which link was the mouse over?
9.     whichlink = (e.target) ? e.target.id : e.srcElement.id;
10.     // choose the appropriate description
11.     if (whichlink=="order") desc = "Order a product";
12.     else if (whichlink=="email") desc = "Send us a message";
13.     else if (whichlink=="complain") desc = "Insult us, our products, or our families";
14.     // display the description in the H2
15.     d = document.getElementById("description");
16.     d.innerHTML = desc;
17. }
18.
19. orderlink = document.getElementById("order");
20. orderlink.οnmοuseοver=hover;
21. orderlink.οnmοuseοut=cleardesc;
22. emaillink = document.getElementById("email");
23. emaillink.οnmοuseοver=hover;
24. emaillink.οnmοuseοut=cleardesc;
25. complainlink = document.getElementById("complain");
26. complainlink.οnmοuseοver=hover;
27. complainlink.οnmοuseοut=cleardesc;

其中e.target代表元素所对应的对象，e.target.id代表对象的DOM对象的id.
如果同时定义了onKeyDown和onKeyPress事件处理函数,则先调用onKeyDown，如果返回true，则再调用onKeyPress

13.JavaScript中的window对象

Window对象的属性
closed 窗口是否关闭
defaultStatus 窗口状态栏的默认文本
document Document对象
history History对象
length Window对象的frame个数
location Location对象
name Window对象的名称
opener 打开当前Window的窗口的引用
parent 父窗口
self 返回当前窗口的引用
status 窗口状态栏文本
top 最顶层窗口

Window对象的方法
alert([Message]) 显示带有警告信息Message的窗口，并有“确定”按钮
blur() 移除本窗口的焦点
clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件
clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件
close() 关闭当前窗口
confirm([message]) 显示带有确认信息message的窗口，有“确定”和“取消”按钮
createPopup() 创建弹出窗口，返回该窗口对象的引用
focus() 使本窗口获得焦点
moveBy(x,y) 将窗口的位置移动到指定的x和y偏移值
moveTo(x,y) 将窗口左上角的屏幕位置移动到指定的x和y位置
open() 打开新窗口，显示指定的页面
print() 打印与窗口关联的文档
prompt([message][,defaultValue]) 显示提示对话框，带有提示消息message和默认值defaultValue的输入框，返回用户输入的字符串
resizeBy(x,y) 更改窗口的当前位置缩放指定的x和y偏移量
resizeTo(x,y) 将窗口的大小更改为指定的宽度值x和高度值y
scrollBy(x,y) 将窗口滚动x和y偏移量
scrollTo(x,y) 将窗口滚动到指定的x和y偏移量
setInterval(code,ms[,language]) 每经过ms毫秒后执行代码code,language指定语言属性。返回整形标识,以便clearInterval方法取消该定时器
setTimeout(code,ms[,language]) 经过ms毫秒后执行代码code,language指定语言属性。返回整形标识，以便clearTimeout方法取消该定时器

14.JavaScript中利用表单获取数据
Javascript form对象
name 返回表单的名称，也就是<form name="...">属性。
action 返回/设定表单的提交地址，也就是<form action="...">属性。
method 返回/设定表单的提交方法，也就是<form method="...">属性。
target 返回/设定表单提交后返回的窗口，也就是<form target="...">属性。
encoding 返回/设定表单提交内容的编码方式，也就是<form enctype="...">属性。
length 返回该表单所含元素的数目。
方法
reset() 重置表单。这与按下“重置”按钮是一样的。
submit() 提交表单。这与按下“提交”按钮是一样的。
事件
onreset; onsubmit

Javascript button对象
Button 按钮对象由“<input type="button">”指定。引用一个 Button 对象，可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在<input>标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。
事件
onclick; onmousedown; onmouseup

Javascript checkbox对象
Checkbox 复选框对象由“<input type="checkbox">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。
事件
onclick

Javascript elements对象
elements[]; Element 表单元素对象 <表单对象>.elements 是一个数组，包含了该表单所有的对象。一般我们不用该数组，而直接引用各个具体的对象。
Hidden 隐藏对象由“<input type="hidden">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。

Javascript Password对象
Password 密码输入区对象由“<input type="password">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定密码输入区当前的值。
defaultValue 返回用<input value="...">指定的默认值。
form 返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
select() 选中密码输入区里全部文本。
事件
onchange

Javascript Radio对象
Radio 单选域对象由“<input type="radio">”指定。一组 Radio 对象有共同的名称（name 属性），这样的话，document.formName.radioName 就成了一个数组。要访问单个 Radio 对象就要用：document.formName.radioName[x]。
单个 Radio 对象的属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该单选域对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。
事件
onclick

Javascript Reset对象
Reset 重置按钮对象由“<input type="reset">”指定。因为 Reset 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onreset 代替。
Select 选择区（下拉菜单、列表）对象由“<select>”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
length 返回 Select 对象下选项的数目。
selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
form 返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
事件
onchange

Javascript options对象
options[]; Option 选择项对象 options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“<select>”下的“<options>”指定。
options[] 数组的属性
length; selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value 返回/指定 Option 对象的值，与<options value="...">一致。
index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
defaultSelected 返回该对象默认是否被选中。true / false。

Submit 提交按钮对象由“<input type="submit">指定。因为 Submit 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onsubmit 代替。
Text 文本框对象由“<input type="text">”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。
Textarea 多行文本输入区对象由“<textarea>”指定。Textarea 对象所有的属性、方法和事件和 Text 对象相同，也就是跟 Password 对象一样
images[]; Image 图片对象 document.images[] 是一个数组，包含了文档中所有的图片（<img>）。要引用单个图片，可以用 document.images[x]。如果某图片包含“name”属性，也就是用“<img name="...">”这种格式定义了一幅图片，就可以使用“document.images['...']”这种方法来引用图片。在 IE 中，如果某图片包含 ID 属性，也就是用“<img id="...">”这种格式定义了一幅图片，就可以直接使用“<imageID>”来引用图片。
单个 Image 对象的属性
name; src; lowsrc; width; height; vspace; hspace; border 这些属性跟<img>标记里的同名属性是一样的。在 Netscape 里，除了 src 属性，其它属性（几乎全部）都不能改的，即使改了，在文档中也不能显示出效果来。这些属性最有用的就是 src 了，通过对 src 属性赋值，可以实时的更改图片。
事件
onclick

15.W3C DOM
访问DOM中的节点
parentNode( ).这个方法可以访问父节点。
firstChild( ).这个方法可以访问该节点的第一个子节点，不存在就返回空。
nextSibling( ). 这个方法可以访问下一个兄弟节点，不存在就返回空。
previousSibling( ). 这个方法可以访问上一个兄弟节点，不存在就返回空。
文档方法
getElementsByTagName(elementname):取得一个在文件或是某一部分文件中具有这
个名字的所有元素的列表；创建了这样的NodeList,就可以通过索引来访问这些命
名了的节点了。
createElement( )方法：将新元素的标记名做为参数，所创建的元素对象可以接
受属性及取值。
createDocumentFragment( )方法：创建一个documentFragment节点。
createTextNode( )、createComment( )和createCDATASection( )方法：创建如它们
名字所示的节点，它们的参数将成为节点内容的字符串。
节点的方法
insertBefore( )方法：将新的子节点插入到引用子节点并返回new_node:
dummy = node_object.insertBefore(new_node,reference_node)
这时dummy包含被插入的节点的一个副本。
replaceChild( )方法：替换子节点并返回被替换的节点
dummy = node_object.replaceChild(new_node,reference_node)
这时dummy包含被插入的节点的一个副本。
removeChild( )方法：删除被引用的子节点并返回被删除的节点
dummy = node_object.removeChild(reference_node)
这时dummy包含被删除的节点的部分。
appendChild( )方法：将新节点加入到其他子节点的后面并返回新节点
dummy = node_object.appendChild(new_node)
这时dummy包含新节点的一个副本。
hasChildNodes( )方法：返回一个布尔值，它是给定节点是否有子节点的测试结果。
cloneNode( )方法：建立被Clone节点的一个副本，用true和false做为参数
True：除Clone元素本身外，还Clone它的所有内容
False：仅Clone元素本身。
Clone的节点是一个孤儿。
显示和隐藏对象
Object.style.visibility = “hidden”;
Object.style.visibility = “visible”;
显示和隐藏对象的例子
Js代码
1. <script language="Javascript" type="text/javascript">
2. function ShowHide() {
3. if (!document.getElementById) return;
4.    var head1 = document.getElementById("head1");
5.    var head2 = document.getElementById("head2");
6.    var showhead1 = document.form1.head1.checked;
7.    var showhead2 = document.form1.head2.checked;
8.    head1.style.visibility=(showhead1) ? "visible" : "hidden";
9.    head2.style.visibility=(showhead2) ? "visible" : "hidden";
10. }
11. </script>
12. </head>

<body>
Html代码
1. <h1 ID="head1">This is the first heading</h1>
2. <h1 ID="head2">This is the second heading</h1>
3. <p>Using the W3C DOM, you can choose
4. whether to show or hide the headings on
5. this page using the checkboxes below.</p>
6. <form name="form1">
7. <input type="checkbox" name="head1"
8.    checked onClick="ShowHide();">
9. <b>Show first heading</b><br>
10. <input type="checkbox" name="head2"
11.    checked onClick="ShowHide();">
12. <b>Show second heading</b><br>
13. </form>

在页面中修改文本的例子
Js代码
1. <script language="Javascript" type="text/javascript">
2. function ChangeTitle() {
3.    if (!document.getElementById) return;
4.   var newtitle = document.form1.newtitle.value;
5.    var head1 = document.getElementById("head1");
6.    head1.firstChild.nodeValue=newtitle;
7. }
8. </script>

</head>
<body>
Html代码
1. <h1 ID="head1">Dynamic Text in JavaScript</h1>
2. <p>Using the W3C DOM, you can dynamically
3. change the heading at the top of this
4. page. Enter a new title and click the
5. Change button.</p>
6. <form name="form1">
7. <input type="text" name="newtitle" size="25">
8. <input type="button" value="Change!"
9.   onClick="ChangeTitle();">
10. </form>

为页面中添加文本的例子
Html代码
1. <title>Adding to a page</title>
2. <script language="Javascript" type="text/javascript">
3. function AddText() {
4.    if (!document.getElementById) return;
5.    var sentence=document.form1.sentence.value;
6.    var node=document.createTextNode(" " + sentence);
7.    document.getElementById("p1").appendChild(node);
8.    document.form1.sentence.value="";
9. }
10. </script>
11. </head>
12. <body>
13. <h1>Create Your Own Content</h1>
14. <p ID="p1">Using the W3C DOM, you can dynamically
15. add sentences to this paragraph. Type a sentence
16. and click the Add button.</p><form name="form1">
17. <input type="text" name="sentence" size="65">
18. <input type="button" value="Add" onClick="AddText();">
19. </form>

创建导航树的小例子
Html代码
1. <html>
2. <head><title>Creating a Navigation Tree</title>
3. <style>
4.    A {text-decoration: none;}
5.    #productsmenu,#supportmenu,#contactmenu {
6.      display: none;
7.      margin-left: 2em;
8.    }
9. </style>
10. </head>
11. <body>
12. <h1>Navigation Tree Example</h1>
13. <p>The navigation tree below allows you to expand and
14. collapse items.</p>
15. <ul>
16. <li><a id="products" href="#">[+] Products</a>
17.    <ul ID="productsmenu">
18.       <li><a href="prodlist.html">Product List</a></li>      <li><a href="order.html">Order Form</a></li>
19.       <li><a href="pricelist.html">Price List</a></li>
20.    </ul>
21. </li>
22. <li><a id="support" href="#">[+] Support</a>
23.    <ul id="supportmenu">
24.       <li><a href="scontact.html">Contact Support</a></li>
25.    </ul>
26. </li>
27. <li><a ID="contact" href="#">[+] Contact Us</a>
28.    <ul id="contactmenu">
29.       <li><a href="contact1.html">Service Department</a></li>
30.       <li><a href="contact2.html">Sales Department</a></li>
31.    </ul>
32. </li>
33. </ul>
34. <script language="javascript" type="text/javascript"
35.    src="tree.js">
36. </script>
37. </body>
38. </html>

Js代码
1. function Toggle(e) {
2.    // Don't try this in old browsers
3.    if (!document.getElementById) return;
4.    // Get the event object
5.    if (!e) var e = window.event;
6.    // Which link was clicked?
7.    whichlink = (e.target) ? e.target.id : e.srcElement.id;
8.    // get the menu object
9. obj=document.getElementById(whichlink+"menu");
10. // Is the menu visible?   visible=(obj.style.display=="block")
11.    // Get the key object (the link itself)
12.    key=document.getElementById(whichlink);
13.    // Get the name (Products, Contact, etc.)
14. keyname = key.firstChild.nodeValue.substring(3);
15.   if (visible) {     // hide the menu
16.      obj.style.display="none";
17.      key.firstChild.nodeValue = "[+]" + keyname;
18.    } else {
19.      // show the menu
20.      obj.style.display="block";
21.      key.firstChild.nodeValue = "[-]" + keyname;
22.    }
23. }
24. document.getElementById("products").οnclick=Toggle;
25. document.getElementById("support").οnclick=Toggle;
26. document.getElementById("contact").οnclick=Toggle;

16.通用的ajax库
Js代码
1. var ajaxreq=false, ajaxCallback;
2. // ajaxRequest: Sets up a request
3. function ajaxRequest(filename) {
4.    try {
5.     // Firefox / IE7 / Others
6.     ajaxreq= new XMLHttpRequest();
7.    } catch (error) {
8.     try {
9.       // IE 5 / IE 6
10.       ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");
11.     } catch (error) {
12.       return false;
13.     }
14.    }
15.    ajaxreq.open("GET",filename);
16.    ajaxreq.onreadystatechange = ajaxResponse;
17.    ajaxreq.send(null);
18. }
19. // ajaxResponse: Waits for response and calls a function
20. function ajaxResponse() {
21.    if (ajaxreq.readyState !=4) return;
22.    if (ajaxreq.status==200) {
23.       // if the request succeeded...
24.       if (ajaxCallback) ajaxCallback();
25.    } else alert("Request failed: " + ajaxreq.statusText);
26.    return true;
27. }

ajax的小例子
Html代码
1. <html>
2. <head><title>Ajax Test</title>
3. <script language="JavaScript" type="text/javascript"
4.    src="ajax.js">
5. </script>
6. </head>
7. <body>
8. <h1>Ajax Quiz Example</h1>
9. <form>
10. <p><b>Question:</b>
11. <span id="question">...
12. </span>
13. </p>
14. <p><b>Answer:</b>
15. <input type="text" name="answer" id="answer">
16. <input type="button" value="Submit" id="submit">
17. </p>
18. <input type="button" value="Start the Quiz" id="startq">
19. </form>
20. <script language="JavaScript" type="text/javascript"
21.    src="quiz.js">
22. </script>
23. </body>
24. </html>

Xml 代码
1. <?xml version="1.0" ?>
2. <questions>
3.     <q>What DOM object contains URL information for the window?</q>
4.     <a>location</a>
5.     <q>Which method of the document object finds the object for an element?</q>
6.     <a>getElementById</a>
7.     <q>If you declare a variable outside a function, is it global or local?</q>
8.     <a>global</a>
9.     <q>What is the formal standard for the JavaScript language called?</q>
10.     <a>ECMAScript</a>
11. </questions>

Js代码
1. var qn=0;
2. // load the questions from the XML file
3. function getQuestions() {
4.    obj=document.getElementById("question");
5.    obj.firstChild.nodeValue="(please wait)";
6.    ajaxCallback = nextQuestion;
7.    ajaxRequest("questions.xml");
8. }
9. // display the next question
10. function nextQuestion() {
11.    questions = ajaxreq.responseXML.getElementsByTagName("q");
12.    obj=document.getElementById("question");
13.    if (qn < questions.length) {
14.       q = questions[qn].firstChild.nodeValue;
15.       obj.firstChild.nodeValue=q;
16.    } else {
17.       obj.firstChild.nodeValue="(no more questions)";
18.    }
19. }
20. // check the user's answer
21. function checkAnswer() {
22.    answers = ajaxreq.responseXML.getElementsByTagName("a");
23.    a = answers[qn].firstChild.nodeValue;
24.    answerfield = document.getElementById("answer");
25.    if (a == answerfield.value) {
26.       alert("Correct!");
27.    }
28.    else {
29.       alert("Incorrect. The correct answer is: " + a);
30.    }
31.    qn = qn + 1;
32.    answerfield.value="";
33.    nextQuestion();
34. }
35. // Set up the event handlers for the buttons
36. obj=document.getElementById("startq");
37. obj.οnclick=getQuestions;
38. ans=document.getElementById("submit");
39. ans.οnclick=checkAnswer;