web api

获取元素

通过id获取元素（单个）

var ele_id = document.getElementById('id');
ele_id 就是一个元素对象

通过标签名获取元素（多个）

document.getElementsByTagName('div')

通过类名获取元素（多个）

doccument.getElementsByClassName('red')

通过 选择器获取（单个）—常用

document.querySelector('选择器')

通过 选择器获取（多个）—常用

document.querySelectorAll('选择器')

注意

凡事获取单个的都是直接获取元素
凡事获取多个的都是获取伪数组

事件三要素

事件源

事件类型

处理函数

操作元素

innerText
修改标签内容----会把所有的内容当作文本来处理
带有兼容性问题、非标准 w3c

innerHTML
修改标签内容----会把里面带有标签文字的内容，渲染成页面结构
dom.innerHTML = '<a href="#">文档</a>'
没有兼容性问题、标准

操作元素样式

修改单个的时候使用
dom.style.width
所有的样式都存放在style这个属性中

修改多个的时候使用
dom.className
修改className的时候，不会直接操作样式。修改的是类名，而类名身上带了N多的样式属性
dom.className = 'a b'

事件

鼠标移入 onmouseover

鼠标移出 onmouseout

自定义属性

如果在dir中，不能够找到的就是自定义属性

获取自定义属性
dom.getAttribute('data-attr')
设置自定义属性
dom.setAttribute('data-attr','值')
移除自定义属性
dom.removeAttribute('data-attr')

节点操作

页面结构越来越复杂的时候，节点操作就有很大的优势

node

节点类型  nodeType   1、2、3、4、。。。  
1. 元素节点   2. 属性节点   3. 文本节点
节点名称  nodeName
节点值    nodeValue

父节点

dom.parentNode   亲爸爸 是一个元素

子节点

dom.childNodes    儿子辈节点  是一个伪数组
dom.children      儿子辈元素节点 是一个伪数组

第一个子元素、最后一个子元素

dom.firstChild   获取儿子辈的第一个节点  是一个节点
dom.firstElementChild 获取儿子辈的第一个元素节点  是一个元素  兼容性问题
dom.children[0]  获取儿子辈的第一个元素节点  是一个元素  没有兼容性问题

dom.lastChild   获取儿子辈的第一个节点  是一个节点
dom.lastElementChild 获取儿子辈的第一个元素节点  是一个元素  兼容性问题
dom.children[children.length-1]  获取儿子辈的第一个元素节点  是一个元素  没有兼容性问题

兄弟节点

上一个兄弟元素
dom.previousSibling 获取上一个兄弟节点  是一个节点
dom.previousElementSibling 获取上一个兄弟元素节点 是一个元素 兼容性问题

下一个兄弟元素
dom.nextSibling  获取下一个兄弟节点  是一个节点
dom.nextElementSibling 获取下一个兄弟元素节点 是一个元素 兼容性问题

创建元素

创建分2步，创建元素，添加到页面上
1.document.createElement('li');
2.后面添加 dom.appendChild(元素)
3.前面添加 dom.insertBefore(元素,位置)

删除节点

父级.removeChild(子元素)

克隆

元素.cloneNode() 

默认是不填就是false 只克隆最外层的标签元素，不克隆内部的任何内容

ture 就会克隆标签和内部所有的内容

防止a链接跳转

<a href='javascript:;'>删除</a>
<a href='javascript:void(0);'>删除</a>

document.write() 了解

只要页面一加载完毕，再来调用这个document.write()，整个页面会发生重绘

避免大量字符串拼接

var str += newstr  避免

注册事件

传统

dom.onclick = function(){

}

同一个元素注册同一种事件 只能绑定一次，后面的会覆盖前面

事件监听

dom.addEventListener('mouseenter',function(){

},boolean)
boolean 默认是false 冒泡  
			 true  捕获

同一个元素注册同一种事件可以 绑定多次

事件流

捕获阶段 不断变小

文档->html->body-。。。。->最后最里面的元素

目标阶段

冒泡 不断变大

最小的元素->…body->html->文档

我们平常触发事件的时候，只会触发其中2个阶段，目标-》冒泡 捕获-》目标

没有冒泡的事件

失焦  onblur
聚焦  onfocus
鼠标移入 onmouseenter
鼠标移出 onmouseleave

满足冒泡的条件

1.存在元素嵌套的关系

2.这些嵌套的元素必须绑定同一个事件

**冒泡问题也叫点透问题**

事件对象

单纯的函数是不存在事件对象的。事件对象一定存在于事件函数中

每一种事件类型都对应了不同的事件对象，事件对象帮我们记录触发的一些信息

