Web前端开发 课件 第13章 JavaScript进阶_第1页
Web前端开发 课件 第13章 JavaScript进阶_第2页
Web前端开发 课件 第13章 JavaScript进阶_第3页
Web前端开发 课件 第13章 JavaScript进阶_第4页
Web前端开发 课件 第13章 JavaScript进阶_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

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

文档简介

第13章JavaScript进阶主讲教师：朱铁樱《Web前端开发》

13.1BOM对象浏览器对象模型（BrowserObjectModel，简称BOM）提供了与浏览器交互的对象和接口，允许开发者操作浏览器窗口、导航、历史记录、定位等。用户在浏览器中打开一个页面时，浏览器就会自动创建一些对象这些对象存放了浏览器窗口的属性和其他相关信息，被称为浏览器对象浏览器对象模型BOM的分层结构Window是BOM的顶级对象每个层次上的对象都是其父对象的属性，可以通过“父对象.子对象”的方式访问，例如window.document特殊：document对象既是BOM顶级对象window的一个属性，也是DOM模型中的顶级对象；

location对象既是window对象的属性，同时也是document对象的属性

13.1BOM对象属性描述及作用window窗体对象。表示浏览器中打开的窗口。若html文档包含框架(frame)，浏览器会为每个框架创建一个额外的window对象。是BOM的顶层对象。document也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。navigator用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。screen可获取与屏幕相关的数据，例如屏幕的分辨率等。history主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。location用于获取当前浏览器中URL地址栏内的相关数据frames窗口中所有命名的框架。是window对象的数组BOM的主要对象描述

13.1BOM对象方法说明alert(message)显示一个包含指定消息和OK按钮的警告框。confirm(message)显示一个包含指定消息和OK及取消按钮的确认框。prompt(message,default)显示一个包含指定消息、文本输入字段和OK及取消按钮的提示框。open(URL,name,specs,replace)打开一个新的浏览器窗口或查找一个已命名的窗口。close()关闭当前窗口。setTimeout(function,delay)和setInterval(function,delay)用于在指定的毫秒数后执行函数，或定期执行函数。clearTimeout(id)和clearInterval(id)取消由setTimeout()或setInterval()设置的延迟或间隔。

Window对象方法

