DOM 的基本概念及操作

获取非常规元素

document.documentElement 返回html元素对象
document.head
document.body 返回body元素对象

获取常规元素

可以设定 html 和 css 支持的所有语法形式:

                    'div'               标签名称
                    '#id属性值'         标签id的属性值
                    '.class属性值'      标签class的属性值

                    'ul>li'                 父子选择器
                    'ul li'                 后代选择器
                    'div + span'            相邻兄弟选择器
                    'div ~ span'            一般兄弟选择器
                    'ul li:first-child()'   第一个标签 并且是 li
                    'ul li:last-child()'    最后一个标签 并且是 li
                    'ul li:nth-child()'     按照设定的标签顺序
                    .....

                    '[属性]'            标签属性
                    '[属性="属性值"]'    标签属性属性值
                    '[属性*="属性值"]'    标签属性属性值
                    '[属性^="属性值"]'    标签属性属性值
                    '[属性$="属性值"]'    标签属性属性值

getElementById('Id属性值')

通过Id属性值获取标签对象,获取的结果是一个独立的标签对象;

getElementsByClassName("条件")

返回值: 根据类名获得某些元素集合;

getElementsByTagName
querySelector("条件")
返回值: 获取的结果是符合条件的第一个独立标签对象;

有符合条件的标签获取结果是标签对象;
没有符合条件的标签获取结果是 null;
标签对象支持直接执行 DOM操作;

获取结果是null 不能执行 DOM 操作;操作会报错;
Uncaught TypeError: Cannot read properties of null (reading 'style')

好用的但是低版本IE浏览器不支持:
<body>
    <div>我是第一个div标签</div>
    <div>我是第二个div标签</div>
<script>
var oDiv = document.querySelector('div');
        console.log( oDiv ); 
        
         // 一个标签对象可以直接执行DOM操作
        oDiv.style.color = 'red';
</script>
</body>

querySelectorAll("条件")

返回值:按照条件获取所有符合的标签;
获取结果: 一定是一个伪数组; [ 如果有符合条件的标签伪数组中存储标签对象 ][ 如果没有符合条件的标签伪数组是一个空数组(length是0) 支持 forEach 循环遍历 ]

什么是伪数组?

概念: 是一种按照索引下标存储数据具有length 属性的对象,因为是对象,所以不能调用数组的方法,比如forEach() push()
有索引下标,有length属性有函数方法,但是函数方法和正常的数组函数方法不同 ;
注意: 伪数组不能直接执行 DOM操作;要么通过 []语法获取一个标签对象进行操作; 要么通过循环语法循环遍历伪数组操作存储的每一个标签对象

课堂案例

操作属性

innerHTML
innerText
getAttribute
setAttribute
removeAttribute
style
className
H5 自定义属性

DOM (下)

获取元素样式

获取元素类名

DOM 节点

元素节点
属性节点
文本节点

获取节点

childNodes: 获取某一节点下所有的子一级节点
children: 获取某一节点下所有的子一级 元素节点
firstChild: 获取某一节点下子一级的 第一个节点
lastChild: 获取某一节点下子一级的 最后一个节点
firstElementChild: 获取某一节点下子一级的 第一个元素节点
lastElementChild: 获取某一节点下子一级的 最后一个元素节点
nextSibling: 获取某一个节点的 下一个兄弟节点
previousSibling: 获取某一个节点的 上一个兄弟节点
nextElementSibling 获取某一个节点的 下一个元素节点
previousElementSibling 获取某一个节点的 上一个元素节点
parentNode: 获取某一个节点的 父节点
attributes: 获取某一个 元素节点 的所有 属性节点

节点属性

nodeType 获取节点类型, 用数字表示
nodeName 获取节点的节点名称
nodeValue 获取节点的值

获取元素的非行内样式

getComputedStyle (非IE使用)
currentStyle (IE使用)

操纵 DOM 节点

创建节点
向页面中加入一个节点
删除页面中的某一个节点
修改页面中的某一个节点
克隆页面中的某一个节点

