JavaScript的BOM又是个啥

最新推荐文章于 2022-06-22 14:13:27 发布

一只编程的嵩鼠

最新推荐文章于 2022-06-22 14:13:27 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_44682019/article/details/108899427

版权

前端小白入门专栏收录该内容

30 篇文章 0 订阅

订阅专栏

BOM
掌握什么是BOM
掌握BOM对核心：-window对象
掌握window对象的控制，弹出窗口方法

BOM(Browser Object Model)浏览器对象模型
它提供的对象主要有：
window navigator screen history location document event
在这里插入图片描述
全局变量：脚本的任何一个地方都能调用的变量

所有的全局变量和全局方法都被归在window上

<body>
	<div id="box">
		<span>iphone6s</span>
		<input type="button" value="删除" id="btn">
	</div>
	<script>
       var age=15;
       function sayAge(){
       	  alert('我'+window.age);
       }
       // 声明一个全局变量
       window.username="marry";   //相当于 var username="marry";
       // 声明一个全局方法
       window.sayName=function(){
       	  alert("我是"+this.username);
       }
       //sayAge();
       //window.sayName();

       // confirm()
       // 获取按钮,绑定事件
       var btn=document.getElementById("btn");
       btn.onclick=function(){
       	   // 弹出确认对话框
       	   var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
       	   if(result){
              document.getElementById("box").style.display="none";
       	   }
       }
       // 弹出输入框
       //var message=prompt("请输入您的星座","天蝎座");
       //console.log(message);
	</script>
</body>

在这里插入图片描述
返回值：布尔值，当点确定时，comfirm()返回true，否则返回false

<body>
	<input type="button" value="退 出" id="quit">
	<script>
       window.onload = function(){
       	  // 打开子窗口，显示newwindow.html
       	  window.open("D:/little_tools/vip/html/test.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
       	  var quit = document.getElementById("quit");
       	  // 点击关闭当前窗口
       	  quit.onclick = function(){
       	  	  window.close();
       	  }
       }
	</script>
</body>

在这里插入图片描述

JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序执行。

掌握超时调用和间歇调用。

在这里插入图片描述

       //setTimeout("alert('hello')",4000);
       var fnCall=function(){
       	  alert("world");   //自定义函数
       }
       var timeout1=setTimeout(function(){
          alert("hello");   //匿名函数
       },2000)

//SetTimeout方法返回一个ID值，通过它用clearTimeout()取消超时调用
       clearTimeout(timeout1);

       //setTimeout(fnCall,5000);

setTimeout()只执行code一次，如果要多次调用，可以让code自己再次调用setTimeout（）

在这里插入图片描述
周期性执行的间歇调用

       /* var intervalId=setInterval(function(){
           console.log("您好");   //打印9次
        },1000)

        // 10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);*/
        
        var num=1,
            max=10,
            timer=null;// 超时调用的ID是个对象，null释放内存
       
       // 每隔1秒针num递增一次，直到num的值等于max清除
      /* timer=setInterval(function(){
           console.log(num);
           num++;
           if(num>max){
              clearInterval(timer);
           }
       },1000)*/

       // 使用超时调用实现
       function inCreamentNum(){
           console.log(num);   // 1 2 3 10 
           num++;      
           if(num<=max){
              setTimeout(inCreamentNum,1000); //
           }else{
           	  clearTimeout(timer);
           }
       }
       timer=setTimeout(inCreamentNum,1000);

location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些
导航的功能，它既是window对象的属性，也是document对象的属性。
在这里插入图片描述

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="返回顶部">
	<script>
       //console.log(location.href);
       //console.log(location.hash); //给网页后加#top可以取到#top
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
	</script>
</body>

在这里插入图片描述

location改变浏览器的位置
掌握位置操作，location.replace()和location.reload()函数

	<input type="button" value="刷新" id="reload">
	<script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html'; 这两种会产生回退按钮，下面replace则不会
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
         	 location.reload(true);
         }
	</script>

在这里插入图片描述
BOM中的history对象
history对象保存了用户在浏览器中访问页面的历史记录

<p><input type="button" value="后退" id="btn"></p>
<script>
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		history.back();
		history.go(-2);//回退2步
	}
</script>

Screen对象包含有关客户端显示屏幕的信息。
在这里插入图片描述

  console.log("页面宽："+screen.availWidth);
  console.log("页面高："+screen.availHeight);

  console.log("pageWidth:"+window.innerWidth);
  console.log("pageHeight:"+window.innerHeight);

navigator对象
在这里插入图片描述
UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

       //console.log(navigator.userAgent);
       // 判断浏览器
       function getBrowser(){
           var explorer = navigator.userAgent,
              browser;
           if(explorer.indexOf("MSIE")>-1){
              browser = "IE";
           }else if(explorer.indexOf("Chrome")>-1){
              browser = "Chrome";
           }else if(explorer.indexOf("Opera")>-1){
              browser = "Opera";
           }else if(explorer.indexOf("Safari")>-1){
              browser = "Safari";
           }
           return browser;
       }
       var browser = getBrowser();
       console.log("您当前使用的浏览器是："+browser);
       // 判断终端
       function isPc(){
          var userAgentInfo = navigator.userAgent,
              Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
              flag = true,i;
              console.log(userAgentInfo);
           for(i=0;i<Agents.length;i++){
              if(userAgentInfo.indexOf(Agents[i])>-1){
                 flag = false;
                 break;
              }
           }
           return flag;
       }
       var isPcs = isPc();
       console.log(isPcs);

indexOf(）方法返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现过，返回-1

IE不支持console.log()，用alert()

NEXT:
一个小栗子！

一只编程的嵩鼠

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的BOM又是个啥

BOM掌握什么是BOM掌握BOM对核心：-window对象掌握window对象的控制，弹出窗口方法BOM(Browser Object Model)浏览器对象模型它提供的对象主要有：window navigator screen history location document event全局变量：脚本的任何一个地方都能调用的变量所有的全局变量和全局方法都被归在window上<body> <div id="box"> <span>iphone
复制链接

扫一扫