最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 正文

javascript学习总结

来源:动视网 责编:小OO 时间:2025-09-24 05:48:59
文档

javascript学习总结

javascript学习总结1.JavaScript中的对象分为3种。(1)JavaScript的内置对象常用的有Date,Array,String,Math,对象,这些都是经常会用到的,一定要掌握好。(2)文档对象模型(DocumentObjectModel,DOM)这个对象表示了当前浏览器的多个组件和当前的HTML文档。DOM我认为是JS中最重要的一个对象,通过他可以获得任何一个HTML元素,1.通过document.form1.name得到,这种是浏览器支持的dom对象,不属于js,2.
推荐度:
导读javascript学习总结1.JavaScript中的对象分为3种。(1)JavaScript的内置对象常用的有Date,Array,String,Math,对象,这些都是经常会用到的,一定要掌握好。(2)文档对象模型(DocumentObjectModel,DOM)这个对象表示了当前浏览器的多个组件和当前的HTML文档。DOM我认为是JS中最重要的一个对象,通过他可以获得任何一个HTML元素,1.通过document.form1.name得到,这种是浏览器支持的dom对象,不属于js,2.
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.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中的函数 

函数定义的最佳位置是文档中的部分,因为部分语句会首先执行。 

函数中可以带有参数列表,但是参数都没有类型,也不需要在定义函数的时候声明返回值,想有返回值的话,直接return即可,和Java不同。 

如:

Js代码 

1. function greet(who){  

2.                 alert(“Gadsden” + who);  

3.                 return “asdasd”;  

4.             }  

5.JavaScript中的对象 

他和Java中的对象很相似,之前我曾说不需要用到他,用Java的就够了,昨天看了一个人的文章,说你要想用好一门语言,就要尊重这门语言,就像现在的JavaScript,如果简单的把他当做一门脚本语言,那可能只能停留在入门和初级阶段。 

如何扩展内置对象 

使用prototype关键字,可以向现有对象中添加属性和方法。 

例如:  

Js代码 

1.  

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

6.JavaScript中的Data Math等内置对象 

他们与Java中的又是很相似,不多介绍了,有一个关键字需要说说,就是with。 

with关键字制定一个对象,后面跟着括在大括号中的一大块语句。对于块语句中的每一条语句,没有指定对象的属性都将被假定为该对象的属性。 

如: 

Js代码 

1.  

注:这里不用在定义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.  

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. Click here 

5.onDblClick: 鼠标按键何时被双击 

6.onMouseDown:按鼠标按键时 

7.onMouseUp:松开鼠标按键时 

注意:单击鼠标左键,会发生3个事件,onMouseDown,onMouseUp,onClick。 

观察鼠标点击超链接时,触发的对象: 

Html代码 

1.  

2.     Simple jsp page 

3.      

4.    

Test Link

 

5.    

 

6.               

7.    

 

8.      

9.      

10.  

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.  

innerHTML就代表p元素所要显示的HTML文档的内容

12.JavaScript中的onLoad和onUnload 

当前页面(包括所有图像)完成从服务器上的加载时,就会发生onLoad 

由于onLoad事件发生在HTML文档加载和显示完毕之后,所以不能在onLoad事件处理程序中使用document.write或document.open,否则会覆盖当前文档。 

下面是一个一放到超链接,就显示名字的小例子 

HTML代码如下 

Html代码 

1. 

 

6. 

 

7.  

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 返回表单的名称,也就是

属性。 

action 返回/设定表单的提交地址,也就是属性。 

method 返回/设定表单的提交方法,也就是属性。 

target 返回/设定表单提交后返回的窗口,也就是属性。 

encoding 返回/设定表单提交内容的编码方式,也就是属性。 

length 返回该表单所含元素的数目。 

方法 

reset() 重置表单。这与按下“重置”按钮是一样的。 

submit() 提交表单。这与按下“提交”按钮是一样的。 

事件 

onreset; onsubmit 

Javascript  button对象 

Button 按钮对象 由“”指定。引用一个 Button 对象,可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指 在标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。 

属性 

name 返回/设定用指定的元素名称。 

value 返回/设定用指定的元素的值。 

form 返回包含本元素的表单对象。 

方法 

blur() 从对象中移走焦点。 

focus() 让对象获得焦点。 

click() 模拟鼠标点击该对象。 

事件 

onclick; onmousedown; onmouseup 

Javascript  checkbox对象 

Checkbox 复选框对象 由“”指定。 

属性 

name 返回/设定用指定的元素名称。 

value 返回/设定用指定的元素的值。 

form 返回包含本元素的表单对象。 

checked 返回/设定该复选框对象是否被选中。这是一个布尔值。 

defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。 

方法 

blur() 从对象中移走焦点。 

focus() 让对象获得焦点。 

click() 模拟鼠标点击该对象。 

事件 

onclick 

Javascript  elements对象 

elements[]; Element 表单元素对象 <表单对象>.elements 是一个数组,包含了该表单所有的对象。一般我们不用该数组,而直接引用各个具体的对象。 

Hidden 隐藏对象 由“”指定。 

属性 

name 返回/设定用指定的元素名称。 

value 返回/设定用指定的元素的值。 

form 返回包含本元素的表单对象。 

Javascript  Password对象 

Password 密码输入区对象 由“”指定。 

属性 

name 返回/设定用指定的元素名称。 

value 返回/设定密码输入区当前的值。 

defaultValue 返回用指定的默认值。 

form 返回包含本元素的表单对象。 

方法 

blur() 从对象中移走焦点。 

focus() 让对象获得焦点。 

select() 选中密码输入区里全部文本。 

事件 

onchange 

Javascript  Radio对象 

Radio 单选域对象 由“”指定。一组 Radio 对象有共同的名称(name 属性),这样的话,document.formName.radioName 就成了一个数组。要访问单个 Radio 对象就要用:document.formName.radioName[x]。 

单个 Radio 对象的属性 

name 返回/设定用指定的元素名称。 

value 返回/设定用指定的元素的值。 

form 返回包含本元素的表单对象。 

checked 返回/设定该单选域对象是否被选中。这是一个布尔值。 

defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。 

方法 

blur() 从对象中移走焦点。 

focus() 让对象获得焦点。 

click() 模拟鼠标点击该对象。 

事件 

onclick 

Javascript  Reset对象 

Reset 重置按钮对象 由“”指定。因为 Reset 也是按钮,所以也有 Button 对象的属性和方法。至于“onclick”事件,一般用 Form 对象的 onreset 代替。 

Select 选择区(下拉菜单、列表)对象 由“指定的元素名称。 

length 返回 Select 对象下选项的数目。 

selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择,则返回第一个被选中的选项的下标。 

form 返回包含本元素的表单对象。 

方法 

blur() 从对象中移走焦点。 

focus() 让对象获得焦点。 

事件 

onchange 

Javascript  options对象 

options[]; Option 选择项对象 options[] 是一个数组,包含了在同一个 Select 对象下的 Option 对象。Option 对象由“指定。因为 Submit 也是按钮,所以也有 Button 对象的属性和方法。至于“onclick”事件,一般用 Form 对象的 onsubmit 代替。 

Text 文本框对象 由“”指定。Password 对象也是 Text 对象的一种,所以 Password 对象所有的属性、方法和事件,Text 对象都有。 

Textarea 多行文本输入区对象 由“