获取元素偏移量

offsetParent
offsetLeft / offsetTop

获取元素尺寸

offsetWidth 和 offsetHeight
clientWidth 和 clientHeight
注意

获取浏览器窗口尺寸

clientWidth
clientHeight

EVENT(上)

什么是事件 (一个事件的组成)

常见的事件 (了解)

浏览器事件
鼠标事件
键盘事件
表单事件

随堂练习

选项卡

定时器

两种定时器的介绍和作用 ( setTimeout / setInterval )

定时器的返回值及意义

关闭定时器

简单的代码异步执行机制

时间对象

时间对象的创建

将日期对象格式化成指定内容

getFullYear
getMonth
getDate
getHours
getMinutes
getSeconds
getDay
getTime

设置相关

setFullYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
setMilliseconds()
setTime()

BOM 的概念和常用 API

BOM 操作-浏览器三大弹窗

innerHeight 和 innerWidth 获取浏览器窗口的尺寸(包含滚动条)

浏览器的弹出层 (confirm / alert / prompt)

浏览器的地址信息 (location)

location.href
location.reload

浏览器的历史记录

history.back
history.forward

浏览器的版本信息 navigator (了解)

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器的滚动距离

document.body.scrollTop
document.documentElement.scrollTop

document.body.scrollLeft
document.documentElement.scrollLeft

浏览器的本地存储(localStorage---sessionStorage---cookie)

三者的差异(出现时间-存储大小-前后端交互-前后端操作-过期时间)

BOM操作-浏览器历史记录

window.history.length; ->当前窗口显示的页面个数;
window.history.back(); ->返回上一个浏览器页面,对应浏览器左箭头操作;
window.history.forward(); -> 返回下一个浏览器页面,对应浏览器右箭头操作;
window.history.go( +/-数值 ); -> 正数跳转到下几个页面 ; 负数返回到上几个页面;

BOM操作-浏览器地址栏数据信息

ip地址: 每台计算机在互联网上的身份证,127.0.0.1 专门特指运行程序的这台电脑;
域名: ip地址编译成域名方便用户使用,localhost 当前电脑的域名 ;
端口号: 计算机硬件设备的一项,是计算机软件和计算机主机交流沟通的通道,[端口号的范围是 0-65535];
vscode中 live server 插件默认的端口号是 [5500] ;


 1. window.location.href  // 浏览器地址栏中所有的数据信息;
 
 2. window.location.origin //请求协议 + 服务器地址 + 端口号;
 
 3. window.location.pathname // 文件地址路径;
 
 4. window.location.origin + window.location.pathname  = window.location.href ;
 
 5. window.location.port  //服务器的端口号;
 
 6. window.location.protocol //请求协议;
 
 7. window.location.search //当前请求携带的参数数据;

BOM操作

获取: window.location.href ;
语法: var 变量 = window.location.href ; -作用:获取浏览器地址栏中完整的数据信息
注意: 中文特殊符号等会显示成十六进制形式;
设定: window.location.href = 'url地址' ;
作用: 设定浏览器地址栏的数据信息,也就是设定当前窗口显示内容的URL地址,显示出的执行效果和a标签页面跳转设定相同;

<style>
        img{
            width: 150px;
        }

        img:hover{
            cursor: pointer;
        }
 </style>
 <body>
    <h1>我是08文件内容</h1>
    
    <div>我是div 点我去百度</div>

    <img src="./baidu.png" alt="">

    <script>
        // 获取div标签对象
        var oDiv = document.querySelector('div');

        // 获取img标签对象
        var oImg = document.querySelector('img');


        // 给div标签添加点击事件:
        oDiv.addEventListener( 'click' , function(){
            // 通过 window.location.href 设定 当前浏览器地址栏的数据信息
            // 也就是 设定 当前窗口显示的页面内容
            // 执行效果 和 a标签跳转效果相同
            window.location.href = 'https://www.baidu.com' ;

        })
    </script>
    </body>

传参-前端页面和页面的传参

