BOM

1. BOM:Browser  Object Model
   浏览器  对象   模型
* 引用方法
  内部引用<script></script>
  外部引用<script src=""></script>
2. 什么是全局变量?
    每打开一个浏览器,就会创建一个window对象(全局对象)
    所有BOM的顶层对象就是window
   window可以直接使用全局变量(var声明)和全局函数(字面量)
   即window.属性  和  window.方法
 
3. 全局属性与window属性的区别?
   可以成功删除(以window.属性进行创建的变量),
   无法删除全局属性(即var声明的变量)
 
4. window的属性与方法
   以下不支持低版本(IE8)
   console.log("当前浏览器离屏幕X轴的距离:" + window.screenX);
   console.log("当前浏览器离屏幕Y轴的距离:" + window.screenY);
  
   不支持FireFox(火狐)
   console.log("当前浏览器离屏幕Left轴的距离:" + window.screenLeft);
   console.log("当前浏览器离屏幕Top轴的距离:" + window.screenTop);
  
   浏览器的尺寸(不包含控制台)
   console.log("当前浏览器的宽度:" + window.innerWidth);
   console.log("当前浏览器的高度:" + window.innerHeight);
  
   浏览器的尺寸(包含控制台)
   console.log("当前浏览器的宽度:" + window.outerWidth);
   console.log("当前浏览器的高度:" + window.outerHeight);
  
   滚动条的移动距离
   console.log("当前浏览器水平滚动条的移动距离:" + window.pageXOffset);
   console.log("当前浏览器垂直滚动条的移动距离:" + window.pageYOffset);
  
5. window的方法
   提示框、警示框
   window.alert("文字内容");
   确定框(会有返回值即布尔值)
   例:
   let option = window.confirm("是否继续通关!!!");     // 返回值 Boolean
   if(option){
   ​    console.log(`进入下一次..加载中。。`);
   }else{
   ​    console.log(`不进入下一关,游戏结束!!!`);
   }
  
   输入框    (返回值是用户的输入内容)
   例:
   let inputPhoneNo = window.prompt("请输入您的手机号?");
   let re = /^[1][3-9][0-9]{9}$/;
   if (re.test(inputPhoneNo)) {
   ​    window.alert(`输入正确`);
   } else {
   ​    window.alert(`请输入11位数字或正确的电话号码`);
   }
  
6. 如何打开一个新窗口
    参1:打开新页面的地址
    参2:以什么方式打开(_blank是默认值,_self)当前页面打开,还新页面打开
    参3:设置新窗口的尺寸
    参4:是否替换当前的历史记录 (true、false)
    例:
   let winEle;
   winEle = window.open("../index.html","_blank","width=500,height=500","true");
   winEle.close();
  
7. 设置新页面展示位置(有些浏览器已经不支持)
   winEle.moveTo(200,200);//起点是屏幕的00点
   winEle.moveBy(600,600); //起点是原来的位置,第1个参数:离左侧的偏移量   第1个参数:离上面的偏移量
  
###### 时间函数
1. 功能:在设定的时间内,重复执行同一段代码
2.  格式:setInterval(参1,参2);
    参1:调用函数或是代码块  (注:只函数名称,不要叫小括号)
    参2:以多长时间来执行一次,参1代码。   时间单位是毫秒   1s=1000ms
    参3以以后的参数,都是给参1进行传参
   例:
   倒计时:    5 4 3 2 1 
   let j =5;
   let timer = setInterval(F67, 1000);
   function F67(){
   ​    if(j>0){
   ​          console.log(j--);
   ​    }
   ​    else{
   ​        clearInterval(timer);
   ​    }
   }
   例2:
   给时间函数的参1,传参
   function F68(a,b){
   ​    console.log(a+b);
   ​    console.log(arguments[0],arguments[1]);
   }
  
   setInterval(F68,1000,1,2);
  
3.  时间函数和死循环的区别
    1-10代码
    11死循环   停 后面的代码不会执行
    12-30代码
    \*
    1-10代码
    11时间函数     clearInterval 停  因为时间函数是一个异步操作,要先把所有其它代码执行后完后,再来执行时间函数。
    12-30代码
   当到达设置的时间后,则执行参1的代码
   function F69(){
   ​    window.alert("你已经超时,系统即将关闭!!!");
   }
   setTimeout(F69,5000);
  
4. [扩展]: 时间函数参数1的另一种写法
  
   let i = 0;
   function F66() {
   ​    console.log(arguments[1]);
   ​    console.log(i);
   ​    i++;
   }
   setInterval('F66(1,2,3)',1000);
  
   function F69(){
   ​    window.alert("你已经超时,系统即将关闭!!!");
   }
   setTimeout("F69()",5000);
  
BOM和DOM的关系?
DOM是BOM的一分支  (子元素)
BOM:有以下分支
1、screen
2、navigator
3、location
4、history
5、document  (DOM)  也有很多分支,内容较多(丰富)
 
* screen  获取屏幕尺寸(不包含任务栏)
  let screenWidth = screen.availWidth;
  let screenHeight = screen.availHeight;
 
  console.log(`当前屏幕(显示器)宽度为:`,screenWidth);
  console.log(`当前屏幕(显示器)高度为:`,screenHeight);
 
* navigator  获取浏览器的信息
  let BName = navigator.appName;
  console.log(`当前浏览器为:`,BName);//chrome
 
  let BVer = navigator.appVersion;
  console.log(`当前浏览器版本号:`,BVer);//chrome
 
  let Blang = navigator.language;
  console.log(`当前浏览器语言:`,Blang);//chrome
 
* location  后面知识点
  let info = location.search;//获取地址栏?以后的信息  (用户提交的信息)
  console.log(`获取地址栏信息:`,info);
 
  let info2 = location.href; //获取地址栏所有信息
  console.log(`当前地址栏信息:`,info2);
 
  let info3 = location.port;//获取端口号
  console.log(`当前端口号:`,info3);
 
  let info4 = location.hash;//锚点信息
  console.log(`当前锚点的信息:`,info4);
 
* 当前页面会替换成新页面(即共用一个窗口)
   注:repalce是没有返回功能
  function F66() {
  ​    location.replace("./form.html");
  }
 
* 当前页面会替换成新页面(与原页面不是共用一个窗口)
    注:有返回功能
  function F67() {
  ​    location.assign("./form.html");
  }
 
* [history]历史记录
  后一页
  function F66() {
  ​    history.forward();
  }
  前一页
  function F67() {
  ​    history.back();
  }
 
根据不同实参的取值,达到不同的页面
history.go(-1); //取负值即前一个页面   如果给-2前2个页面
history.go(0);  //取0,即当前页面刷新
history.go(1);  //取正值即后一个页面   如果给2后2个页面
console.log(`当前历史记录条数`,history.length);
posted @ 2020-02-20 14:16  芮祁&  阅读(146)  评论(0编辑  收藏  举报