js(Dom+Bom)第六天（1）

webAPI

01-键盘事件

1. 知识点-onkeydown事件[掌握]

   onkeydown: 当键盘上的键被按下时候触发的一个事件
   

2. 知识点-onkeyup事件[掌握]

   onkeyup: 键盘上键弹起时候触发的一个事件
   

3. 知识点-onkeypress事件[了解]

   onkeypress: 当键盘上的键被按下时候触发的事件
   

4. onkeydown 和 onkeypress的区别

   onkeydown 事件课可以将键盘上所有的键都执行
   
   onkeypress: 无法执行功能键的事件(tab, shift, ctrl ....)
   

5. 键盘事件对象参数

• key

  e.key   ----> 获取键的名字
  

• keycode

  e.keyCode   -----> 键对应的值
  

02-BOM

☞概念

BOM: （Browser Object Model）即浏览器对象模型。

☞顶级对象

DOM对象  ----> 整个网页是一个对象   (document)

BOM对象  ----> 浏览器对象  (window)

js中的顶级对象是 window 对象. 可以省略不写.

☞学习路径

1. onload事件

   onload 事件, 当页面中的元素,外部的css样式都加载完成后,就会触发该事件
   window.onload = function() {
   	 	 	var div = document.querySelector('div');
   	 	 	console.log(div);
   }
   

2. location对象

   location对象是window对象下的一个属性，使用location可以设置或者获取浏览器地址栏中的 url
   

   • location对象中的属性

     • href属性

       保存的就是网页地址
       
       location.href  				----> 获取网页地址
       location.href = '网站地址'   ------> 设置
       
       备注:
       location.href = '网站地址' ; 在当前窗口中打开页面
       
       如果希望在新窗口中打开页面,那么使用
       window.open('url路径');
       

     • 其他方法介绍

       //作用: 页面跳转 (委派)
       location.assign('http://www.baidu.com');  //设置跳转页面
       
       //作用: 也是用来跳转页面的, 跳转页面后,浏览器中的后退按钮是不能点击的
       location.replace('http://www.baidu.com');
       
       
       //作用: 刷新页面
       location.reload(boolean);
       
       boolean参数: true 代表强制从服务端重新获取数据 , false 代表在本地缓存中获取数据
       

   • 其他属性与网站地址相关的属性[了解]

     1. location.protocol 获取当前网站地址的协议类型
     2. location.host 获取当前网站地址中的主机(IP地址)
     3. location.port 代表端口号(类似于房间号, 默认是 80)
     4. location.pathname 代表访问的具体的文件路径

3. 定时器

   1. setInterval()

      setInterval() 定时器类似于闹钟 (可以重复执行, 也可以停止)
      

      • 语法

        setInterval(function(){}, time);
        
        备注:
        1. time 时间参数表示的是一个毫秒
        2. 1000毫秒 = 1 秒
        3. 第一个参数既可以是匿名函数也可以是一个命名函数
        

      • 如何关掉setInterval定时器

        通过 clearInterval() 方法可以停止定时器(关掉定时器)
        
        备注:
        1. clearInterval() 方法中需要一个参数
        2. clearInterval() 的这个参数表示的就是定时器的标志(ID值)
        
        例如:
        //开启定时器
        var id = setInterval(function(){
        	console.log('你好');
        }, 2000);
        
        clearInterval(id);  //关掉定时器
        

   2. setTimeout()

      setTimeout() 定时器类似于定时炸弹 (到了规定的时间就执行, 不能重复执行)
      

      • 语法

        setTimeout(function(){}, time);
        
        备注:
        1. 第一个参数处理程序可以是匿名函数也可以是命名函数
        2. 第二参数表示的是一个延时时间,是一个毫秒单位
        
        特点:
        该定时器执行一次, 意思是多长时间之后执行函数中的代码
        

      • 如果关掉setTimeout?

        通过 clearTimeout() 方法关掉setTimeout定时器
        
        备注:
        1. clearTimeout() 中也需要一个定时器的id值
        
        例如:
        
        //开启定时器
        var id = setTimeout(function(){
        			console.log('你好');
        }, 5000);
        //关闭定时器
        clearTimeout(id);
        

4. 获取页面元素相关信息