搜索

首页 >web前端 >js教程 >第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM

第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM

php是最好的语言
php是最好的语言原创
2018-07-28 10:41:291224浏览


BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window

<!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 class="brush:php;toolbar:false">
  BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window

window中的属性演示



前进


两种定时器：

一次性定时器：setTimeout(),clearTimeout()

周期性定时器；setInterval(),clearInterval()

<!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>

 DOM--文档对象模型

文档对象模型(DOM: Document Object Model):

文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容

对象:封装了属性和行为的实体，可以被直接调用。

模型:所有标记型文档都具备一些共有特征的一个体现。 

DOM = BOM(浏览器对象模型) + DOM(文档对象模型)

DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。DHTML = HTML + CSS + DOM + JS
 技术边界:

HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。

 CSS: 负责提供样式属性，对标签中的数据进行样式的定义。

DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。在对象中定义了更多的属性和行为，便于对对象进行操作。

JS: 负责提供程序设计语言。--if, for, var , function, ...

<!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 class="brush:php;toolbar:false">
  文档对象模型(DOM: Document Object Model):
  文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
  对象:封装了属性和行为的实体，可以被直接调用。
  模型:所有标记型文档都具备一些共有特征的一个体现。 
  
  DOM = BOM(浏览器对象模型) + DOM(文档对象模型)

  DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
  DHTML = HTML + CSS + DOM + JS
  技术边界:
  HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
  CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
  DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。
               在对象中定义了更多的属性和行为，便于对对象进行操作。
  JS: 负责提供程序设计语言。--if, for, var , function, ...

 相关文章：

第1篇快速入门—js基础实战中的Date、Math、Global对象

第3篇快速入门—js基础实战应用代码分享

相关视频：

前端JS开发27个经典实战视频教程-免费在线视频教程

以上是第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM的详细内容。更多信息请关注PHP中文网其他相关文章！

css html Object if for 封装 date xml math var JS function 对象 dom bom
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：第3篇快速入门—js基础实战应用代码分享下一篇：第1篇快速入门—js基础实战中的Date、Math、Global对象

相关文章

查看更多