节流和防抖
【节流和防抖】
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
12开发使用场景 – 小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动 就可以加节流假如一张轮播图完成切换需要300ms， 不加节流效果，快速点击，则嗖嗖嗖的切换，加上节流效果，不管快速点击多少次，300ms时间内，只能切换一张图片。
123456789101112131415161718192021222324252627282930313233<style> div { width: 200px; height: 200px; background-color: #CCCCCC; line-height: 200px; text-align: center; font-size: 30px; }</style><body><div>0</div><script type="t ...
Storage接口
【Storage接口】
概述
Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。
sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。
保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
这个接口很像 Cookie 的强化版，能够使用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。其中，Firefox 的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。另外，与 Cookie 一样，它们也受同域限制。 ...
表单和FormData 对象
【表单和FormData 对象】
FormData 对象
概述
表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成这个过程，构造或编辑表单的键值对，然后通过脚本发送给服务器。浏览器原生提供了 FormData 对象来完成这项工作。
FormData()首先是一个构造函数，用来生成表单的实例。
1var formdata = new FormData(form);
FormData()构造函数的参数是一个 DOM 的表单元素，构造函数会自动处理表单的键值对。这个参数是可选的，如果省略该参数，就表示一个空的表单。
下面是一个表单。
123456789101112131415<form id="myForm" name="myForm"> <div> <label for="username">用户名：</label> <input type="text" id="username" ...
History对象和Location对象
【History对象和Location对象】
History 对象概述
window.history属性指向 History 对象，它表示当前窗口的浏览历史。
History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。
1window.history.length // 3
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
12345// 后退到前一个网址history.back()// 等同于history.go(-1)
浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。
History 对象方法
History.back()、History.forward()、History.go()
这三个方法用于在历史之中移动。
History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
History.go()：接受一个整数作为参数， ...
Navigator 对象和Screen 对象
【Navigator 对象和Screen 对象】
Navigator 对象的属性
1234567891011121314/* * Navigator * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 * - 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了 * - 一般我们只会使用userAgent来判断浏览器的信息， * userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， * 不同的浏览器会有不同的userAgent * * 火狐的userAgent * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 * * Chrome的userAgent * Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 */
Navigato ...
window 对象
【window 对象】
概述
浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。
12a = 1;window.a // 1
上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。
window有自己的实体含义，其实不适合当作最高一层的顶层对象，这是一个语言的设计失误。最早，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者 Brendan Eich 就把window对象当作顶层对象，所有未声明就赋值的变量都自动变成window对象的属性。这种设计使得编译阶段无法检测出未声明变量，但到了今天已经没有办法纠正了。
window 对象的属性
window.name
window.name属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字，这个属性主要配合超链接和表单的target属性使用。
123window.name = 'Hello World!';conso ...
BOM和浏览器环境概述
【BOM和浏览器环境概述】
BOM（Browser Object Model，浏览器对象模型）是 JS 与 浏览器窗口交互的接口。
一些与浏览器改变尺寸、滚动条滚动相关的特效，都要借助 BOM 技术。
JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。
本章开始介绍浏览器提供的各种 JavaScript 接口。首先，介绍 JavaScript 代码嵌入网页的方法。
代码嵌入网页的方法
网页中嵌入 JavaScript 代码，主要有四种方法。
<script>元素直接嵌入代码。
<script>标签加载外部脚本
事件属性
URL 协议
script 元素嵌入代码
1234<script> var x = 1 + 5; console.log(x);</script>
<script& ...
定时器和延时器
【定时器和延时器】
定时器
基本介绍
setInterval() 函数可以重复调用一个函数，在每次调用之间有固定的时间间隔。
Interval：间隔
1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> var a = 0; setInterval(function () { console.log(++a); }, 1 ...
事件传播
【事件传播】
事件冒泡
事件冒泡概念:
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: yellowgreen; } #s1{ background-color: yellow; } </style> <scri ...
三大家族scroll、offset、client
【三大家族scroll、offset、client】
JS的三大家族主要是Offset、Scroll、Client，通过对三大家族不同属性的灵活使用，我们可以模拟出很多炫酷的JS动画，增强界面的视觉感染力！让静态页面活起来！
注意以下的值全是不带px的，单纯的数字
对于clientX、clientY、offsetX、offsetY已在鼠标事件记录过
scroll家族
scrollHeight和scrollWidth（只读）
获取元素整个内容的高度和宽度 （包含看不见的） ，如果有滚动条（滚动条会占用部分宽高），不计算滚动条的宽高
Element.scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。
Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。
整张网 ...