第13章 JavaScript对象编程编程技术_第1页
第13章 JavaScript对象编程编程技术_第2页
第13章 JavaScript对象编程编程技术_第3页
第13章 JavaScript对象编程编程技术_第4页
第13章 JavaScript对象编程编程技术_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript对象编程01Window窗口对象03JavaScript与表单操作02Document文档对象04DOM对象Window窗口对象Window对象顶层Window对象是所有其他子对象的父对象，它出现在每一个页面上，并且可以在单个JavaScript应用程序中被多次使用。属性描述document对话框中显示的当前文档frames表示当前对话框中所有frame对象的集合location指定当前文档的URLname对话框的名字status状态栏中的当前信息defaultstatus状态栏中的当前信息top表示最顶层的浏览器对话框parent表示包含当前对话框的父对话框opener表示打开当前对话框的父对话框closed表示当前对话框是否关闭的逻辑值self表示当前对话框screen表示用户屏幕，提供屏幕尺寸、颜色深度等信息navigator表示浏览器对象，用于获得与浏览器相关的信息Window对象的方法方法描述alert()弹出一个警告对话框confirm()在确认对话框中显示指定的字符串prompt()弹出一个提示对话框open()打开新浏览器对话框并且显示由URL或名字引用的文档，并设置创建对话框的属性close()关闭被引用的对话框focus()将被引用的对话框放在所有打开对话框的前面blur()将被引用的对话框放在所有打开对话框的后面scrollTo(x,y)把对话框滚动到指定的坐标scrollBy(offsetx,offsety)按照指定的位移量滚动对话框setTimeout(timer)在指定的毫秒数过后，对传递的表达式求值setInterval(interval)指定周期性执行代码对话框警告（alert）利用Window对象的alert()方法可以弹出一个警告框，并且在警告框内可以显示提示字符串文本。语法：window.alert(str);参数str表示要在警告对话框中显示的提示字符串。询问对话框（confirm）语法：window.confirm(question)window：Window对象。question：要在对话框中显示的纯文本。通常，应该表达程序想要让用户回答的问题。返回值：如果用户单击了“确定”按钮，返回值为true；如果用户单击了“取消”按钮，返回值为false。询问对话框（prompts）语法：mpt(str1，str2)str1：为可选项。表示字符串(String)，指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息。str2：为可选项。表示字符串(String)，指定对话框内输入框（input）的值（value）。如果忽略此参数，将被设置为undefined。案例窗口对象常用操作window.scrollTo(0,1000)1window.print();2窗口对象常用操作window.history.back();3文档对象概述DOM模型DOM是JavaScript操作网页的接口，全称为“文档对象模型”（DocumentObjectModel）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。Document对象文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用document来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。文档对象的属性和方法document.domain1document.location2document属性document.lastModified3document.open()document.close()1document.write()2document方法文档对象的应用案例关键代码<script>//设置文档颜色

functionsetColor(){document.body.style.backgroundColor="red";}//设置文字大小

functionsetFontSize(){document.body.style.fontSize="20px";}//设置背景图片

functionsetImage(){document.body.style.backgroundImage="url(img/5.jpg)";}</script>JavaScript与表单操作使用JavaScript访问表单input、textarea、password、select等标签都可以通过value属性取到它们的值。select1checkbox2radio3使用JavaScript访问表单域使用JavaScript操作表单select1checkbox2radio3

表单的验证案例关键代码<script>functionmr_verify(){//获取表单对象

varemail=document.getElementById("email");varpassword=document.getElementById("password");varpasswordRepeat=document.getElementById("passwordRepeat");vartel=document.getElementById("tel");//验证项目是否为空

if(email.value===''||email.value===null){alert("邮箱不能为空！");return;}if(password.value===''||password.value===null){alert("密码不能为空！");return;}if(passwordRepeat.value===''||passwordRepeat.value===null){alert("确认密码不能为空！");return;}}</script> DOM概述DOM分层<html> <head> <title>标题内容</title> </head> <body> <h3>三号标题</h3> <b>加粗内容</b> </body></html>

DOM对象节点属性DOM对象节点属性属性说明nodeName节点的名称nodeValue节点的值，通常只应用于文本节点nodeType节点的类型。parentNode返回当前节点的父节点。childNodes子节点列表firstChild返回当前节点的第一个子节点lastChild返回当前节点的最后一个子节点previousSibling返回当前节点的前一个兄弟节点nextSibling返回当前节点的后一个兄弟节点attributes元素的属性列表节点的几种操作节点的几种操作节点的创建1节点的追加2节点的复制3节点的删除4

获取文档中的指定元素获取文档中的指定元素1.通过元素的ID属性获取元素document.getElementById();2.通过元素的name属性获取元素document.getElementsByName()案例关键代码<script>//复制收货地址functioncopyAddress(){varaddress=document.getElementById("address");//获得收货地址对象varaddressCopy=address.cloneNode(true); //完全复制对象varaddressContainer=document.getElementById("addressContainer");addressContainer.appendChild(addressCopy); //父容器添加复制对象}

//删除收货地址functiondelClick(obj){varaddressContainer=document.getElementById("addressContainer");vardelObj=obj.parentNode.parentNode; //获取父容器节点if(delObj.previousElementSibling===null){ //判断根节点alert('无法删除！至少保留一个默认地址！');return;}addressContainer.removeChild(delObj); //删除节点对象}</script>与DHTML相对应的DOMDHTML相对应的DOM1.innerHTML和innerText属性2.outerHTML和outerText属性小结本章主要讲解了Windows窗口对象、JavaScript中的表单操作以及DOM对象。1.Windows对象代表打开的浏览器窗口，需要读者们熟记几种常用的Windows对象的方法；2.Document文档对象则代表浏览器窗口中的文档，需要读者们掌握如何动态获取和改变HTML中的内容；3.DOM对象中，需要读者们掌握DOM节点的相关操作；表单操作经常用于注册登录等信息的验证。上机指导上机指导关键代码functionprice(){ varp1=0; varp2=0; for(vari=0;i<mSpan.length;i++){ if(mSpan[i].className=='on'){

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论