this和e.target的区别

this永远指向事件绑定的对象，e.target永远指向当前触发事件的对象

阻止默认行为

事件监听

e.preventDefault();

传统模式

e.preventDefault();

e.returnValue;

return false

阻止冒泡行为

e.stopPropagation()
e.cancelBubble = true
阻止冒泡行为，必须写在每一个会传播冒泡问题的事件后面

事件委托

利用冒泡的原理，减少了元素绑定事件的次数（直接把事件绑在元素的父级）

ul li

鼠标事件

onmousemove 鼠标移动事件

鼠标事件对象

console.log('e.clientX:'+e.clientX);//到浏览器可视窗口的最左侧

 console.log('e.clientY:'+e.clientY);//到浏览器可视窗口的最顶侧（不包括顶部的地址栏等）

console.log('e.pageX:'+e.pageX);//到文档的最左侧，要包含滚动条被卷去的距离

 console.log('e.pageY:'+e.pageY);//到文档的最顶侧，要包含滚动条被卷去的距离（不包括顶部的地址栏等）

 console.log('e.screenX:'+e.screenX);//到屏幕的最左侧

  console.log('e.screenX:'+e.screenX);//到屏幕的最顶侧

键盘事件

onkeydown  按下    

onkeypress   按下   不能识别功能键  上下左右、回车退格，能够识别大小写

onkeyup   弹起

键盘事件对象中

dom.onkeydown = function(e){
	e.keyCode   对应一个Ascii 唯一
}

BOM

浏览器对象模型

BOM 控制浏览器api接口

DOM 控制文档api接口

BOM有一个顶级对象，window，声明的所有全局变量和全局方法都在window对象身上

页面加载事件

 onload 让页面上的所有内容都加载完毕之后，再来执行onload里面的js代码

DOMContentloaded 让页面上的所有内容（图片、音频、视频）都加载完毕之后，再来执行DOMContentloaded里面的js代码

下面这个DOMContentloaded 加载时机会更快一点

页面尺寸改变事件

onresize

定时器

炸弹型定时器

		// 1 直接放入一个匿名函数
        window.setTimeout(function(){
            console.log('激情四射')
        },1000)
        // 2 放入一个函数名
        function fn(){
            console.log('男上加男')
        }
        window.setTimeout(fn,2000)
        // 3 放入一个函数带括号的字符串,有点 可以使用参数
        function fn2(vvv){
            console.log(vvv)
        }
        window.setTimeout('fn2("左右为男")',3000)

清除炸弹型定时器

var timer = setTimeout(function(){
            console.log('激情四射')
        },1000)
clearTimeout(timer)

间歇性定时器

// 1 直接放入一个匿名函数
        window.setInterval(function(){
            console.log('激情四射')
        },1000)
        // 2 放入一个函数名
        function fn(){
            console.log('男上加男')
        }
        window.setInterval(fn,2000)
        // 3 放入一个函数带括号的字符串,有点 可以使用参数
        function fn2(vvv){
            console.log(vvv)
        }
        window.setInterval('fn2("左右为男")',3000)

this指向问题

谁调用我，谁就是this

var obj = {
	fn:function(){
		console.log(this)//obj
	}
}
obj.fn()
btn.onclick = function(){
	console.log(this)//btn
}

没有人调用，this就指向window

window.console.log(this)//window

window.setTimeout(function(){
	console.log(this)//window
},1000)

构造函数,this指向返回的实例对象

var ldh = new Star()

同步异步

js是一个单线程脚本语言

同步 vip用户   剩下所有都是同步 for、if 、函数都是同步

异步 普通用户 普通事件、定时器、页面加载事件load、ajax

js的执行基本机制

一、在js执行代码的时候，首先会区分一下哪些是同步代码，哪些是异步代码

二、把所有的同步代码 放到 执行栈、再把所有异步代码 放到 任务队列

三、**优先执行所有的同步代码，执行完毕之后，再回来执行所有的异步代码**

location

console.log(window.location.href);// href 是获取整个url地址的

console.log(location.search);   //search 是获取这个地址携带的参数，url路径?后面的键值对

跳转方式

// 跳转1 在原页面跳转

location.href = 'https://www.baidu.com';

// 跳转2  跳转到新页面

// window.open('https://www.baidu.com')

location.assign()  记录访问历史，回退功能
location.repalce() 不记录访问历史，不能回退
location.reload()   刷新 ，如果里面有true，那么就说明强制刷新

获取浏览器设备的信息

navigator.userAgent

history 浏览器历史记录

向左 回退 history.back()

向右 前进 history.forward()

history.go(num) 