本质: 向知道的url 地址发送请求;
前端发送请求的方式:

a标签
form标签
window.location.href

URL地址会相应请求结果,当前的响应结果大部分是显示一个页面

传参: 向URL地址发送请求时 携带的数据参数;

form标签传参:

通过form标签向其它页面发生请求并且携带参数;
form标签的重要属性:

action 发送请求的url地址;
method 发送请求的方式: [ get: 明文传参 ] [ post: 密文传参 ]

重点: 当前页面和页面的传参是前段程序之前完成传参,如果是前段和后端程序传参,标签 name属性相同,属性值不同 name的属性值需要添加 [ ];

<body>
   <form action="http://baidu.com" method="get">
   //get:在浏览器地址栏中携带参数数据,一般是向服务器执行搜索或者查询操作;
   //post: 在HTTP协议的请求体中携带参数数据,一般是向服务器执行其他操作;
   //name: 发送请求存储数据的容器,有name属性属性值才能携带参数完成;
   //value:设定标签存储数据数值,不能通过输入给标签输入数值的,可以通过value属性设定传参携带的数值数据;
    账号:<input type="text" name="username"><br>
    密码:<input type="password" name="userpwd"><br>
    性别:
        男<input type="radio" name="sex" value="男">
        女<input type="radio" name="sex" value="女">
        保密<input type="radio" name="sex" value="保密"><br>
    爱好:
       王者<input type="checkbox" name="hobby" value=" 王者">
       绝地求生<input type="checkbox" name="hobby" value=" 绝地求生">
       欢乐谷<input type="checkbox" name="hobby" value=" 欢乐谷">
       环球影城<input type="checkbox" name="hobby" value=" 环球影城"><br>
    <button>提交</button>
    </form>

a标签-href传参:

在 href中设定页面发送请求的url地址同时携带传参数据;
在 href中使用 ?问号间隔请求的url地址和携带传参数据;
注意: URL地址和携带参数之间使用 ? 问号间隔;携带参数必须是键值对: 键名=键值;多个键值对之间使用 & 符号间隔;

<body>
  <a href="../01_复习.html?name=张三&age=18&sex=男">传参</a> //这种方法只能是链接
  
  //问号之前的是:  a href="../01_复习.html ;问号之前是: URL地址;
  //问号之后是:  name=张三&age=18&sex=男 ; 问号之后是:携带的参数;
  //携带的参数: name=张三&age=18&sex=男 ;这些必须是键值对; 语法形式: 键名 = 键值
  //多个键值对之间 ; name=张三  和  age=18  和   sex=男;之间使用 & 符号间隔;
  
</body>

发送请求时同时携带参数;

<body>
<div>点我传参</div>
</body>
<script>
        // 获取div标签对象
        var oDiv = document.querySelector('div'); //这种方法可以传div butter...任何形式

        oDiv.addEventListener('click' , function(){
            // 通过window.location.href 发送请求 同时 携带参数
            window.location.href = '../01_复习.html?name=李四&age=20&sex=女';
            
        })
        
    </script>

window.location.href 获取浏览器地址栏参数数据:

中文特殊符号等和十六进制的转化语法:

window.decodeURIComponent() //将十六进制语法形式转化为对应的中文特殊符号;
window.encodeURIComponent() //将中文特殊符号等转化为对应的十六进制;

事件绑定语法:

事件监听语法形式:

语法: 事件源.addEventListener( 事件类型, 事件处理函数 );

名词解释:

事件源: 绑定事件的标签对象;
事件类型: 触发执行的事件的时间类型;
事件处理函数:触发事件是执行的函数的程序;一般是回调函数,可以赋值函数名称或者匿名函数

事件监听语法形式:
<body>

<div>我是div标签</div>

   <script>
        // 获取标签对象 
        var oDiv = document.querySelector('div');
        
        // 事件监听语法 使用的是 回调函数的语法形式 
        // 同一个事件类型 可以触发执行多个事件处理函数,控制台输出多个值
        oDiv.addEventListener( 'click' , function(){ console.log(111) } );
        oDiv.addEventListener( 'click' , function(){ console.log(222) } );
        oDiv.addEventListener( 'click' , function(){ console.log(333) } );
        oDiv.addEventListener( 'click' , function(){ console.log(444) } );
        
    </script>
    <body>

