《javascript学习总结.docx》由会员分享，可在线阅读，更多相关《javascript学习总结.docx（30页珍藏版）》请在三一办公上搜索。
1、javascript学习总结javascript学习总结 1.JavaScript中的对象 分为3种。 JavaScript的内置对象 常用的有Date,Array,String,Math,对象,这些都是经常会用到的，一定要掌握好。 文档对象模型(Document Object Model,DOM) 这个对象表示了当前浏览器的多个组件和当前的HTML文档。DOM我认为是JS中最重要的一个对象，通过他可以获得任何一个HTML元素，1.通过document.form1.name得到，这种是浏览器支持的dom对象，不属于js，2.咱们经常用的是document.getElementById(name
2、),这种是w3c组织制定的一级DOM对象标准。 自定义对象 我总认为js的自定义对象没必要用，如果你是按照面向对象的编程思想，那么应该用Java，而不是用js的对象。 2.DOM对象,history以及location 为了操控浏览器和文档，js使用分层的父对象和子对象，这就是DOM。这些对象的组织类似一个树形结构，并表示一个Web文档的所有内容组件。 Window是所有对象的父对象 document对象几种常用方法 document.URL：指明了文档的URL地址。不可改变，如果需要给用户不同的地址应该用window.location对象 document.write:列出了当前页面的标题
3、document.referrer:用户所浏览的上一个页面的URL地址。 document.lastModified：文档最后修改日期 document.cookie 允许读取和设置一个文档的cookie history对象的几种常用方法 history.length;保存了历史列表的长度 history.go;打开历史列表中一个网址，要指定一个正数或者负数。 history.back;历史列表中的前一个网址，相当于后退按钮。 historay.forward;历史列表中的后一个网址，相当于后退按钮。 location对象的几种常用方法 location.protocol:网址的协议部分-ht
4、tp 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中差别不大，就不多加叙述了 数据类型
5、1.数字：整数，浮点数 2.布尔值：真，假。 3.字符型：字符串对象 4.空值，null。 parseInt-将一个字符串转换为整数值。 parseFloat-将一个字符串转换为浮点小数 字符串中有一些常用的方法，如subString,charAt等，与Java中的很像，就不叙述了 4.JavaScript中的函数 函数定义的最佳位置是文档中的部分，因为部分语句会首先执行。 函数中可以带有参数列表，但是参数都没有类型，也不需要在定义函数的时候声明返回值，想有返回值的话，直接return即可，和Java不同。 如： Js代码 1. function greet(who) 2. alert(“Ga
6、dsden” + who); 3. return “asdasd”; 4. 5.JavaScript中的对象 他和Java中的对象很相似，之前我曾说不需要用到他，用Java的就够了，昨天看了一个人的文章，说你要想用好一门语言，就要尊重这门语言，就像现在的JavaScript，如果简单的把他当做一门脚本语言，那可能只能停留在入门和初级阶段。 如何扩展内置对象 使用prototype关键字，可以向现有对象中添加属性和方法。 例如： Js代码 1. 2. function addHead(level) 3. html = H + level; 4. text = this.toString; 5.
7、start = ; 6. end = ; 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. 这样就为String对象又新增添了一个方法，heading，并指明每次调用heading的时候，他都会去调用addHead方法。
8、6.JavaScript中的Data Math等内置对象 他们与Java中的又是很相似，不多介绍了，有一个关键字需要说说，就是with。 with关键字制定一个对象，后面跟着括在大括号中的一大块语句。对于块语句中的每一条语句，没有指定对象的属性都将被假定为该对象的属性。 如： Js代码 1. 2. a = niechao; 3. with(a) 4. window.alert(长度是+ length) 5. document.write(toUpperCase); 6. 7. 注:这里不用在定义a的时候带有类型信息，如String a = “niechao”;这样会报错，如果非要加上，也只能是
9、var a = “niechao”; 7.JavaScript中使用第三方程序库 每个程序库都有自己的名字，一般的名字是xxx.js，包含到你要用的jsp页面里就行了。 现在流行的有几种，比如：ext,jquery,dojo等，老一辈的也有prototype这些。选一种合适自己的就行了，自己用着顺手的，可以满足项目需要的，我暂时选的而是jquery。 8.JavaScript中 的事件相应 不必使用标签来定义事件处理函数 可以不在HTML中指定时间处理函数，而是使用JavaScript把一个函数指定为事件处理函数 1.首先找到元素的对象，使用obj = document.getElementB
10、yId(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对象中。
11、所以很多函数的开头，一般都是 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:该标志表示事件发
12、生时是否按下Alt键 5.event.ctrlkey:该标志表示事件发生时是否按下Ctrl键 6.event.shiftkey:该标志表示事件发生时是否按下Shift键 7.event.keyCode：所按键的键码 8.event.srcElement:元素出现的对象 以下是Netscape4.0及更高版本的一些常用event对象属性 1.event.modifiers:表示事件发生时按下了哪一个修饰键(Shift,Ctrl,Alt)。该属性是一个整数，表示不同键的2进制的组合 2.event.pageX:事件在网页中x轴坐标 3.event.pageY:事件在网页中y轴坐标 4.event.
13、which:键盘事件键码，或者鼠标事件按下的键 5.event.button:按下的鼠标按键，其原理与IE一样，只是左键的属性值为0，右键为2 6.event.target:元素出现的对象 10.JavaScript中使用鼠标事件 鼠标事件中的几个函数(他们都属于document对象) 1.onMouseOver:鼠标指针移动到链接上时被调用 2.onMouseOut:鼠标移出对象边缘时被调用 3.onMouseMove:只要鼠标移动，就会触发(浏览器在，默认情况下不支持，需要使用事件捕捉技术) 4.onClick:鼠标按键何时被单击，如果onClick事件处理程序返回false，则链接不会被
14、打开 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. wh
15、ichone = (btn2)?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中使用键盘事件 可
16、以通过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.from
17、CharCode(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和onUnl
18、oad 当前页面完成从服务器上的加载时，就会发生onLoad 由于onLoad事件发生在HTML文档加载和显示完毕之后,所以不能在onLoad事件处理程序中使用document.write或document.open，否则会覆盖当前文档。 下面是一个一放到超链接，就显示名字的小例子 HTML代码如下 Html代码 1. 2. Order Form 3. Email 4. Complaint Department 5. 6. 7. 8. Js代码 1. linkdesc.js 2. function cleardesc 3. d = document.getElementById(descrip
19、tion); 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) de
20、sc = 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=ho
21、ver; 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代表元
22、素所对应的对象，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的窗口
23、的引用 parent 父窗口 self 返回当前窗口的引用 status 窗口状态栏文本 top 最顶层窗口 Window对象的方法 alert(Message) 显示带有警告信息Message的窗口，并有“确定”按钮 blur 移除本窗口的焦点 clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件 clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件 close 关闭当前窗口 confirm(message) 显示带有确认信息messag
24、e的窗口，有“确定”和“取消”按钮 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) 将窗口的
25、大小更改为指定的宽度值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对象 na
26、me 返回表单的名称，也就是属性。 action 返回/设定表单的提交地址，也就是属性。 method 返回/设定表单的提交方法，也就是属性。 target 返回/设定表单提交后返回的窗口，也就是属性。 encoding 返回/设定表单提交内容的编码方式，也就是属性。 length 返回该表单所含元素的数目。 方法 reset 重置表单。这与按下“重置”按钮是一样的。 submit 提交表单。这与按下“提交”按钮是一样的。 事件 onreset; onsubmit Javascript button对象 Button 按钮对象 由“”指定。引用一个 Button 对象，可以使用“.”。指 在标
27、记中的“name=.”属性的值。引用任意表单元素都可以用这种方法。 属性 name 返回/设定用指定的元素名称。 value 返回/设定用指定的元素的值。 form 返回包含本元素的表单对象。 方法 blur 从对象中移走焦点。 focus 让对象获得焦点。 click 模拟鼠标点击该对象。 事件 onclick; onmousedown; onmouseup Javascript checkbox对象 Checkbox 复选框对象 由“”指定。 属性 name 返回/设定用指定的元素名称。 value 返回/设定用指定的元素的值。 form 返回包含本元素的表单对象。 checked 返回/
28、设定该复选框对象是否被选中。这是一个布尔值。 defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。 方法 blur 从对象中移走焦点。 focus 让对象获得焦点。 click 模拟鼠标点击该对象。 事件 onclick Javascript elements对象 elements; Element 表单元素对象 .elements 是一个数组，包含了该表单所有的对象。一般我们不用该数组，而直接引用各个具体的对象。 Hidden 隐藏对象 由“”指定。 属性 name 返回/设定用指定的元素名称。 value 返回/设定用指定的元素的值。 form 返回包含本元
29、素的表单对象。 Javascript Password对象 Password 密码输入区对象 由“”指定。 属性 name 返回/设定用指定的元素名称。 value 返回/设定密码输入区当前的值。 defaultValue 返回用指定的默认值。 form 返回包含本元素的表单对象。 方法 blur 从对象中移走焦点。 focus 让对象获得焦点。 select 选中密码输入区里全部文本。 事件 onchange Javascript Radio对象 Radio 单选域对象 由“”指定。一组 Radio 对象有共同的名称，这样的话，document.formName.radioName 就成了一
30、个数组。要访问单个 Radio 对象就要用：document.formName.radioNamex。 单个 Radio 对象的属性 name 返回/设定用指定的元素名称。 value 返回/设定用指定的元素的值。 form 返回包含本元素的表单对象。 checked 返回/设定该单选域对象是否被选中。这是一个布尔值。 defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。 方法 blur 从对象中移走焦点。 focus 让对象获得焦点。 click 模拟鼠标点击该对象。 事件 onclick Javascript Reset对象 Reset 重置按钮对象 由“”指定。
31、因为 Reset 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onreset 代替。 Select 选择区对象 由“”指定。 属性 name 返回/设定用指定的元素名称。 length 返回 Select 对象下选项的数目。 selectedIndex 返回被选中的选项的下标。这个下标就是在 options 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。 form 返回包含本元素的表单对象。 方法 blur 从对象中移走焦点。 focus 让对象获得焦点。 事件 onchange Java
32、script options对象 options; Option 选择项对象 options 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“”下的“”指定。 options 数组的属性 length; selectedIndex 与所属 Select 对象的同名属性相同。 单个 Option 对象的属性 text 返回/指定 Option 对象所显示的文本 value 返回/指定 Option 对象的值，与一致。 index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这
33、个属性好像没有什么用。 selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。 defaultSelected 返回该对象默认是否被选中。true / false。 Submit 提交按钮对象 由“指定。因为 Submit 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onsubmit 代替。 Text 文本框对象 由“”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。 Textarea 多行文本输入区对
34、象 由“”指定。Textarea 对象所有的属性、方法和事件和 Text 对象相同，也就是跟 Password 对象一样 images; Image 图片对象 document.images 是一个数组，包含了文档中所有的图片。要引用单个图片，可以用 document.imagesx。如果某图片包含“name”属性，也就是用“”这种格式定义了一幅图片，就可以使用“document.images.”这种方法来引用图片。在 IE 中，如果某图片包含 ID 属性，也就是用“”这种格式定义了一幅图片，就可以直接使用“”来引用图片。 单个 Image 对象的属性 name; src; lowsrc; w
35、idth; height; vspace; hspace; border 这些属性跟标记里的同名属性是一样的。在 Netscape 里，除了 src 属性，其它属性都不能改的，即使改了，在文档中也不能显示出效果来。这些属性最有用的就是 src 了，通过对 src 属性赋值，可以实时的更改图片。 事件 onclick 15.W3C DOM 访问DOM中的节点 parentNode( ).这个方法可以访问父节点。 firstChild( ).这个方法可以访问该节点的第一个子节点，不存在就返回空。 nextSibling( ). 这个方法可以访问下一个兄弟节点，不存在就返回空。 previousSi
36、bling( ). 这个方法可以访问上一个兄弟节点，不存在就返回空。 文档方法 getElementsByTagName(elementname):取得一个在文件或是某一部分文件中具有这 个名字的所有元素的列表；创建了这样的NodeList,就可以通过索引来访问这些命 名了的节点了。 createElement( )方法：将新元素的标记名做为参数，所创建的元素对象可以接 受属性及取值。 createDocumentFragment( )方法：创建一个documentFragment节点。 createTextNode( )、createComment( )和createCDATASection
37、( )方法：创建如它们 名字所示的节点，它们的参数将成为节点内容的字符串。 节点的方法 insertBefore( )方法：将新的子节点插入到引用子节点并返回new_node: dummy = node_object.insertBefore(new_node,reference_node) 这时dummy包含被插入的节点的一个副本。 replaceChild( )方法：替换子节点并返回被替换的节点 dummy = node_object.replaceChild(new_node,reference_node) 这时dummy包含被插入的节点的一个副本。 removeChild( )方法：删
38、除被引用的子节点并返回被删除的节点 dummy = node_object.removeChild(reference_node) 这时dummy包含被删除的节点的部分。 appendChild( )方法：将新节点加入到其他子节点的后面并返回新节点 dummy = node_object.appendChild(new_node) 这时dummy包含新节点的一个副本。 hasChildNodes( )方法：返回一个布尔值，它是给定节点是否有子节点的测试结果。 cloneNode( )方法：建立被Clone节点的一个副本，用true和false做为参数 True：除Clone元素本身外，还Clo
39、ne它的所有内容 False：仅Clone元素本身。 Clone的节点是一个孤儿。 显示和隐藏对象 Object.style.visibility = “hidden”; Object.style.visibility = “visible”; 显示和隐藏对象的例子 Js代码 1. 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.