13.1BOM对象任务1：打开新窗口functionopenwindow(){ window.open(“http：//"，""，"toolbars=0，scrollbars=0，location=0，statusbars=0，menubars=0，resizable=0，width=780，height=248"); }示例<bodyonload="openwindow()">

13.1BOM对象属性说明document引用当前窗口中的DOM文档location引用当前窗口的location对象navigator引用当前窗口的navigator对象history引用当前窗口的history对象screen引用当前窗口的screen对象

Window对象属性

13.1BOM对象window的常用方法-对话框alert()：弹出警告框。方法只接收一个参数，即要显示给用户的文本，浏览器将创建一个具有确定按钮的系统消息框confirm()：弹出确认框。方法只接收一个参数，即要显示的文本，浏览器创建一个具有“确定”按钮和“取消”按钮的系统消息框prompt()：弹出提示输入框。提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果单击“确定”按钮，将文本框中的值作为函数值返回；如果单击“取消”按钮，返回空值以上3种都是模态对话框(也称模式对话框)，弹出后用户必须响应，单击【确定】或【取消】按钮将其关闭，否则不能操作浏览器其他对象

13.1BOM对象Location对象：提供了与当前窗口加载文档相关的URL信息及URL解析和重定向方法。Location对象用于获取或设置当前文档的URL，并提供了与URL相关的属性和方法。方法说明assign(URL)加载新的文档。reload([forceReload])重新加载当前文档。replace(URL)用新的文档替换当前文档，不会在历史记录中生成新的条目。属性说明href获取或设置完整的URL。protocol获取或设置URL的协议部分（如"http："）。hostname获取或设置URL的主机名部分（如http：//"）。port获取或设置URL的端口号（默认为空字符串）。pathname获取或设置URL的路径名部分（如"/page.html"）。search获取或设置URL的查询字符串部分（如"?key=value"）。hash获取或设置URL的片段标识符部分（如"#section"）。

13.1BOM对象Location对象属性Location对象方法在页面中如图1所示，单击“点击选择”，弹出一个宽100像素，高200像素的页面，如图2所示，选择其中的一个内容，相应的值会返回到前一个页面，如图3所示练习图1初始页面图2弹出页面图3返回值页面

13.1BOM对象任务2实现页面间数据传递什么是DOM？文档对象模型（DocumentObjectModel）通过DOM可以动态改变文档内容动态改变文档内容的原理解析文档（如HTML）并生成DOM树通过DOM标准接口+编程语言改变文档内容

13.2DOM对象DOM模型的相关概念解析文档生成DOM树的过程<html><head><title>DOM节点</title></head><body>

<imgsrc="images/fruit.jpg"alt="图片"id="s1"/>

<h1>喜欢的水果</h1>

<p>DOM应用</p></body></html>生成的DOM树结构是什么？DOM模型的相关概念

13.2DOM对象DOM树中的节点类型和节点关系文档节点document元素节点文本节点…..属性节点父子关系同级关系

13.2DOM对象DOM模型的相关概念src属性W3C规定的三类DOM标准接口CoreDOM（核心DOM），适用于各种结构化文档XMLDOM，专用于XML文档HTMLDOM，专用于HTML文档选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等

13.2DOM对象DOM是DocumentObjectModel的缩写，即文档对象模型，DOM提供了网页编程的接口，可以利用DOM对网页上的元素进行管理，从而实现动态交互效果。

13.2DOM对象属性描述body提供对<body>元素的直接访问。对于定义了框架集的文档，该属性引用最外层的<frameset>cookie设置或返回与当前文档有关的所有cookiedomain返回当前文档的域名lastModified返回文档被左后修改的日期和时间referrer返回载入当前文档的文档的URLtitle返回当前文档的标题URL返回当前文档的URLdocument对象的常用属性每隔两秒钟切换网页标题练习

13.2DOM对象任务3：网页标题交替显示不同效果方法说明close()关闭用document.open()方法打开的输出流，并显示选定的数据getElementById()返回对拥有指定id的第一个对象的引用getElementsByName返回带有指定名称的对象集合getElementsByTagName返回带有指定标签名的对象集合querySelector用于返回指定CSS选择器的元素，当满足条件的有多个时，只返回第一个元素querySelectorAll返回指定CSS选择器的元素集合open打开一个流，以收集来自任何document.write()或document.write()方法的输出write向文档写HTML表达式或JavaScript代码writeLn()等同于write()方法，不同的是在每个表达式之后写一个换行符document对象的常用方法

13.2DOM对象访问节点（1）访问指定节点的方法getElementById()：返回一个节点对象getElementsByName()：返回多个（节点数组）getElementsByTagName()：返回多个（节点数组）

13.2DOM对象

13.2DOM对象任务4制作复选框全选效果查看/修改属性节点（2）查看/修改属性节点getAttribute(“属性名”)：用来获取属性的值setAttribute(“属性名”,“属性值”)：用来设置属性的值removeAttribute('属性')”：移除属性值

13.2DOM对象任务5选择喜欢的水果练习

13.2DOM对象访问节点：使用getAttribute读取节点querySelector方法用于返回指定CSS选择器的元素，当满足条件的有多个时，只返回第一个元素例如：varbtn=document.querySelector(“#btnId”);querySelectorAll方法返回指定CSS选择器的元素集合例如：varspan=document.querySelectorAll(“.base”);

13.2DOM对象访问节点

13.2DOM对象访问节点：使用querySelector访问节点DOM节点属性

13.2DOM对象DOM节点分为：文档节点、元素节点、属性节点和文本节点。节点属性：nodeName：节点名称。nodeValue：节点的值。parentNode：节点的父节点。每个元素、属性和文本都有一个父节点。childNodes：节点的孩子节点列表。对于HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。firstChild：childNodes列表中第一个节点的快捷方式。lastChild：childNodes列表中最后一个节点的快捷方式。previousSibling：获得上一个兄弟节点。nextSibling：类似于previousSibling属性，返回下一个兄弟节点。attributes：仅用于元素节点，返回元素的属性列表。创建和增加节点的方法createElement（）：创建节点appendChild（）：末尾追加方式插入节点insertBefore（）：在指定节点前插入新节点cloneNode（）：克隆节点创建和增加节点先创建个节点，然后设置属性，最后插入节点克隆图片节点，然后追加插入到文档id属性：sixty1

13.2DOM对象任务6创建和增加节点删除和替换节点的方法removeChild（）：删除节点replaceChild()：替换节点删除和替换节点id属性：sixty1先创建一个节点，然后替换原节点

13.2DOM对象

下拉菜单下拉菜单效果

13.2DOM对象简易留言版

13.2DOM对象添加留言排他思想，简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除，

设置当前元素。

13.2DOM对象排他操作排他思想当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。

鼠标指针经过时背景变色

13.2DOM对象背景变色效果Tab栏切换标签栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过单击标签在多个内容块之间进行切换。

13.2DOM对象标签栏默认效果标签栏切换效果HTMLDOM对象的属性访问HTMLDOM的特有对象和操作

13.2DOM对象思路分析1、使用CoreDOM标准操作获取表格对象2、使用HTMLDOM的table相关对象的属性、方法、事件操作表格使用HTMLDOM如何实现？类别名称描述属性rows[]返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行……代码片段……tableObject.rows[

]

ta

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论