《Windows对象课件》由会员分享，可在线阅读，更多相关《Windows对象课件（30页珍藏版）》请在金锄头文库上搜索。
1、第二章第二章第二章第二章DOMDOM编程编程编程编程windowwindow对象对象对象对象本章任务本章任务演示示例演示示例1 1：广告窗口特效：广告窗口特效 演示示例演示示例2 2：时钟显示特效：时钟显示特效 制作广告窗口特效制作广告窗口特效 制作时钟显示特效制作时钟显示特效本章目标本章目标会运用会运用DOM模型查找某个模型查找某个HTML元素元素会使用会使用window对象的对象的open( )方法制作各种样式方法制作各种样式的广告窗口的广告窗口会使用会使用window对象的对象的setTimeout( )方法和方法和Date对象制作日期显示效果对象制作日期显示效果HTML文档的树状结构文
2、档的树状结构根节点根节点根节点根节点的子节点的子节点有什么办法对有什么办法对HTML中的内容进行动态改变呢？中的内容进行动态改变呢？演示示例演示示例3 3：动态改变：动态改变HTMLHTML中的内容中的内容使用使用Document Object Model相邻节点相邻节点什么是什么是DOM DOMDocument Object Model ,它是它是W3C国际组织的国际组织的一套一套Web标准，它定义了访问标准，它定义了访问HTML文档对象的一套属性、文档对象的一套属性、方法和事件方法和事件 。function changeLink() document.getElementById(myAn
3、chor).innerHTML=搜狐搜狐 ;document.getElementById(myAnchor).href=http:/ ; 淘宝淘宝修改内容修改内容修改属性修改属性HTML文档的每个节点都是对象，类似文档的每个节点都是对象，类似WinForm中的控件，都具备属性、方法和事件中的控件，都具备属性、方法和事件定位链接元定位链接元素（对象）素（对象）DOM对象模型对象模型-1http:/window 窗口对象窗口对象location地址对象地址对象FORM表单对象表单对象浏览器对象的分层结构浏览器对象的分层结构window.document.myform.text1 document
4、文档对象文档对象DOM对象模型对象模型-2浏览器对象的分层结构浏览器对象的分层结构Window对象常用的属性对象常用的属性名称名称 说明说明 status 指定浏览器状态栏中显示的临时消息指定浏览器状态栏中显示的临时消息 screen有关客户有关客户端的屏幕和显示性能的信息。端的屏幕和显示性能的信息。 history 有关客户访问过的有关客户访问过的URL的信息。的信息。location有关当前有关当前 URL 的信息。的信息。 document表示浏览器窗口中的表示浏览器窗口中的HTML文档文档常用的属性常用的属性常用的方法常用的方法onLoad事件：在窗口或框架完成文档加载时触发事件：在窗
5、口或框架完成文档加载时触发window对象常用的方法和事件对象常用的方法和事件名称名称 说明说明 alert (提示信息提示信息)显示一个带有提示信息和确定按钮的对话框显示一个带有提示信息和确定按钮的对话框 confirm(提示信息提示信息“)显示一个显示一个带有提示信息、确定和取消按钮的对带有提示信息、确定和取消按钮的对话框话框 open (url,name)打开具有指定名称的新窗口，并加载给定打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供所指定的文档；如果没有提供 URL，则打开一，则打开一个空白文档个空白文档close ( )关闭当前窗口关闭当前窗口showMo
6、dalDialog( )在一个模式窗口中显示指定的在一个模式窗口中显示指定的HTML文档文档setTimeout(函数函数,毫秒数毫秒数) 设置定时器：经过指定毫秒值后执行某个函数设置定时器：经过指定毫秒值后执行某个函数 如何使用如何使用window对象对象-1function openwindow( ) window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) window.open(register.html); else window.
7、alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开); function closewindow( ) if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？) window.close( ); 示例完整代码示例完整代码在窗口状态栏在窗口状态栏中设置文本中设置文本设置窗口设置窗口的高度的高度使用使用open方法方法打开新窗口打开新窗口弹出警告对话框弹出警告对话框弹出确认对话框弹出确认对话框关闭当关闭当前窗口前窗口添加单添加单击事件击事件因为因为window是最顶层的根，所以可以省略是最顶层的根，所以可以省略window.open(google
8、.htm);可简写为：可简写为：open(google.htm);close( )方法也是如此。方法也是如此。如何使用如何使用window对象对象-2-1open（”打开窗口的打开窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意组合：窗口的特征如下，可以任意组合：height： 窗口高度；窗口高度； width： 窗口宽度；窗口宽度； top： 窗口距离屏幕上方的象素值；窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值；：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，是否显示工具栏，yes为显示；为显示； menubar，scrol
9、lbars 表示菜单栏和滚动栏。表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，是否允许改变窗口大小，yes或或1为允许为允许 location： 是否显示地址栏，是否显示地址栏，yes或或1为允许为允许 status：是否显示状态栏内的信息，：是否显示状态栏内的信息，yes或或1为允许；为允许；我我们需要需要预先制作好注册先制作好注册页面，假面，假设为register.html，打开注册窗口的，打开注册窗口的语句如下句如下 open(register.html, 注册窗口注册窗口, toolbars=0, location=0, statusbars=0,menubars=
10、0,width=700,height=550,scrollbars=1);通过通过open方法方法打开注册页面打开注册页面之后的效果之后的效果如何使用如何使用window对象对象-2-2function openwindow( ) window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注册窗口注册窗口, toolbars=0, location=0, statusbars=0, menubars=0
11、,width=700,height=550,scrollbars=1); else window.alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开); function closewindow( ) if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？) window.close( ); 示例完整代码示例完整代码使用使用 Open 方法方法打开注册新窗口打开注册新窗口添加单添加单击事件击事件如何使用如何使用window对象对象-3function openwindow( ) window.status=系统当前状态：您正在注册用户系统当前
12、状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注册窗口注册窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开);function closewindow( ) if(window.confirm(您确认要退出系统吗？您确认要退
13、出系统吗？) window.close( ); 用户注册用户注册 退退 出出示例完整代码示例完整代码使用超链接调使用超链接调用方法来打开用方法来打开注册新窗口注册新窗口如何使用如何使用window对象对象-4function openwindow( ) open(adv.htm, 广告窗口广告窗口, toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250); 示例完整代码示例完整代码窗口完成文档窗口完成文档加载时触发打加载时触发打开广告窗口
14、开广告窗口如何使用如何使用window对象对象-5function openwindow( ) window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.; if (window.screen.width = 1024 & window.screen.height = 768) window.showModalDialog(register.html, 注册窗口注册窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700, height=550,scrollbars=1); else window.
15、alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开); function closewindow( ) if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？) window.close( ); H3用户注册用户注册 退退 出出示例完整代码示例完整代码打开模式窗口，打开模式窗口，被打开窗口保持被打开窗口保持输入焦点。输入焦点。使用超链接调使用超链接调用方法来打开用方法来打开模式窗口模式窗口Date对象做时钟显示对象做时钟显示-1如何实现如演示示例如何实现如演示示例3中所示的时钟效果？中所示的时钟效果？演示示例演示示例3 3：时钟效果演示效果演
16、示由于涉及到时间的显示问题，所以要用到日期对象由于涉及到时间的显示问题，所以要用到日期对象Date。还有时间在不停地走，因此需要不断地调用一个函数，所还有时间在不停地走，因此需要不断地调用一个函数，所以要用到以要用到Windows的定时器的定时器setTimeout( )方法。方法。Date对象做时钟显示对象做时钟显示-2Date 对象存储的日期为自对象存储的日期为自 1970 年年 1 月月 1 日日 00:00:00 以以来的毫秒数来的毫秒数var 日期日期对象象 = new Date (年、月、日等参数年、月、日等参数)例如：例如：var mydate=new Date(July 29,
17、 2007,10:30:00 ) 如果没有参数，表示当前日期和时间如果没有参数，表示当前日期和时间例如：例如：var today = new Date( ) Date对象做时钟显示对象做时钟显示-3Date 方法的分组方法的分组方法分方法分组说 明明 setXxx这些方法用于些方法用于设置置时间和日期和日期值getXxx 这些方法用于些方法用于获取取时间和日期和日期值Date对象做时钟显示对象做时钟显示-4用作用作 Date 方法的参数的整数范围：方法的参数的整数范围： 值整整 数数 Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期（星期几
18、）几） Date1 至至 31（月份中的天数）（月份中的天数） Months0 至至 11（一月（一月至十二月）至十二月） Date对象做时钟显示对象做时钟显示-5-1function disptime( ) var now= new Date( ) ; var hour = now.getHours() ; if (hour=0 & hour =12) document.write(上午好上午好!) if (hour12 & hour= 18) document.write(下午好下午好!) ; if (hour18 & hour 24) document.write(晚上好晚上好!) ;
19、document.write(今天日期今天日期:+now.getYear()+年年+(now.getMonth( )+1)+月月+now.getDate()+日日) ; document.write(现在时间现在时间:+now.getHours()+点点+now.getMinutes( )+分分) ; 查看完整代码查看完整代码获得当前日期和时间获得当前日期和时间获得小时，即当前是几点获得小时，即当前是几点月份数字月份数字011，注意注意1判断上午、下午还是晚上判断上午、下午还是晚上Date对象做时钟显示对象做时钟显示-5-2上一页上一页PPT示例中时钟不能动态改变，怎么办？示例中时钟不能动态改
20、变，怎么办？由于时间在不停地走，所以应该每隔由于时间在不停地走，所以应该每隔1秒调用显示时间秒调用显示时间的方法。如何解决？的方法。如何解决？使用使用setTimeout( )方法方法每隔每隔1秒秒调用用显示示时间的方法的方法setTimeout的用法：的用法： setTimeout（“调用的函数调用的函数”,”定时的时间定时的时间”） 例：例：var myTimesetTimeout( “disptime( )”, 1000 ) ;每隔每隔1000毫秒毫秒执行函行函数数disptime( )一次一次Date对象做时钟显示对象做时钟显示-6function disptime( ) var ti
21、me = new Date( ); /获得当前时间获得当前时间 var hour = time.getHours( ); /获得小时、分钟、秒获得小时、分钟、秒 var minute = time.getMinutes( ); var second = time.getSeconds( );document.myform.myclock.value =hour+:+minute+:+second+ ;var myTime = setTimeout(disptime(),1000); H2当前时间：当前时间： 查看完整代码查看完整代码设置文本框的内容设置文本框的内容为当前时间为当前时间设置定时器
22、每隔设置定时器每隔1秒秒(1000毫秒毫秒),调用函数调用函数disptime()执行执行history 和和location对象对象-1history 对象对象方法方法 名称名称 说明说明 back( )加加载 History 列表中的上一个列表中的上一个 URL。 forward( )加加载 History 列表中的下一个列表中的下一个 URL。 go(url or number)加加载 History 列列表表中中的的一一个个 URL，或或要要求求浏览器器移移动指定的指定的页面数。面数。 back ( )方法相当于后退按钮方法相当于后退按钮forward ( ) 方法相当于前进按钮方法相
23、当于前进按钮go (1)代表前进代表前进1页，等价于页，等价于forward( )方法；方法；go(-1) 代表后退代表后退1页，等价于页，等价于back( )方法；方法；history 和和location对象对象-2Location 对象对象 属性属性 方法方法名称名称 说明说明 host设置或置或检索位置或索位置或 URL 的主机名和端口号的主机名和端口号hostname设置或置或检索位置或索位置或 URL 的主机名部分的主机名部分href设置或置或检索完整的索完整的 URL 字符串字符串名称名称说明说明assign(url)加加载 URL 指定的新的指定的新的 HTML 文档。文档。
24、reload()重新加重新加载当前当前页replace(url) 通通过加加载 URL 指定的文档来替指定的文档来替换当前文档当前文档history 和和location对象对象-3返回返回 前进前进刷新刷新首页首页跳转到其他版块跳转到其他版块 新闻贴图新闻贴图 网上谈兵网上谈兵 IT茶馆茶馆 教育大家谈教育大家谈 查看完整代码查看完整代码添加选项改添加选项改变事件变事件获取被选中的获取被选中的下拉菜单项下拉菜单项value的值的值常见错误常见错误如何设置下拉菜单中的默认选中的第一项？如何设置下拉菜单中的默认选中的第一项？如何使页面内容居中？如何使页面内容居中？插入一行一列的表格，然后居中，高
25、度、宽度都为插入一行一列的表格，然后居中，高度、宽度都为100下拉菜单是否选中的办法：在菜单项中添加下拉菜单是否选中的办法：在菜单项中添加selected属性即可属性即可 网上谈兵网上谈兵 IT茶馆茶馆 新闻贴图新闻贴图 教育大家谈教育大家谈制作实现全选效果制作实现全选效果-1如何实现如图所示的全选或全不选效果？如何实现如图所示的全选或全不选效果？全选全选效果效果全不选全不选效果效果制作实现全选效果制作实现全选效果-21、复选框是否选中的属性是哪个？、复选框是否选中的属性是哪个？2、写代码逐个复选框设置为、写代码逐个复选框设置为true，有没有更好的办法？，有没有更好的办法？checked属性
26、属性解决办法解决办法: 使用复选框数组，使用复选框数组，通过循环给通过循环给checked属性赋值属性赋值制作实现全选效果制作实现全选效果-3实现思路：实现思路：创建一组同名的复选框创建一组同名的复选框编写脚本编写脚本1、使用使用getElementsByName( )方法获得一组同名的复选框对象。方法获得一组同名的复选框对象。2、通过循环来改变复选框是否被选中属性、通过循环来改变复选框是否被选中属性checked的值。的值。制作实现全选效果制作实现全选效果-4function checkAll(boolValue ) var allCheckBoxs=document.getElementsByName(isBuy) ; for (var i=0;iallCheckBoxs.length ;i+) if(allCheckBoxsi.type=checkbox) allCheckBoxsi.checked=boolValue ; 全全选 全不全不选 查看完整代码查看完整代码判断同名元素中是判断同名元素中是否是复选框否是复选框是复选框就改变是复选框就改变是否选中属性是否选中属性checked的值的值
