目录一、JavaScript(WebAPI)1. WebAPI 背景知识2. 什么是 API二、DOM 基本概念1. 什么是 DOM2. DOM 树三、获取元素1. querySelector2. 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. 什么是 APIAPI 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOMBOM所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.二、DOM 基本概念1. 什么是 DOMDOM 全称为 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 classboxabc/div div ididdef/div h3spaninput typetext/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); /script2. querySelectorAll使用 querySelectorAll 用法和上面类似.div classboxabc/div div ididdef/div script var elems document.querySelectorAll(div); console.log(elems); /scriptbody div classbox1box1/div div classbox2box2/div h3spaninput typetext/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 typebutton value这是一个按钮 /body script // 事件源 let button document.querySelector(input) // 绑定事件类型(点击事件) // 函数设定了事件处理程序 button.onclick function() { alert(Hello) } /script这个函数我们没有主动去调用他,他能被调用是因为当浏览器监听到了这个点击事件后,浏览器会自动调用function这个匿名函数五、键盘按下事件 01--onkeydownbody !-- input typebutton value这是一个按钮 -- input typetext /body script let input document.querySelector(input) input.onkeydown function() { console.log(键盘正在按下) } /script六、键盘按下事件 02--onkeydownbody !-- input typebutton value这是一个按钮 -- input typetext /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) } /scriptonkeydown不区分大小写七、键盘按下事件 03--onkeypressonkeypress区分大小写body input typetext /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--onkeyupbody input typetext onkeyupmyOnkeyUp() /body script function myOnkeyUp() { console.log(按键被抬起) } /script九、键盘按下事件 05注释不是所有键例如 ALT、CTRL、SHIFT、ESC都会在所有浏览器中触发 onkeypress 事件。如需只检测用户是否按下了某个键请改用 onkeydown 事件因为它适用于所有键。body input typetext onkeyupmyOnkeyUp() /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
17.从零开始学JS：querySelector 获取元素与事件监听实战
目录一、JavaScript(WebAPI)1. WebAPI 背景知识2. 什么是 API二、DOM 基本概念1. 什么是 DOM2. DOM 树三、获取元素1. querySelector2. 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. 什么是 APIAPI 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOMBOM所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.二、DOM 基本概念1. 什么是 DOMDOM 全称为 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 classboxabc/div div ididdef/div h3spaninput typetext/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); /script2. querySelectorAll使用 querySelectorAll 用法和上面类似.div classboxabc/div div ididdef/div script var elems document.querySelectorAll(div); console.log(elems); /scriptbody div classbox1box1/div div classbox2box2/div h3spaninput typetext/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 typebutton value这是一个按钮 /body script // 事件源 let button document.querySelector(input) // 绑定事件类型(点击事件) // 函数设定了事件处理程序 button.onclick function() { alert(Hello) } /script这个函数我们没有主动去调用他,他能被调用是因为当浏览器监听到了这个点击事件后,浏览器会自动调用function这个匿名函数五、键盘按下事件 01--onkeydownbody !-- input typebutton value这是一个按钮 -- input typetext /body script let input document.querySelector(input) input.onkeydown function() { console.log(键盘正在按下) } /script六、键盘按下事件 02--onkeydownbody !-- input typebutton value这是一个按钮 -- input typetext /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) } /scriptonkeydown不区分大小写七、键盘按下事件 03--onkeypressonkeypress区分大小写body input typetext /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--onkeyupbody input typetext onkeyupmyOnkeyUp() /body script function myOnkeyUp() { console.log(按键被抬起) } /script九、键盘按下事件 05注释不是所有键例如 ALT、CTRL、SHIFT、ESC都会在所有浏览器中触发 onkeypress 事件。如需只检测用户是否按下了某个键请改用 onkeydown 事件因为它适用于所有键。body input typetext onkeyupmyOnkeyUp() /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