on语法绑定事件:
1. 语法:事件源.on事件类型 = 时间处理函数 ; [实际项目中不推荐使用on语法];

 on语法绑定事件:
 <body>
 
<div>我是div标签</div>

   <script>
        // 获取标签对象 
        var oDiv = document.querySelector('div');
        
        // 使用的是 = 等号 赋值语法
        // 后赋值的事件处理函数会覆盖之前赋值的事件处理函数
        // 一个事件类型只能绑定一个事件处理函数,控制台只输出最后一个值;
        oDiv.onclick = function(){ console.log(111) };
        oDiv.onclick = function(){ console.log(222) };
        oDiv.onclick = function(){ console.log(333) };
        oDiv.onclick = function(){ console.log(444) };
     </script>
    </body>

事件删除语法:

事件监听语法删除绑定事件:
注意: 给标签对象重新使用 on 语法绑定一个空函数,触发的是一个空函数,并没有对应的执行程序;

on语法对绑定事件的删除:
<body>
    <div>我是div标签</div>

    <script>
        // 获取标签对象
        var oDiv = document.querySelector('div');

        // on语法绑定事件:
        oDiv.onclick = function(){ console.log(111) };

        // on语法删除绑定事件:
        // 一般是赋值一个空函数 覆盖之前赋值的函数程序
        oDiv.onclick = function(){} ;
 </script>
 </body>

on语法对绑定事件的删除 :
语法: 事件源.removeEventListener( 事件类型,事件处理函数);
注意: 只能删除绑定的函数名称,不能删除绑定的匿名函数;

 事件监听语法删除绑定事件:
<body>
    <div>我是div标签</div>

    <script>
        // 获取标签对象
        var oDiv = document.querySelector('div');
        
        //事件监听语法绑定函数
        // 事件处理函数是 匿名函数
        oDiv.addEventListener( 'click' , function(){ console.log(111) } );
        oDiv.addEventListener( 'click' , function(){ console.log(222) } );
        // 事件处理函数是 函数名称
        oDiv.addEventListener( 'click' , fun1 );
        oDiv.addEventListener( 'click' , fun2 );
        
        // 事件监听语法 删除事件处理函数 
        // 绑定的事件处理函数是 函数名称 可以 删除绑定的事件处理函数
        oDiv.removeEventListener( 'click' , fun1 );
        oDiv.removeEventListener( 'click' , fun2 );

        // 绑定的事件处理函数是 匿名函数 不能 删除绑定的事件处理函数
        oDiv.removeEventListener( 'click' , function(){ console.log(111) } );
        // 原因 两个匿名函数 程序代码相同 但是 内存地址不同
        // 第一次赋值绑定的函数内存地址 假如是 00ff11
        // 第二次赋值删除的函数内存地址 一定是一个新的内存地址


        function fun1(){ console.log(333) };
        function fun2(){ console.log(444) };

BOM操作特殊的事假类型

window.close( ) ; 关闭当前窗口;

  // 关闭当前窗口
<body>
    <button>关闭</button>
    <button>刷新</button>
    <button>替换</button>
    <button>打开</button>
   <script>
        var oBtnClose = document.querySelectorAll('button')[0];
        oBtnClose.addEventListener( 'click' , function(){

            window.close();  //效果: 点击关闭按钮直接关闭当前窗口;

        })
    </script>
</body>

window.location.reload( ); 刷新当前窗口或者页面;

 // 刷新当前窗口
 <body>
    <button>关闭</button>
    <button>刷新</button>
    <button>替换</button>
    <button>打开</button>
  <script>
   var oBtnReload = document.querySelectorAll('button')[1];
        oBtnReload.addEventListener( 'click' , function(){

            window.location.reload(); //效果:  点击刷新按钮,当前页面刷新一次;

        })
  </script>
 </body>

