Web前端开发案例教程——HTML+CSS+JavaScript (10)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实例10-2：采用DOM改变超链接
window 对 象 在 层 次 图 中 位 于 最 高 一 层 ， document 对 象 、 history 对象和 location 对象都是它的子对象， window 对象中 包含的属性是应用于整个窗口的，如在框架集结构中，每个框 架都包含一个window对象。 document对象在层次图中位于最核心地位，页面上的对象都 是document对象的子对象，在document对象中包含的属性是整 个页面的属性，如背景颜色等。 location对象中包含了当前URL地址的信息。 navigator对象中包含了当前使用的浏览器的信息。 history对象中包含了客户端浏览器过去访问的URL地址信息。
采用window对象实现弹出窗口
…… window.open("adv.html", "广告窗口", "toolbar=0, scrollbars=0, location=0, status=0, menubar=0, resizable=0, width=707, height=275,top=200,left=150"); /* width：弹出窗口的宽度 height：弹出窗口的高度 top：弹出窗口离屏幕顶部距离 left：弹出窗口离屏幕左边距离 */ ……
2.open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法如下:
window.open("弹出窗口的url"，"窗口名称"，"窗口特征"）
3.close( ) close( )方法用于关闭浏览器窗口,语法格式为: window.close( );
10.1.3常用的事件
常用的window对象
实例10-1：采用window对象实现弹出窗口
文档对象模型提供了一组按树状形式结构组织的HTML文档， 树状结构中的每一个对象称为一个节点，每一个对象都有 一个或多个属性和方法。
采用DOM改变超链接。
…… function changeLink(){ document.getElementById("node").innerHTML="<h1>淘 宝</h1>"; document.getElementById("node").href="http://wwww.ta obao.com"; } …… <a href="http://wwww.jd.com.cn" id="node"><h1>京东 </h1></a> <input name="btn" type="button" value="使用DOM改变链 接" onclick="changeLink();" /> ……
实例10-4：常用的window对象
…… <input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p> <p><input name="open2" type="button" value="弹出固定大小窗 口，且无菜单栏等" onclick="open_fix_adv()"/></p> <p><input name="full" type="button" value="全屏显示" onclick="fullscreen()"/></p> <p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p> <p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p> ……
10.1 Window 对象
window对象表示一个浏览器窗口或一个框架。每个载入浏 览器的HTML文档都会成为document对象。运用document对 象，可在JavaScript中对HTML页面中的所有元素进行访问。
1.confirm()
confirm（）将弹出一个确认对话框，语法格式为： window.confirm（"对话框中显示的纯文本")；
…… /*弹出窗口*/ function open_adv(){ window.open("adv.html");} /*弹出固定大小窗口，并且无菜单栏等*/ function open_fix_adv(){ window.open("adv.html","","height=380,width=320,toolbar=0,sc rollbars=0,location=0,status=0,menubar=0,resizable=0"); } /*全屏显示*/ function fullscreen(){ window.open("10-4.html","","fullscreen=yes");} /*弹出确认消息框*/ function confirm_msg(){ if(confirm("你相信自己是最棒的吗？")){ alert("有信心必定会赢，没信心一定会输！"); }} /*关闭窗口*/ function close_plan(){ window.close(); } ……
第十章
DOM编程
学习目标
理解DOM的概念和结构组成 掌握window对象属性、方法及事件的使用 掌握document对象属性和方法的使用
Baidu Nhomakorabea
掌握表单对象属性、方法及事件的使用
理解其他DOM对象的常用属性、方法及事件
HTML文档对象模型（HTML DOM）定义了一套标准方法来访 问和操纵HTML文档。 浏览器是用于显示HTML文档内容的应用程序，浏览器还提 供了一些可以在JavaScript脚本中访问和使用的对象。浏 览器对象是一个分层结构，也称为文档对象模型。
…… var flag=confirm("确认要删除此条信息吗?"); if(flag==true){ alert("删除成功!"); } else{ alert("你取消了删除"); } ……
实例10-3：confirm()
alert( )只有一个参数，仅显示警告框的消息，无返回 值，不能对脚本产生任何改变。 prompt()有两个参数，是输入对话框，用来提示用户输 入一些信息，单击“取消”按钮则返回null，单击确认按 钮则返回用户输入的值。 confirm( )只有一个参数，是确认对话框，显示提示框 的消息，“确定”按钮和“取消”按钮，单击“确定”按 钮返回 true ，单击“取消”按钮返回 false ，因此常用于 if－else结构。
window 对 象 在 层 次 图 中 位 于 最 高 一 层 ， document 对 象 、 history 对象和 location 对象都是它的子对象， window 对象中 包含的属性是应用于整个窗口的，如在框架集结构中，每个框 架都包含一个window对象。 document对象在层次图中位于最核心地位，页面上的对象都 是document对象的子对象，在document对象中包含的属性是整 个页面的属性，如背景颜色等。 location对象中包含了当前URL地址的信息。 navigator对象中包含了当前使用的浏览器的信息。 history对象中包含了客户端浏览器过去访问的URL地址信息。
采用window对象实现弹出窗口
…… window.open("adv.html", "广告窗口", "toolbar=0, scrollbars=0, location=0, status=0, menubar=0, resizable=0, width=707, height=275,top=200,left=150"); /* width：弹出窗口的宽度 height：弹出窗口的高度 top：弹出窗口离屏幕顶部距离 left：弹出窗口离屏幕左边距离 */ ……
2.open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法如下:
window.open("弹出窗口的url"，"窗口名称"，"窗口特征"）
3.close( ) close( )方法用于关闭浏览器窗口,语法格式为: window.close( );
10.1.3常用的事件
常用的window对象
实例10-1：采用window对象实现弹出窗口
文档对象模型提供了一组按树状形式结构组织的HTML文档， 树状结构中的每一个对象称为一个节点，每一个对象都有 一个或多个属性和方法。
采用DOM改变超链接。
…… function changeLink(){ document.getElementById("node").innerHTML="<h1>淘 宝</h1>"; document.getElementById("node").href="http://wwww.ta obao.com"; } …… <a href="http://wwww.jd.com.cn" id="node"><h1>京东 </h1></a> <input name="btn" type="button" value="使用DOM改变链 接" onclick="changeLink();" /> ……
实例10-4：常用的window对象
…… <input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p> <p><input name="open2" type="button" value="弹出固定大小窗 口，且无菜单栏等" onclick="open_fix_adv()"/></p> <p><input name="full" type="button" value="全屏显示" onclick="fullscreen()"/></p> <p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p> <p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p> ……
10.1 Window 对象
window对象表示一个浏览器窗口或一个框架。每个载入浏 览器的HTML文档都会成为document对象。运用document对 象，可在JavaScript中对HTML页面中的所有元素进行访问。
1.confirm()
confirm（）将弹出一个确认对话框，语法格式为： window.confirm（"对话框中显示的纯文本")；
…… /*弹出窗口*/ function open_adv(){ window.open("adv.html");} /*弹出固定大小窗口，并且无菜单栏等*/ function open_fix_adv(){ window.open("adv.html","","height=380,width=320,toolbar=0,sc rollbars=0,location=0,status=0,menubar=0,resizable=0"); } /*全屏显示*/ function fullscreen(){ window.open("10-4.html","","fullscreen=yes");} /*弹出确认消息框*/ function confirm_msg(){ if(confirm("你相信自己是最棒的吗？")){ alert("有信心必定会赢，没信心一定会输！"); }} /*关闭窗口*/ function close_plan(){ window.close(); } ……
第十章
DOM编程
学习目标
理解DOM的概念和结构组成 掌握window对象属性、方法及事件的使用 掌握document对象属性和方法的使用
Baidu Nhomakorabea
掌握表单对象属性、方法及事件的使用
理解其他DOM对象的常用属性、方法及事件
HTML文档对象模型（HTML DOM）定义了一套标准方法来访 问和操纵HTML文档。 浏览器是用于显示HTML文档内容的应用程序，浏览器还提 供了一些可以在JavaScript脚本中访问和使用的对象。浏 览器对象是一个分层结构，也称为文档对象模型。
…… var flag=confirm("确认要删除此条信息吗?"); if(flag==true){ alert("删除成功!"); } else{ alert("你取消了删除"); } ……
实例10-3：confirm()
alert( )只有一个参数，仅显示警告框的消息，无返回 值，不能对脚本产生任何改变。 prompt()有两个参数，是输入对话框，用来提示用户输 入一些信息，单击“取消”按钮则返回null，单击确认按 钮则返回用户输入的值。 confirm( )只有一个参数，是确认对话框，显示提示框 的消息，“确定”按钮和“取消”按钮，单击“确定”按 钮返回 true ，单击“取消”按钮返回 false ，因此常用于 if－else结构。