JS提升
- Web APIs和JS基础关联性
API: 功能实现的接口
Web API: 浏览器提高的一套操作浏览器功能和页面元素的API（BOM和DOM）
MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API （webapi常用的API接口）
DOM
- 文档对象模型， 处理可扩展标记语言（HTML, XML）的标准编程接口，W3C定义了一系列DOM接口，通过接口可以改变网页内容，结构和样式。
- 获取对象
- . getElementByld( )
- . getElementsByTagName()
- 通过HTML5新增方法（ie6,7,8不能使用， 要IE9以上）
document.getElementsByClassName(‘类名’);
- . 获取特殊元素（body, html）
获取body元素
document.body //返回body元素对象
获取html元素
Document.documentElement //返回html元素对象
- 事件概述
事件三要素
常见的鼠标事件
- 操作元素
1). 改变元素内容
Element.innerText 他会去除html标签，同时会去除空格与换行
比如<strong>，会直接显示标签 非标准，
Element.innerHTML 保留html标签 同时保留空格与换行 标准 （多用）
- . 常用元素的属性操作
innerText, innerHtml改变元素内容
src, href, id, alt, title
3). 密码输入时眼睛例子
4). 样式属性
驼峰命名法
当样式过多的时候用element.className
即当点击一个按钮时元素变成另一个状态， 我们可以写一个改变后的change类， 当点击时调用这个类
Test.οnclick=function(){
this.className=’change’;
}
如果想要在保留原来的类名的基础上加上新的类， 则：
this.className=’change first’
5). 关闭二维码操作
display:none; 隐藏元素
display: block; 显示元素
6). 精灵图制作
- 首先精灵图排列要有规律
- 利用for循环，修改精灵图片的背景位置background-position
- 分析规律
例子
- . 获得焦点onfocus 失去焦点onblur
- . 密码输入
8). 排他思想
- . 鼠标经过
鼠标经过onmouseover 鼠标离开onmouseout
当鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
th行不需要变色，td需要变色
- . 全选按钮和取消全选
让所有复选框的checked属性（选中状态）跟随全选按钮即可
- DOM获取元素的方式
- 利用DOM提供的方法获取元素
document.getElementById();
document.getElementByTagName();
document.querySelector();
缺点：逻辑性不强 繁琐
- 利用节点的层级关系获取元素
nodeType（节点类型）：元素节点 属性节点 文本节点
文本节点：文字 空格 换行
nodeName（节点名称）
nodeValue（节点值）
- 父级节点：node.childNodes
- 子节点：Node.children; Node.firstchild； Node.lastchild；
Node.firstElementChild 子元素节点 找不到元素返回null ie9以上支持 Node.lastElementChild Node.children[0]; 第一个子元素
- 下拉菜单
- 兄弟节点
- node.nextSibling 下一个兄弟节点 包含元素节点或文本节点，换行 node.previousSibling 上一个兄弟节点 同上
- node.nextElementSibling 下一个元素兄弟节点 ie9以上支持
node.previousElementSibling
- 创建节点 （客户发布文章下面即可看到发布文章）
document.createElement(‘tagName’) 创建节点
document.appendChild()添加节点
document.insertBefore(child, 指定元素）；
- 删除节点
node.removeChild(child) node必须是child的父亲
node.removeChild()方法从DOM中删除一个子节点, 返回删除的节点 例：node.removeChild(ul.children[0]);
<a href=”javascript:;”>阻止链接跳转
- 复制节点（克隆节点）
Node.cloneNode();
注意： 1. 括号参数为空或者false，则浅拷贝，即克隆复制节点本身，不克隆里面的子节点
- 括号为true深拷贝 复制标签复制里面的内容
for(var k in obj){} 这个k得到的是属性名 obj[k]=属性值
- 动态表格数据
- 三种动态创建元素的区别
- document.write(‘<div>a</div>’);
当文档流执行完，它会导致页面全部重绘
window.οnlοad=function(){} 当页面加载完
- innerHTML创建元素
当创建多个元素时效率更高，但是不要采取拼接字符串的形式，采取数组形式拼接， inn.innerHTML += ‘a’ 是采取拼接字符串的形式，十分耗时
Arr.join(‘’)将数组转换为字符串
- createElement(‘a’) 创建多个元素效率稍微低一点
- DOM重点核心
文档对象模型， 是w3c组织推荐的处理可扩展标记语言（HTML,XML）的标准编程接口
W3c已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容，结构和样式
获取的DOM元素是一个对象
Dom操作主要针对元素的操作，有创建，增，删，改， 查，属性操作，事件操作。
- 创建
- document.write(‘’);
- innerHTML
- createElement(‘’)
- 增
- appendChild(); 从后面添加
- insertBefore();
3.删removeChild();
4. 改
主要修改dom的元素属性，dom元素的内容，属性，表单的值等
- 修改元素属性：src, href, title等
- 修改普通元素内容：innerHTML, innerText
- 修改表单元素：value, type, disabled等
- 修改元素样式：style, className
5.查
主要获取查询dom元素
- DOM提供的API方法：getElementById, getElementsByTagName（古老用法不推荐）
- H5提供的新方法：querySeletor, querySelectorAll 提倡
- 利用节点操作获取元素：父（parentNode）,子（children），兄（previousElementSibling, nextElementSibling）提倡
6.属性操作
针对自定义属性
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute移除属性
7.事件操作
6.事件高级
- 注册事件：给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式
1.2 addEventListener事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
1.3 attachEvent
尽量不用
1.4 注册事件兼容性解决方案
- 删除事件（解绑事件）
- 传统解绑方式： eventTarget.οnclick=null;
- 方法监听解绑事件：
- x.removeEventListener(type,listener[,useCapture]);
- x.detachEvent(type,listener[,useCapture]); 不推荐
- DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为3个阶段：
1.捕获阶段 2.当前目标阶段 3. 冒泡阶段
- 事件对象
7.1 function(event){}:
1. event就是一个事件对象，当形参来看
2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。
- 事件对象是我们事件的一系列相关数据的集合
- 这个事件对象我们可以自己命名
- 事件对象有兼容性问题， ie678通过window.event
兼容性处理方法：e=e||window.event
7.2 常见属性和方法
e.target点击了哪个元素就返回哪个
this绑定了哪个元素就返回哪个 e.currentTarget与this相同
阻止冒泡（解决兼容性问题）
7.3事件委托（代理，委派）
事件委托也称事件代理，在jq里面称为事件委派
事件委托的原理：不要给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响至每个子节点。
7.4 鼠标事件
1. 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。
2.禁止选中文字（selectstart开始选中）
// 禁止鼠标右
键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 禁止选中 document.addEventListener('selectstar', function(e) {
3.鼠标事件对象
鼠标对象：MouseEvent
键盘对象： KeyboardEvent
4.鼠标移动事件
Mousemove:鼠标要移动距离，并且不占位置，用绝对定位即可。
核心原理：每次鼠标移动，我们要获取鼠标移动的最新位置，把这个位置的x,y作为图片的top和left值， 就可以移动图片。
i
6.常用键盘事件
键
按下的时候触发， 不能识别功能键， 比如ctrl shift左右箭头
keydown按键按下的时候触发， 能识别功能键，
比如ctrl shift左右箭头
三个事件的执行顺序： keydown--keypress--keyup
7.键盘事件对象
keyCode 得到键盘键的ASCII码值
document.addEventListener('keyup', function(e) {
c
onsole.log(e.keyCode);
// 1.我们的keyup和keydown事件不区分字母大小写， a和A得到的都是65
// 2.我们的keypress事件区分字母大小写，a 97 A 65
})
BOM浏览器对象模型
- BOM
BOM即浏览器对象模型， 它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列对象构成，并且每个对象都提供了方法和属性
BOM缺乏标准，JS语法的标准化组织是ECMA, DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
- window对象的常见事件
- 窗口加载事件
Window.οnlοad=funcation(){}
或者window.addEventListener(“load”,funcation(){}})
window.addEventListener(‘DOMContentLoaded’, function(){})
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('惦记我')
});
}
</script>
提倡一下这种方法：
-
- 调节窗口大小事件
Window.οnresize=funcation(){}
Window.addEventListener(“resize”, function(){});
- 两种定时器
setTimeout(); window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout()这个调用我们称为回调函数callback
终止定时器
window.clearTimeout(timeoutID);
setInterval(回调函数，[间隔的毫秒数]);
这个方法重复调用一个函数，每隔这个时间，就去调用一次回调函数， 永不停息， 不断调用。
验证码倒计时状态
- JS执行队列
- JS是单线程
Js是单线程，同一时间只能做一件事，其他任务等着排队。
现在的JS允许异步。
-
- 同步与异步
同步是执行完这个任务再执行下一个任务， 且同步任务都是在主线程上执行，形成一个执行线。
异步是在做一件事的时候可以去处理其他事情。
-
- JS执行机制
- Location对象
- Location
5.2 URL
5.3 location属性
5.4 location 对象方法
点击进行页面跳转
Location.assign记录浏览历史，可以实现后退功能
Location.replace不记录浏览历史，不可以实现后退功能
定时自动跳转页面
不同页面之间的相互跳转（例如用户登录后跳转到另一个页面会显示登录的用户名， xx）
5.4 location对象的方法
- navigator对象
- history对象
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
