javascript学习总结

javascript 学习总结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.getElem entById("name"),这种是 w3c 组织制定的一级 DOM 对象标准。 (3)自定义对象 我总认为 js 的自定义对象没必要用,如果你是按照面向对象的编程思想,那么应该用 Jav a,而不是用 js 的对象。 2.DOM 对象,history 以及 location 为了操控浏览器和文档,js 使用分层的父对象和子对象,这就是 DOM。这些对象的组织类 似一个树形结构,并表示一个 Web 文档的所有内容组件。 Window 是所有对象的父对象document 对象几种常用方法 document.URL:指明了文档的 URL 地址。不可改变,如果需要给用户不同的地址应该用 window.location 对象 document.write:列出了当前页面的标题 document.referrer:用户所浏览的上一个页面的 URL 地址。 document.lastModified:文档最后修改日期 document.cookie 允许读取和设置一个文档的 cookiehistory 对象的几种常用方法 history.length();保存了历史列表的长度 history.go();打开历史列表中一个网址,要指定一个正数或者负数。 history.back();历史列表中的前一个网址,相当于后退按钮。 historay.forward();历史列表中的后一个网址,相当于后退按钮。 location 对象的几种常用方法 location.protocol:网址的协议部分---http location.hostname:网址的主机名--- 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>部分语句会首先执行。 函数中可以带有参数列表,但是参数都没有类型,也不需要在定义函数的时候声明返回值

history.length();保存了历史列表的长度

history.go();打开历史列表中一个网址,要指定一个正数或者负数。

history.back();历史列表中的前一个网址,相当于后退按钮。

historay.forward();历史列表中的后一个网址,相当于后退按钮。

location对象的几种常用方法

location.protocol:网址的协议部分---http

location.hostname:网址的主机名---

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="" onclick="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.onmouseover=hover;

21. orderlink.onmouseout=cleardesc;

22. emaillink = document.getElementById("email");

23. emaillink.onmouseover=hover;

24. emaillink.onmouseout=cleardesc;

25. complainlink = document.getElementById("complain");

26. complainlink.onmouseover=hover;

27. complainlink.onmouseout=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> ="order.html">Order Form</a></li>

19. <li><a href="pricelist.html">Price List</a></li>

20. </ul> <li><a href

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").onclick=Toggle;

25. document.getElementById("support").onclick=Toggle;

26. document.getElementById("contact").onclick=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.onclick=getQuestions;

38. ans=document.getElementById("submit");

39. ans.onclick=checkAnswer;

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.onclick=getQuestions;

38. ans=document.getElementById("submit");

39. ans.onclick=checkAnswer;

相关推荐