window.location.replace( ) ; 替换当前窗口显示页面,替换操作执行之后不能触发返回上一个页面操作;

 // 替换当前窗口
 <body>
    <a href="https://www.baidu.com">百度</a><br>
    <button>关闭</button>
    <button>刷新</button>
    <button>替换</button>
    <button>打开</button>
    <script>
     var oBtnReplace = document.querySelectorAll('button')[2];
        oBtnReplace.addEventListener( 'click' , function(){

            window.location.replace('https://www.baidu.com'); //效果: 点击跳转按钮.跳转到百度窗口,但是不能触发返回到之前页面;

        })

   </script>
      </body>

window.open( ) ; 新窗口打开页面;

 // 新窗口打开
 <body>
    <a href="https://www.baidu.com">百度</a><br>
    <button>关闭</button>
    <button>刷新</button>
    <button>替换</button>
    <button>打开</button>
    <script> 
var oBtnOpen = document.querySelectorAll('button')[3];
        oBtnOpen.addEventListener( 'click' , function(){

            window.open('https://www.baidu.com'); //点击打开按钮,跳转到百度页面.

        })
        
   </script>
      </body>

BOM操作加载事件:

浏览器加载事件: window.addEventListener( " load" , function( ){ })
注意: 在html标签 CSS样式 HTML标签内容,都加载结束之后,再触发执行设定的程序; -实际项目中: 为了确保JS程序是在HTML标签.CSS样式.标签内容加载完毕后触发执行,会将JS程序设定在加载事件中执行;
实际项目中使用的加载事件是 Vue等框架中的加载事件

JavaScript事件类型:

鼠标事件:

