数据类型分类
原始类型：
1.number
2.string
3.boolean
4.null
5.undefined
对象类型：
1.object
2.function
3.array...
分支结构
//单向分支
if(条件表达式){
···
}
//双向分支
if(){
}else{
}
//多项分支
if(){
}else if(){
}else if(){
}else{
}
//switch case
switch(){
case 值1: 语句 break;
case 值2: 语句 break;
case 值3: 语句 break;
case 值4: 语句 break;
进入case后遇到break才会停止，否则一直执行后面的case直到break或者到default
数组
数组声明方式
1 直接量方式
var arr=[];
2 Array函数方式
Array(1,1,2);
Array('hellow');
Array(20)表示长度为20的数组
数组元素的添加和删除
①数组添加元素
1. arr[arr.length]=值;
2. arr.push(元素1,[元素2]···);
3. arr.unshift(元素1,[元素2]···)
4. arr.splice(索引,删除个数，元素1,[元素2]...)
添加元素的时候splice的删除个数取0；
②数组删除元素
1. arr.length -= 1;
2. arr.pop();
3. arr.shift();
4. arr.splice(索引,删除个数)
函数
参数arguments
arguments是接收所有的实参的一个伪数组
作用域
在函数内部声明的变量是局部变量
在函数外声明的变量是全局变量
在函数内声明不用var 的是全局变量 但是不建议使用
对象
Object对象类型
遍历对象
for (var k in obj){
}
判断对象中是否存在某个属性
'属性' in obj //返回一个布尔值
注：使用in运算符并不能区分属性是对象本身的还是原型上的
构造函数
判断对象的构造函数
①运算符 instanceof
对象 instanceof 构造函数; //返回布尔值
②constructor属性
所有对象都有constructor属性，返回该对象的构造函数 对原始类型调用constructor属性的时候，原始数据类型会切换到对象状态
construstor属性在原型上面并不在对象本身
自定义构造函数
function Dog(dogName,dogSex, dogAge){
//设置属性
this.name=dogName;
this.sex=dogSex;
this.age=dogAge;
//设置方法
this.bark=function(){
console.log('我是'+this.name);
}
}
//实例化
var dog1 = new Dog('旺财','female',5);
//获取属性
dog1.name;
//调用方法
dog1.bark();
this
this的含义
-
this可以认为是内置的变量，该变量的值是对象，但是不固定
-
this在函数或者构造函数中使用
this指向问题
①在构造函数中使用this
this指向构造函数生成的对象
②在方法或者函数中使用this
指向调用者
如果函数前面没有
对象.，就是window在调用
原型
获取对象的原型
①隐式方式获取原型
对象.__proto__
②显示方式获取原型
对象的构造函数.prototype
原型的应用
// 自定义构造函数
function User(name, age, address) {
// 属性
this.name = name;
this.age = age;
this.address = address;
}
// 把方法添加到实例的原型上
User.prototype.login = function(){
console.log(this.name + ' 登录了');
}
User.prototype.logout = function() {
console.log(this.name + ' 退出登录了');
}
方法添加到原型上减少实例的占用的内存
判断属性是否属于对象本身
对象.hasOwnProperty('属性名') //返回布尔值
/*
如果属性在对象本身则返回true
对象不存在该属性或者属性属于原型都返回false
*/
创建对象的时候同时指定原型
Object.create(参数对象); //返回一个新的对象，参数会作为新对象的原型 Object.create(null); //返回一个没有原型的对象，真正意义的空对象
原始类型和引用类型
原始类型就是值类型，又叫不可变类型
对象类型就是引用类型，又称可变类型
值类型和引用类型的存储方式
值类型：变量名和数据都存储在栈区域
引用类型：栈中存储的是变量名和地址，真正的数据存储在数据堆里
内置对象
1 Boolean
//第一种 直接量方式 var b1=true; //第二种 Boolean函数 var b2=Boolean(true); //第三种Boolean构造函数方式 var b3=new Object(0); console.log(b1, typeof b1); // true 'boolean' console.log(b2, typeof b2); // true 'boolan' console.log(b3, typeof b3); // false 'object' // 布尔值的对象形式
2 Number
实例的方法： toFixed([n]); //保留指定的n位小数， 按照四舍五入；不指定参数则取整 toString([n]); //转换为字符串。可以控制进制（转换前的进制转换为10进制） 构造函数的属性： Number.MAX_VALUE Number.MIN_VALUE
3 String
实例的属性：
length 字符串的长度
实例的方法：
indexOf(value [,fromeIndex])返回value在字符串中第一次出现的索引位置；第二个可选参数指定从哪开始查找。 可以用来判断字符串中是否包含某个值。
lastIndexOf(value [,fromIndex]) 返回value在字符串中最后一次出现的索引位置；第二个可选参数指定从哪开始向前查找。
slice(start [,end]) 字符串截取，第一个参数是开始位置，第二个参数不写则代表截取到最后
substring() 字符串截取，同slice()方法
substr(start [,length]) 字符串截取,第二个参数表示截取长度
split([sep]) 字符串分割为数组；可以指定分隔符
toUpperCase() 把字母转换为大写
toLowerCase() 把字母转换为小写
charCodeAt() 把字母转换为Unicode编码
构造函数本身的的方法：
string.fromCharCode(编码); 返回指定的Unicode编码对应的字符；
4Math
属性： Math.PI 方法： Math.abs() 取绝对值 Math.sqrt() 取平方根 Math.pow(n,m) 幂运算n的m次幂 Math.max() 取所有参数中的最大值 Math.min() 取所有参数的最小值 Math.round() 四舍五入取整 Math.floor() 向下取整 Math.ceil() 向上取整 Math.random() 获得一个[0,1)的随机小数
5 Date
创建Date实例
var today=new Date(); //当前时间日期
var birthday= new Date('December 17,1995 03:24:00');
var birthday=new Date('1995-12-17T03:24:00');
var birthday=new Date(1995,11,17);
var borthday=new Date(1995,11,17,3,24,0)
注意：用最后两种格式最简单，但是要注意月份是从0开始，应该减一。
方法
实例的方法： getFullYear() 年 getMonth() 月 从0开始 getDate() 日 getDay() 周几 getHours() 小时 getMinutes() 分钟 getSeconds() 秒 getMilliseconds() 毫秒 getUTC...系列 获取标准时区的日期和时间 set.... 设置日期和时间 setUTC... 设置标准时区日期和时间 getTime() 返回时间戳 setTime() 根据时间戳设置日期时间 构造函数本身的方法： Date.now(); 返回此刻时间戳 Date.UTC(year,month[,date[,hrs[,min[,sec[,ms]]]]]) 返回指定日期的时间戳
6 Array
实例的属性： length 数组的长度 实例的方法： 修改器方法：（可以修改调用方法的对象） pop() 删除最后一个元素 push() 在最后添加元素（可以是多个） shift() 删除第一个元素 unshift() 在最前面添加元素（可以是多个） splice() 添加删除替换数组 sort() 数组排序 reverse() 数组翻转 访问方法：（不会修改调用方法的对象本身，计算结果以返回值的形式得到） concat() 连接数组 slice() 截取数组 join() 将数组合并成字符串，可以指定分隔符，是split()方法的逆运算
7 Function
实例的属性： length 返回函数的必须的参数的数量 实例的方法： call() 调用函数并设置this指向，参数量不固定（至少一个） apply() 调用函数并设置函数内的this指向，参数是两个，第二个参数是形参组成的数组 bind() 设置函数this指向，把修改了this指向的函数返回；参数形式同call
8 Json
方法： JSON.parse() 把json格式字符串解析为数组或对象 JSON.stringify() 把对象或数组转换为json字符串
BOM
1 window
属性： name 获取或者设置窗口的名字 window.innerWidth 获取视口的宽度 window.innerHeight 获取视口的高度(包含滚动条宽度，不推荐) history location screen navigator 方法： alert(); confirm() 确认框 prompt() 输入框 window.open() 打开新窗口 window.close() 关闭窗口 window.print() 调用打印程序 scrollTo() 滚动到指定位置 scrollBy() 滚动多少距离 setInterval() 设置多次定时器 clearInterval() 清除多次定时器 setTimeout() 开启单次定时器 clearTimeout() 清除单词定时器
2 history
属性： length 当前窗口中的历史记录个数 方法： back() 后退一步 forward() 前进一步 go(n) 前进/后退n步 附属表示后退
3 location
属性： href 完整的URL protocol 协议部分 host 主机名+端口号 hostname 主机名 port 端口号 path 路径部分 search 查询字符串 hash 锚点部分 方法： reload() 重新加载 assign(URL) 页面跳转，旧页面会存在历史记录中 replace(URL) 页面跳转，旧页面会被抹除
4 navigator
属性： userAgent 获取客户端信息
5 screen
属性： width 屏幕的宽度 height 屏幕的高度
DOM
MDN 文档对象模型手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
Node节点
①五大节点类型
document 文档对象节点 element 元素节点 attribute 属性节点 text 文本节点 comment 注释节点
②节点的注释
nodeName 节点名 元素节点的nodeName返回标签名 nodeValue 节点值 bodeType 节点类型 document:9; element:1; attribute:2; text:3
获取元素
获取所有元素 document.all; //获取 HTMLCollection对象，由文档中所有元素组成的伪数组
document.all作为语法糖，判断IE还是非IE
if(document.all){ document.write('我是IE浏览器'); }else{ document.write('我不是IE浏览器'); }
DOM 操作元素的属性
内置属性
element.属性名 //复制和读取都可以
自定义属性
element.dataset.属性名; //获取和赋值都可以
DOM 操作元素的样式
读取计算样式（只读）
计算样式：所有作用在元素上的CSS样式，不论在哪里设置的，称之为计算样式
//IE9+ getComputedStyle(元素对象) //返回一个对象 //IE8以下 元素对象.currentStyle.属性名
//定义函数获取元素计算样式
function getStyle(ele,attr){
if(window.getComputedStyle){
//IE9+
return getComputedStyle(ele)[attr];
}else{
//IE8
return ele.currentStyle[attr];
}
}
DOM操作获取元素尺寸
offsetWidth / offsetHeight 内容+内边距+边框 clientWidth / clientHeight 内容+内边距 scrollWidth / scrollHeight 内容溢出，考虑溢出情况，不溢出同client系列 getBoundingClientRect() 返回对象，对象中有width和height等属性
获取视口的尺寸
window.innerWidth window.innerHeight document.documentElement.clientWidth document.documentElement.clientHeight
二者区别：
1.如果窗口没有滚动条，二者获取的结果一致
2.如果出现了滚动条，window系列会加上滚动条的宽度，不好使
获取整个页面的高度
document.body.scrollHeight document.documentElement.scrollHeight
DOM操作获取元素的位置
获取元素的位置（只读）
offsetLeft / offsetTop 获取元素在包含块上的位置 clientLeft / clientTop 获取的是左边框和上边框的宽度 getBoundingclientRect() 返回对象，对象中有left和top属性 获取元素在视口上的位置
getBoundingClientRect()
元素.getBoundingClientRect() 返回DOMRect对象 只读 DOMRect对象： width 元素款（内容+内边距+边框） height 元素高（内容+内边距+边框） left 元素左上角在视口上的 x 坐标 top 元素左上角在视口上的 y 坐标 right 元素右下角在视口上的 x 坐标 bottom 元素右下角在视口上的 y 坐标 x 同 left y 同 top
元素中内容的位置（可读写）
属性 scrollLeft scrollTop 获取元素移动的位置 scrollLeft 值越大，元素中的内容向左移动的越多； scrollTop 越大，元素中的内容向上移动的越大 scrollLeft 和 scrollTop 可以进行赋值， 不能是负值,最小是 0 设置 scrollLeft 和 scrollTop 生效的前提是，元素设置了 overflow 且不是默认值
页面滚动的距离：document.documentElement.scrollTop||document.body.scrollTop;
节点的创建添加删除克隆
创建元素节点
document.createElement('tagName')
添加子节点
parentElement.appendChild(node); //追加子节点 parentElement.insertBefore(newNode,oldNode); //在前面插入子节点
删除子节点
parentElement.removeChild(node)
替换子节点
parentElement.replaceChild(newNode,oldNode);
克隆节点
cloneNode() //参数是布尔值，默认为false，true为深拷贝
document对象
属性： document.documentElement 快速获取HTML节点只读 document.body 快速获取 body 元素 只读 document.head 快速获取 head 元素 只读 document.all 获取所有的元素组成的集合 只读 document.referrer 获取历史记录中上一个页眉 只读 document.lastModified 获取页面最后一次修改时间 只读 document.title 页面标题 可读可写 方法： document.write()
documentFragment对象
特点
1.documentFragment对象也是一种节点，nodeType值是11 2.不会作为DOM结构一部分，不会再页面中渲染 3.通常用来作为元素的临时容器
创建
document.createDocumentFragment()
应用场景
优化，同时添加多个元素；可以先把元素添加到df中，最后一步作为子节点添加到页面中 实现一组顺序反转
HTML DOM
表单相关元素
①form元素
方法： submit(); 调用该方法可以让表单提交 reset(); 调用该方法可以让表单重置
document.forms //获取表单集合 document.myForm //获取name是myform的表单 document.myForm.username //获取name属性为myForm的表单中的name属性为username的表单元素 document.myForm.elements //获取name属性是myForm的表单中的控件集合
②文本输入框和文本域（input和textarea）
方法： focus() 调用该方法可以获取焦点 blur() 调用该方法可以失去焦点 select() 调用该方法可以选中里面的文字
③select元素
属性
options 所有option的集合
selectedIndex 当前选中的选项的索引
方法：
add(option,index) 添加选项，参数是要添加的option对象和位置
remove() 删除选项，指定要删除选项的索引
blur()
focus()
创建option元素：
new Option('中间的文本内容','value值')
表格相关属性
①table元素
属性： rows 返回所有行元素的集合 cells 返回所有单元格的集合 方法： insertRow() 想表格中添加一行，指定新的索引，返回新添加的元素 deleteRow() 从表格中删除一行，指定索引；
②tableRow元素（tr元素）
属性： cells 返回该行中所有的单元格元素的集合 rowIndex 返回该行的索引 方法： insertCell() 向当前行插入单元格，需要指定索引，返回新的单元格 deleteCell() 删除一个单元格，需要指定索引
③tableCell元素（td或th）
属性： cellIndex 返回单元格在行内的索引
事件绑定
事件绑定方式
① 第一种方式 把事件作为标签属性
<button onclick="代码"></button>
② 第二种方式 把事件作为元素对象的方法
//获取元素对象
btn.onclick=function(){
}
③第三种方式 事件监听方式
btn.addEventListener('click',function(){});
优点：可以给同一个元素添加多个相同的事件
解除事件的绑定
①第一种和第二种方式绑定的解除
//重新给元素绑定覆盖前面的；
btn.onclick={}
②第三种方式 事件监听解除
btn.removeEventListener('click',函数名);
想要解除绑定事件就不能绑定匿名函数
事件流
事件触发过程有三个阶段：捕获阶段、目标阶段（说两个阶段的时候省略此阶段)、冒泡阶段。
事件默认在冒泡阶段触发，addEventListener第三个参数设置为true，事件会在捕获阶段触发。
目标元素是指具体发生了事件的元素，不能再细分了
事件回调函数中this的指向
this 指向绑定事件的元素
常用事件列表
鼠标事件
click 单击 dblclick 双击 contextmenu 右击 mousedown 鼠标按下 mouseup 鼠标按键抬起 mousemove 鼠标移动 mouseover 鼠标悬停 mouseout 鼠标离开 mouseenter 代替mouseover mouseleave 代替mouseout
键盘事件
keydown 键盘按下 keyup 键盘弹起 keypress 键盘按下，控制键无法触发
keydown和keyup任何一个按键都可以触发，但是不分大小写
keypress功能键无法触发，可以区分大小写
文档事件
load 文档中所有一切加载完毕 unload 文档关闭 beforeunload 文档关闭之前 DOMContentLoaded 文档加载完毕，用来替换load事件；页面中所有的元素加载完毕就触发，推荐使用
关闭前弹窗固定用法：
window.onbeforeunload=function(){
return '你确定要关闭吗？';
}
文档事件通常绑定给window
load事件和DOMContentLoaded事件的区别：
① load事件用三种方法都可以绑定，DOMContentLoaded事件只能用addEventListener绑定
②load事件是等页面所有的一切包括内容图片加载完毕再触发，DOMContentLoaded只要页面元素加载完毕就触发
表单事件
submit 表单提交时，绑定给form元素
reset 表单重置时，绑定给form元素
blur 失去焦点，绑定给表单控件
focus 获取焦点，绑定给表单控件元素
select 文本被选中，绑定给可输入元素
change 对于可输入元素，内容改变且失去焦点的时候才会触发；对于复选框、单选按钮、下拉选项，修改就会触发
图片事件
load 图片文件加载完毕
error 图片加载错误
abort 图片加载中断（了解）
其他事件
resize 视口发生变化的时候触发，绑定给window
scroll 元素中的内容滚动的时候触发，监听整个页面内容滚动绑定给window
获取页面内容滚动了多少：
document.documentElement.scrollTop||doucment.body.scrollTop
Event对象
获取Event对象
事件回调函数自动获取形参，可以得到Event事件
鼠标事件对象 MouseEvent
clientX /clientY 获取鼠标在视口上的位置
pageX /pageY 获取鼠标在页面（根元素）上的位置
screenX / screenY 获取鼠标在屏幕上的位置
offsetX / offsetY 获取鼠标在目标元素上的位置
button 获取鼠标按键：0：左键，1：滚轮键，2：右键
键盘事件对象
keyCode 获取按键的ASCII码值
which 同keyCode
key 获取按键的值，字符串；
所有的事件对象都有的属性
type 获取事件的类型（事件的名字）
timestamp 获取触发事件的时刻与打开页面的时刻相距毫秒数
target 获取目标元素
stopPropagation() 阻止冒泡
preventDefault() 阻止浏览器默认行为
浏览器默认行为
①浏览器有哪些默认行为
所有元素右击默认弹出系统菜单
超链接点击会默认跳转
提交按钮和重置按钮点击默认触发表单的提交和重置
表单与元素默认有提交行为和重置行为
②阻止浏览器默认行为
在事件回调函数内：
event.preventDefault();或者return false
事件委托
事件委托：把某个元素的事件委托到其他元素上，通常是祖先元素
实现方式：把事件添加到祖先元素上，触发事件的时候判断目标元素是否是我们要监听事件的元素，如果是就执行相关操作，否则什么都不干
//如果目标元素是li， 执行相关操作
if(event.target.nodeName.toUpperCase()==='LI'){
//切换active类名
event.target.classList.toggle('active');
}
事件委托的优势：
① 减少内存消耗；如果需要给很多元素添加某个事件，可以委托到他们共同的祖先元素上。
②让动态添加的元素也有事件。
-
HTMLCollection是所有元素的集合；NodeList是所有节点的集合
-
HTMLCollection对象没有forEach方法，NodeList有forEach方法
-