里面可以放变量，并且可以随意设置正负值，再并且可以随意前进后退任何步

三大系列

offset系列

offsetLeft 获取当前元素到**带有定位**父级元素的左侧

offsetTop 获取当前元素到**带有定位**父级元素的顶侧

offsetWidth 获取当前元素 宽度+内边距+边框

offsetHeight 获取当前元素 高度+内边距+边框  还是收到盒子模型的影响box-sizing: border-box;

offsetParent  获取当前元素的带有定位的父级元素

parentNode 亲爸爸

offset和style的区别

获取

offset能够获取元素的宽度，还能够获取样式表里面的样式，并且是直接获取数字

style 能够获取元素的宽度，但是必须是行内样式，获取的是带有单位的字符串

设置

offset不能够设置元素宽度

style 能够设置元素宽度

总结

获取用offset

设置用style

放大镜公式

大图移动的距离/遮罩层移动的距离 = 大图可以移动的最大距离300/小图可以移动的最大距离100

变形

大图移动的距离 = 大图可以移动的最大距离300/小图可以移动的最大距离100*遮罩层移动的距离

client系列

dom.clientLeft 左边框

dom.clientTop 上边框

dom.clientWidth 宽度+内边距

dom.clientHeight 高度+内边距

立即执行函数

		// 1
        // ()()
        ;(function(){
            
        })();
        // 2
        // (())
        ;(function(){
			
        }());
        
        拥有独立的作用域，不用每一个函数起名字

scroll系列

dom.scrollLeft 左边框

dom.scrolTop 元素被卷去的距离

dom.scrolWidth 宽度，元素内容的真实宽高

dom.scrolHeight 高度，元素内容的真实宽高（无法通过overflow切掉）

dom.onscroll = function(){}  任何元素都可以绑定这个滚动事件

**如果想获取浏览器的滚动条信息 window.pageYoffset**

三大系列的总结

offsetLeft、offsetTop  获取当前元素到定位父级元素的距离（body）

clientWidth、clientHeight 获取当前元素宽高

scrollTop、scrollLeft  获取元素被卷去的距离

scroll 页面滚动就会触发

window.pageYoffset

mouseover鼠标移入，但是会出现冒泡的问题，建议搭建使用mouseenter

mouseout鼠标移出，但是会出现冒泡的问题，建议搭建使用mouseleave

动画

让元素动起来，需要定位、left、定时器

封装动画函数

function anmiate(dom,target) {
            // 保证代码只有一个定时器在执行
            clearInterval(dom.timer)
            dom.timer = setInterval(function () {
                var left = dom.offsetLeft;
                left += 1;
                if (left > target) {
                    clearInterval(dom.timer)
                }
                dom.style.left = left + 'px';
            }, 1);
        }
        var div = document.querySelector('div');
        anmiate(div,200)

缓动原理

改变匀速的步数

步数 = (目标的位置-现在的位置)/10 这个格式能够计算出逐渐变慢的步数

缓动动画步数的问题

元素向右走，100->500的位置，正数，当小于1的时候，可能利用js无法继续让元素前进，所以要取整想上取整 1

元素向左走，500->100的位置，负数 ，当大于-1的时候（-0.9），所以想下取整变成-1

回调函数

把一个函数当作一个参数传递到另一个函数中，在指定时机执行，animate（动画执行完毕之后执行）

轮播图主要思路

1.布局  （ul尽量的大）
2.鼠标移入显示左右按钮，移出隐藏按钮
3.根据图片或者li的个数来动态创建出小圆点
4.小圆点排他
5.点击小圆点，能够让轮播图进行对应的滚动
6.点击右按钮，让轮播图滚动（无缝滚动，让用户在轮播图窗口，同时看到最后一张和第一张的切换过程）
7.通过js自动克隆第一张，到ul的最后一张
1-7是人人都可以写出来的，8至最后逻辑比较麻烦，慢慢写（优先把右按钮理清楚，再同理做左按钮） 
8.设置两个变量，一个记录轮播图的位置，另一个记录小圆点的位置
9.解决2个bug(图片宽度的问题，统一num和circle变量，行动一致)
10.根据右侧按钮来完成左侧按钮，唯一不一样的地方在于判断条件
11.自动轮播效果 
12.设置节流阀，控制轮播速度

让页面滚动到顶部

<a href = '#'></a>

window.scroll(x,y)
window.scroll(0,0)

left scroll(0,y)

触摸事件touch

移动端特有事件

开始触摸 touchstart

手指移动 touchmove

手指离开 touchend

手指触摸，如果中断 touchcancel

当我们同时绑定点击事件和触摸事件的时候

