JavaScript 系列博客（五） 前言
本篇博客学习 js 选择器来控制 css 和 html、使用事件（钩子函数）来处理事件完成后完成指定功能以及js 事件控制页面内容。
js 选择器在学习 js 选择器前需要了解几个概念。
节点（一）：在文档（document）中出现的所有内容都是 document 中的节点。
节点（二）：标签节点（元素 element） | 注释节点 | 文本节点 | <!doctype>节点。
js 选择器是将 js 与 html 建立起连接的桥梁，就好比 css 选择器是 css 与 html 的桥梁，不过js 中将 html 标签称为元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js选择器</title> <style> #d { color: red; } </style> </head> <body> <!--注释--> <div>我是ddd111</div> <div>我是ddd222</div> <div> <div></div> </div> <div> <div></div> </div> </body> </html> 通过 id 名进行匹配 <script> console.log(d); // 两个都可以匹配到 </script> 通过 getElement所有显示在页面中的内容都是属于文档（document）对象的内容，存放在文档中。
console.log(document) // id 获取 getElementById('id 名'); // 只能由 document 来调用 // class 获取 getElementByClassName('class 名'); // 可以由 document 以及所有父级调用 // tag 获取 getElementByTagName('标签名'); // 可以由 document 以及所属父级调用 querySelector // 获取第一个满足要求的目标 querySelector() // 获取所有满足要求的目标 querySelectorAll() // 1. 参数：采用的为 css 选择器语法 // 2. 可以由 document 以及父级来调用 // 3. 对 id 检索不严谨，慎用 id 选择器 js 操作页面内容文本内容
box.innerText // 可以设置，也可以直接获取值标签内容
box.innerHTML // 可以设置，也可以获取值，能解析 html 语法代码 box.outerHTML // 获取包含自身标签信息的所有子内容信息样式
/ box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式 // getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式) // 注: 获取计算后样式,需要关注值的格式页面标签全局属性操作
ele.getAttribute("alert"); // 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null ele.setAttribute("attr_key", "attr_value"); // 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值 // 注: 一般应用场景, 结合css的属性选择器完成样式修改 事件 // js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件 // 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件 // 指定功能: 就是开发者根据实际需求完整相应的功能实现 // 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能) // 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数) // 获取页面标签是前提 var div = document.querySelector('.div'); // 钩子条件: 双击 = 指定功能(自身背景颜色变红) div.ondblclick = function () { this.style.backgroundColor = 'red'; } 事件的绑定 // 第一种 box.onclick = function(){} // 只能绑定一个实现体, 如果有多次绑定, 保留最后一次 // box.onclick = null来取消事件的绑定 // 第二种 var fn = function() {} box.addEventListener('click', fn) // 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行 // box.removerEventListener('click', fn)来取消事件的绑定 // 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件) 事件对象 // 系统回调事件函数时, 传递了一个 事件(event) 实参 // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可 box.onclick = function(ev){ // 使用事件对象 // 特殊按键 eg: ev.altKey: true | false // 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡 ev.cancelBubber = true; // 取消默认事件 return false; }