时间:2021-07-01 10:21:17 帮助过:5人阅读
<!DOCTYPE html> <html> <head> <title>BOM--浏览器对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function resizeWindow(){ window.resizeTo(500, 300) } </script> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <pre> BOM:把浏览器窗口封装成对象模型,供js进行访问。最重要的一个对象是:window </pre> <h3>window中的属性演示</h3> <script type="text/javascript"> function fun1(){ window.status = "湖南城市学院......" //window.pageXOffset="200px"; //IE不支持 //window.dialogHeight="200"; //deprecated alert("aa"); //window.resizeTo(500,400); //window.resizeBy(-100,-100); } function aa(){ //alert("Aaaa"); alert(window.innerHeight); } </script> <input type="button" value="window对象中的status属性演示" onclick="fun1();"> <br/> <input type="button" onclick="aa();" value="文档窗口高度"> <br/> <a href="aa.html">前进</a> <hr/><input type="button" onclick="locationDemo();" value="window中的location对象属性"> <script type="text/javascript"> function locationDemo(){ //alert( window.location.href); alert(window.location.hostname); //通过window.location.href属性实现页面跳转 window.location.href = "http://www.baidu.com"; } </script> <br/> <input type="button" onclick="navigatorDemo();" value="window中的Navigator对象属性"> <br/> <script type="text/javascript"> function navigatorDemo(){ alert( window.navigator.appName); alert( window.navigator.appVersion); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>BOM--浏览器对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h3>window中的方法演示</h3> <script type="text/javascript"> function fun1(){ window.close();//关闭窗口 } function fun2(){ var boo = window.confirm("是否真的要做某事?");//消息确认 if (boo) { alert("做某事...."); } else { alert("不做某事...."); } } function fun3(){ window.moveBy(10, 10);//经测试,当前浏览器,不支持 } </script> <input type="button" value="window对象中的close()方法演示" onclick="fun1();"> <br/> <input type="button" value="window对象中的confirm()方法演示" onclick="fun2();"> <br/> <input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();"> <br/> <br/> <br/> <!--///////////////以下演示定时器////////////////// --> <!--这个定时器是一次性的,setTimeout(),clearTimeout()--> <input type="button" value="启动定时器1" onclick="start1();"> <br/> <input type="button" value="关闭定时器1" onclick="stop1();"> <br/> <script type="text/javascript"> var t1;//全局变量 function start1(){ t1 = window.setTimeout("aa()", 1000);//返回值为当前闭定时器的id } function aa(){ alert("aaa....."); } function stop1(){ t1 = window.clearTimeout(t1);//指定所关闭定时器的id } </script> <!--这个定时器是周期性的,setInterval(),clearInterval()--> <input type="button" value="启动定时器2" onclick="start2();"> <br/> <input type="button" value="关闭定时器2" onclick="stop2();"> <br/> <script type="text/javascript"> var t2; function start2(){ //t2=window.setInterval("bb()",2000); t2=setInterval("bb()",2000);//返回值为当前闭定时器的id } function bb(){ //window.alert("bbbbbbb....."); alert("bbbbbbb....."); } function stop2(){ //window.clearInterval(t2); //指定所关闭定时器的id clearInterval(t2); //指定所关闭定时器的id } </script> <hr/> <!--打开新窗口: open() --> <input type="button" value="新开一个窗口" onclick="demo();"> <br/> <script type="text/javascript"> function demo(){ //window.open(URL,name,features,replace) window.open("ad.html","ad","height=300,width=300,status=no,location=no"); } </script> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/> <script type="text/javascript"> function disp_prompt(){ var name=prompt("Please enter your name","") if (name!=null && name!="") { document.write("Hello " + name + "!") } } </script> <input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/> <script type="text/javascript"> function disp_scrollBy(){ scrollBy(10, 10);//模拟用户点击滚动条动作 } </script> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> </body> </html>
<!DOCTYPE html> <html> <head> <title>ad.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h2>一条广告消息</h2> <h2>一条广告消息</h2> <h2>一条广告消息</h2> <form> Name:<input type="text" name="name"> <input type="submit" value="注册"> </form> <script type="text/javascript"> //3秒后自动关闭窗口 setTimeout("window.close();",3000); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>BOM---浏览器对象模型</title> <script> function resizeWindow() { window.resizeTo(500,300) } </script> </head> <body> <h3>history演示中的第二个页面</h3> <script> function fun1(){ //"window."可以省略 //window.history.back(); //go(-1) history.back();//go(-1) } </script> <a href="#" onclick="fun1 ();">后退</a> </body> </html>
<!DOCTYPE html> <html> <head> <title>DOM--文档对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </script> <style type="text/css"> .d { background-color: #00ff00; width: 200px; height: 40px; } </style> </head> <body> <pre> 文档对象模型(DOM: Document Object Model): 文档:标记型文档(HTML,XML)。特征:里面除了标签,就是标签封装的内容 对象:封装了属性和行为的实体,可以被直接调用。 模型:所有标记型文档都具备一些共有特征的一个体现。 DOM = BOM(浏览器对象模型) + DOM(文档对象模型) </pre> <pre> DHTML:动态HTML,它不是一门语言,是多项技术综合体的简称。 DHTML = HTML + CSS + DOM + JS 技术边界: HTML: 负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作。 CSS: 负责提供样式属性,对标签中的数据进行样式的定义。 DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象,解析。 在对象中定义了更多的属性和行为,便于对对象进行操作。 JS: 负责提供程序设计语言。--if, for, var , function, ... </pre> <p id="p1"> </p> <input type="button" value="dhtml简单演示" onclick="aa();"> <script type="text/javascript"> function aa(){ var objp = document.getElementById("p1"); //设置纯文本 //objp.innerText=objp.innerText+"湖南城市学院"; //设置HTML格式串 objp.innerHTML = objp.innerHTML + "<button>aa</button>" objp.className = "d"; } </script> </body> </html>
相关文章:
第1篇快速入门—js基础实战中的Date、Math、Global对象
第3篇快速入门—js基础实战应用代码分享
相关视频:
前端JS开发27个经典实战视频教程-免费在线视频教程
以上就是第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM的详细内容,更多请关注Gxl网其它相关文章!