click: 左键单击
dblclick 左键双击
contextmenu 右键单击
mousedown 按键按下
mouseup 按键抬起
mousemove 鼠标移动
mouseover 鼠标移入
mouseout 鼠标移出
mouseenter 鼠标移入
mouseleave 鼠标移出

  <style>
        .box {
            width: 600px;
            height: 600px;
            background: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .middle {
            width: 400px;
            height: 400px;
            background: orange;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
    <body>
    <div class="box">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>
<script>
// 获取div标签对象
        var oDiv = document.querySelector('div');

        //左键单击
        oDiv.addEventListener( 'click' , function(){ console.log( 111 ) });

        // 左键双击
        oDiv.addEventListener( 'dblclick' , function(){ console.log( 222 ) });

        //右键单击
        oDiv.addEventListener( 'contextmenu' , function(){ console.log( 333 ) }); //JavaScript右键单击有默认触发执行事件,弹出右键菜单栏;默认事件可以通过 事件对象 阻止执行

        // 按键按下
        oDiv.addEventListener( 'mousedown' , function(){ console.log( 444 ) });

        // 按键抬起
        oDiv.addEventListener( 'mouseup' , function(){ console.log( 555 ) });//按键按下按键抬起 两个动作都执行完毕完成有一个完整的鼠标单击;


        //鼠标移动
        oDiv.addEventListener( 'mousemove' , function(){ console.log( 666 ) });//在事件源范围内 移动鼠标触发执行事件;

        // 鼠标移入
        oDiv.addEventListener('mouseover', function () { console.log('移入') });

        // 鼠标移出
        oDiv.addEventListener('mouseout', function () { console.log('移出') });//给事件源绑定事件 ,事件源的后代标签也会触发事件; 经过后代标签边界线时 ,先触发移出事件,再触发移入事件;


        //鼠标移入
        oDiv.addEventListener('mouseenter', function () { console.log('移入') });

        // 鼠标移出
        oDiv.addEventListener('mouseleave', function () { console.log('移出') });//给事件源绑定事件 ,事件源的后代标签不会触发事件; 
        //实际项目中两种事件类型都会使用 需要根据具体需求判断使用什么事件类型;

</script>
</body>

鼠标事件的事件对象:MouseEvent.event;

事件对象:事件处理函数中第一个形参称为事件对象;触发执行事件函数时 JavaScript程序自动向事件对象存储数据;
触发事件: 获取标签对象的相关数据信息;点击不同的标签,事件对象不同;
事件对象.target: 本质和通过DOM操作获取的标签对象是完全相同的;可以支持DOM操作;它存储触发事件的标签对象;

event.target 简单理解就是 点击对象中的的那个标签;
event.target.style.background = getRGB() ; 意思就是点击事件对象中 style标签让背景颜色改为RGB...
<script>
oDivBox.addEventListener( 'click' , function( event ){
            console.log( 111 );

            console.log( event.target );
</script>

事件对象.clientX / 事件对象.clientY 的使用场景: 如果标签有固定定位, 也就是页面滚动,标签没有一起滚动;
事件对象.PageX / 事件对象.PageY的使用场景: 如果标签没有固定定位, 也就是页面滚动,标签一起滚动;

event.clientX 返回鼠标点击位置相对于浏览器窗口可视区左上角的X坐标位置;
event.clientY 返回鼠标点击位置相对于浏览器窗口可视区的Y坐标;
event.pageX 返回鼠标点击位置相对于文档页面的X坐标 IE9+支持;
event.pageY 返回鼠标点击位置相对于文档页面的Y坐标 IE9+支持;
event.screenX 返回鼠标点击位置相对于电脑屏幕的X坐标;
event.screenY 返回鼠标点击位置相对于电脑屏幕的Y坐标;
event.offsetX 返回鼠标点击位置距离触发事件的标签对象左上角的坐标; 实际项目中一般不用;
event.offsetX 返回鼠标点击位置距离触发事件的标签对象左上角的坐标; 实际项目中一般不用;

键盘事件: KeyboardEvent.event

keydown 按键按下;

keydow 如果一直按下键盘按键,会一直触发执行;
<script>
 document.addEventListener( 'keydown' , function(){ console.log('aaa')} );
</script>

keyup 按键抬起;

keyup 当按下后 再抬起时执行
<script>
document.documentElement.addEventListener( 'keydown' , function(){ console.log('bbb')} );
</script>

keypress 按键按下;但是它不识别功能键;比如:Ctrl alt esc shift....

<script>
  document.addEventListener('keypress', function () { console.log('keypress') });
</script>

重点: 不是所有的标签都支持直接绑定键盘事件,只有可以获得焦点的标签支持直接绑定键盘事件;
实际项目中: 一般是给整个html文档 html标签 body标签直接绑定键盘事件;

// div标签不能获取焦点 不支持 直接绑定键盘事件;
<body>
   <div>我是div</div>
<script>

 var oDiv = document.querySelector('div');
        oDiv.addEventListener( 'keydown' , function(){
            console.log(111);
        })
        
</script>
</body>

 // input标签可以获取焦点 支持 直接绑定键盘事件;
 <body>
     <input type="text">
 <script>
  var oIpt = document.querySelector('input');
        oIpt.addEventListener( 'keydown' , function(){
            console.log(111);
        })
 </script>
 </body>

keydown 和 keypress 的区别:

区别:有些特殊的按键 keypress 不会触发;ctrl alt esc shift 左右箭头....
执行顺序: 最先执行keydown 再执行 keypress 最后执行keyup;
如果使用addEventListener不需要加 on;
<script>
        document.addEventListener('keydown', function () { console.log('keydown') });
        document.addEventListener('keypress', function () { console.log('keypress') });
</script>

事件对象:

概念: 所谓的事件对象,是在事件处理函数中设定的第一个形参 event/ e ;触发执行事件处理函数时,JavaScript程序自动向这个形参赋值存储实参;
事件对象存储的数据是: 触发事件的标签或者按键相关的数据信息;
实际项目中可以通过事件对象判断触发事件的标签或者按键,执行不同的程序;

 // 给整个文档 添加 键盘事件
 <script>
 document.addEventListener( 'keydown' , function( event ){
            console.log( event );
        })
 </script>

键盘事件中keyCode属性可以判断用户按下的哪个键:

keyCode :返回该键的ASCII值;
实际开发中: 我们更多的使用keyup 和keydown,它能识别键盘上所以得按键(包括功能键);keypress不识别功能键,但是keypress在keyCode属性中能区分键盘按键的大小写,返回不同的ASCII值;
语法: 事件对象.keyCode
兼容低版本火狐浏览器: 事件对象.which存储的也是按键编号;
判断 alt ctrl shift 按键有没有按下:

事件对象.altKey;
事件对象.ctrlKey;
事件对象.shiftKey; -返回值: 如果按下返回值是true; 如果没有按下返回值是 false

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值;
<script>
 document.addEventListener("keyup",function(event){
            // console.log(event);
            console.log("keyup:" +event.keyCode);
            //我们可以利用keycode返回的ASCII码值来判断用户按下了那个键;
            if(event.keyCode === 65){
                alert("您按下的a键");
            }else{
                alert("您按下的不是a键");
            }
        })
        document.addEventListener("keydown",function(event){
            // console.log(event);
            //我们的keyup和keydown 事件不区分键盘上字母大小写 a 和 A 得到的ASCII码的;
            console.log("keydown:" +event.keyCode);
            
        })
        document.addEventListener("keypress",function(event){
            // console.log(event);
            //我们的keypress 区分键盘上字母大小写 a ->97和 A ->65 得到的ASCII码的;
            console.log("keypress:" +event.keyCode);
        })
</script>

常用按键: 所有键盘所有计算机语言按键编号是统一的
按键编号:
                    w   87
                    s   83
                    a   65
                    d   68

                    上  38
                    下  40
                    左  37
                    右  39

                按 上 下 左 右 / alt+ w s a d 控制 p标签定位

表单事件:

focus 获取焦点
blur 失去焦点
change 失去焦点同时输入数据改变
input 输入数据
submit 表单提交事件

触摸事件: 只有移动端设备支持,PC端设备不支持;

touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动......

特殊事件:实际项目中一般不会使用:

transitionstart 过渡开始
transitionend 过渡结束
animationstart 动画开始
animationend 动画结束

写给 Javascript 初级学者的第 7 份笔记持续更新中~~~

DOM 的基本概念及操作

获取非常规元素

获取常规元素

课堂案例

操作属性

DOM (下)

获取元素样式

获取元素类名

DOM 节点

获取节点

节点属性

获取元素的非行内样式

操纵 DOM 节点

获取元素偏移量

获取元素尺寸

获取浏览器窗口尺寸

EVENT(上)

什么是 事件 (一个事件的组成)

常见的事件 (了解)

随堂练习

定时器

两种定时器的介绍和作用 ( setTimeout / setInterval )

定时器的返回值及意义

关闭定时器

简单的代码异步执行机制

时间对象

时间对象的创建

将日期对象格式化成指定内容

设置相关

BOM 的概念和常用 API

BOM 操作-浏览器三大弹窗

innerHeight 和 innerWidth 获取浏览器窗口的尺寸(包含滚动条)

浏览器的弹出层 (confirm / alert / prompt)

浏览器的地址信息 (location)

浏览器的历史记录

浏览器的版本信息 navigator (了解)

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器的滚动距离

浏览器的本地存储(localStorage---sessionStorage---cookie)

BOM操作-浏览器历史记录

BOM操作-浏览器地址栏数据信息

BOM操作

传参-前端页面和页面的传参

form标签传参:

a标签-href传参:

window.location.href 获取浏览器地址栏参数数据:

事件绑定语法:

事件删除语法:

BOM操作特殊的事假类型

BOM操作加载事件:

JavaScript事件类型:

鼠标事件:

鼠标事件的事件对象:MouseEvent.event;

键盘事件: KeyboardEvent.event

事件对象:

键盘事件中keyCode属性可以判断用户按下的哪个键:

表单事件:

触摸事件: 只有移动端设备支持,PC端设备不支持;

特殊事件:实际项目中一般不会使用:

什么是事件 (一个事件的组成)