如果执行速度比较快执行顺序？  touchstart ->touchend ->click   （click事件需要在较短的时间内弹起才会生效）

如果执行速度比较慢执行顺序？ touchstart ->touchend

如果执行点击时，我移动位置了,执行顺序？touchstart ->touchmove->touchend （如果手指发生移动，click不生效）

touch事件对象

touches 获取当前屏幕所有的手指

targetTouches 获取当前绑定元素身上的手指信息

changeTouches 获取当前元素手指信息发生改变的时候，产生

touches[0]

移动端轮播图思路

1. ul宽度是图片的倍数=》500%，里面的li 20%
2. 复制第一张放到最后，复制最后一种到第一张（无缝滚动，因为移动端是手指拖拽，无法执行瞬间跳转）
3. 自动轮播 ，合理利用css3的动画效果
4. 完成无缝滚动，利用了transitioned事件，在两侧边界的时候，能够瞬间返回，其他都存在过渡效果

transitionend 事件

能够检测css3 transition过渡效果是否执行完毕

classList html5的类名控制（有严重的兼容性问题，一般移动端才用）

新增-----不会覆盖之前的类名

dom.classList.add('myclass')

删除----如果删除了没有的属性，不会有任何影响

dom.classList.remove('myclass')

切换----进行切换类名，有和没有之间切换

dom.classList.toggle('myclass')

移动端轮播图思路

1. ul宽度是图片的倍数=》500%，里面的li 20%
2. 复制第一张放到最后，复制最后一种到第一张（无缝滚动，因为移动端是手指拖拽，无法执行瞬间跳转）
3. 自动轮播 ，合理利用css3的动画效果
4. 完成无缝滚动，利用了transitioned事件，在两侧边界的时候，能够瞬间返回，其他都存在过渡效果
5. 轮播图滚动的时候，让小圆点也进行切换current（classlist）
6. 手指拖拽轮播图的时候，如果大于50px（自定义），进入下一张或上一张，注意：1.拖拽的时候，不能有过渡属性 2.拖拽的时候，不能自动轮播
7. 手指拖拽轮播图的时候，如果小于50px（自定义），回弹
8. 设置节流阀，当用户没有触发手指移动事件，直接通过节流阀变量忽略代码

移动端click 300ms延迟

1.禁止用户缩放功能

2.通过touch事件来封装一个tap事件

封装 tap

- 不能移动
- 点击的时间间隔要小于150ms

封装自己的长按事件

1.起止时间
2.是否移动端

封装自己的左滑、右滑事件
1.方向（touchstart、touchend之间的位移）
2.根据自己项目的实际情况，来确定滑动的时间

fastclick插件

使用：

1. 下载
2. 引入
3. 根据他的规范进行使用

优势：

1. 方便
2. 快捷

框架和插件

框架是提供了一整套解决方案 bootstrap

插件是能够解决某一个某一类问题的

bootstrap 依赖 jquery  写代码的时候，需要让jquery放在bootstrap之前引入

本地存储

sessionStorage

		// 存
        sessionStorage.setItem('class','前端32期')
        // 取
        var c = sessionStorage.getItem('class')
        console.log(c);
        // 删除
        sessionStorage.removeItem('class')
        // 清空
        sessionStorage.clear()

- sessionStorage—本地浏览器的数据库

  生命周期-打开浏览器----关闭浏览器
  存储5M的数据

- 优势：
  1.从本地拿数据会非常快
  2.节约带宽，不需要联网，避免了不必要的请求压力

- 缺点：
  本地存储的数据很容易被篡改

    // 使用：
    // 1. 失效时间===============在登录网站的时候，new Date() ,等我吃完饭，再来访问这个页面的时候，又会生成一个new Date().
    // 如果说没有操作时间超过1个小时，你的系统账号登录时间失效，请重新登录
    // 2. 记录登录状态-------------
    // 我登录了一个系统，给我一个登录记号，记录在sessionStorage。当我每次去请求其他数据的时候，到底有没有这个登录的记号。

localStorage

		// 存
        localStorage.setItem('class','前端32期')
        // 取
        var c = localStorage.getItem('class')
        console.log(c);
        // 删除
        localStorage.removeItem('class')
        // 清空
        localStorage.clear()

- localStorage—本地浏览器的数据库

  生命周期-永久
  存储20M的数据

- 优势：
  1.从本地拿数据会非常快
  2.节约带宽，不需要联网，避免了不必要的请求压力

- 缺点：
  本地存储的数据很容易被篡改

  使用：

  记录没有登录的用户 购物车里面的内容

  记录网页皮肤