目录
一、JavaScript(WebAPI)
1. WebAPI 背景知识
2. 什么是 API
二、DOM 基本概念
1. 什么是 DOM
2. DOM 树
三、获取元素
1. querySelector
2. querySelectorAll
四、事件初识
1. 基本概念
2. 事件三要素
3. 点击事件
五、键盘按下事件 01--onkeydown
六、键盘按下事件 02--onkeydown
七、键盘按下事件 03--onkeypress
八、键盘按下事件 04--onkeyup
九、键盘按下事件 05
一、JavaScript(WebAPI)
1. WebAPI 背景知识
什么是 WebAPI
前面学习的 JS 分成三个大的部分
ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器
WebAPI 就包含了 DOM + BOM.
这个是 W3C 组织规定的。（和制定 ECMAScript 标准的大佬们不是一伙人）。
前面学的 JS 基础语法主要学的是 ECMAScript, 这让我们建立基本的编程思维. 相当于练武需要先扎马步.
但是真正来写一个更加复杂的有交互式的页面, 还需要 WebAPI 的支持. 相当于各种招式.
2. 什么是 API
API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM
所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.
相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.
二、DOM 基本概念
1. 什么是 DOM
DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
网页内容
网页结构
网页样式
2. DOM 树
一个页面的结构是一个树形结构, 称为 DOM 树.
树形结构在数据结构阶段会介绍. 就可以简单理解成类似于“家谱”这种结构
重要概念:
文档: 一个页面就是一个文档, 使用 document 表示.
元素: 页面中所有的标签都称为元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
这些文档等概念在 JS 代码中就对应一个个的对象.
所以才叫“文档对象模型”.
三、获取元素
这部分工作类似于 CSS 选择器的功能.
1. querySelector
这个是 HTML5 新增的, IE9 及以上版本才能使用.
前面的几种方式获取元素的时候都比较麻烦. 而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象.
var element = document.querySelector(selectors);selectors 包含一个或多个要匹配的选择器的 DOM字符串
domString。该字符串必须是有效的 CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素
正因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器.
例如.box是类选择器,#star是 id 选择器 等.
<div class="box">abc</div> <div id="id">def</div> <h3><span><input type="text"></span></h3> <script> var elem1 = document.querySelector('.box'); console.log(elem1); var elem2 = document.querySelector('#id'); console.log(elem2); var elem3 = document.querySelector('h3 span input'); console.log(elem3); </script>2. querySelectorAll
使用 querySelectorAll 用法和上面类似.
<div class="box">abc</div> <div id="id">def</div> <script> var elems = document.querySelectorAll('div'); console.log(elems); </script><body> <div class="box1">box1</div> <div class="box2">box2</div> <h3><span><input type="text"></span></h3> </body> <script> console.log(document.querySelector('.box1')) console.log(document.querySelector('span').querySelector('input')) console.log(document.querySelectorAll('div')) </script>四、事件初识
1. 基本概念
JS 要构建动态页面, 就需要感知到用户的行为.
用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.
浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略.
2. 事件三要素
事件源: 哪个元素触发的
事件类型: 是点击, 选中, 还是修改?
事件处理程序: 进一步如何处理, 往往是一个回调函数.
3. 点击事件
<body> <input type="button" value="这是一个按钮"> </body> <script> // 事件源 let button = document.querySelector('input') // 绑定事件类型(点击事件) // 函数设定了事件处理程序 button.onclick = function() { alert("Hello") } </script>这个函数我们没有主动去调用他,
他能被调用是因为当浏览器监听到了这个点击事件后,
浏览器会自动调用function这个匿名函数
五、键盘按下事件 01--onkeydown
<body> <!-- <input type="button" value="这是一个按钮"> --> <input type="text"> </body> <script> let input = document.querySelector('input') input.onkeydown = function() { console.log("键盘正在按下") } </script>六、键盘按下事件 02--onkeydown
<body> <!-- <input type="button" value="这是一个按钮"> --> <input type="text"> </body> <script> // 事件源 let input = document.querySelector('input') input.onkeydown = function(event) { console.log("键盘正在按下"); let a = event.keyCode; let b = String.fromCharCode(a) console.log(b) } </script>onkeydown不区分大小写
七、键盘按下事件 03--onkeypress
onkeypress区分大小写
<body> <input type="text" > </body> <script> // // 事件源 // let button = document.querySelector('input') // // 绑定事件类型(点击事件) // // 函数设定了事件处理程序 // button.onclick = function() { // alert("Hello") // } // 事件源 let input = document.querySelector('input') input.onkeypress = function(event) { console.log("键盘正在按下"); let a = event.keyCode; let b = String.fromCharCode(a) console.log(b) } </script>八、键盘按下事件 04--onkeyup
<body> <input type="text" onkeyup="myOnkeyUp()"> </body> <script> function myOnkeyUp() { console.log("按键被抬起") } </script>九、键盘按下事件 05
注释：不是所有键（例如 ALT、CTRL、SHIFT、ESC）都会在所有浏览器中触发 onkeypress 事件。如需只检测用户是否按下了某个键，请改用 onkeydown 事件，因为它适用于所有键。
<body> <input type="text" onkeyup="myOnkeyUp()"> </body> <script> // 事件源 let input = document.querySelector('input') input.onkeydown = function(event) { // 如果按键按下的是shift此时弹出一个弹窗，提示shift被按下 if(event.shiftKey) { alert("shift键被按下") } if(event.altKey) { alert("alt键被按下") } } function myOnkeyUp() { console.log("按键被抬起") } </script>
