1、Math对象
Math.PI圆周率 π
Math.ceil()向上取整 返回的是大于或等于函数参数，并且与之最接近的整数 如:Math.ceil(2.1) ->3
Math.floor()向下取整 返回的是小于或等于函数参数，并且与之最接近的整数 如:Math.floor(0.4) ->0 Math.floor(1.9)->1
Math.round(num)返回与num最接近的整数(四舍五入)
Math.max(x,y)返回指定的数中带有较大的值的那个数
Math.min(x,y)返回指定的数字中带有最低值的数字
Math.abs()返回数的绝对值
Math.pow(x,y)x 的 y 次幂
Math.random()返回介于 0 ~ 1 之间的一个随机数 [0,1)
从1开始 至 任意值 [1 , 任意值]
parseInt(Math.random()*上限+1);
范围值：从任意值开始至任意值
parseInt(Math.random()*(上限-下限+1)+下限);
例如：获取-30到30
Math.cel(Math.randon()*60-30)
Math.floor(Math.randon()*60-30)
2、日期对象
var mydate=new Date();获取当前时间
eg:获取2017.10.1 new Date(2017,9,1)
简单写法：
var time=document.getElementByID(“time”);
time.innerHTML=d.toLocalDateString()+d.toLocalTimeString();
mydate.getFullYear()获取年份
mydate.getMonth()
获取月份,月份从0开始的,即0就是1月
mydate.getDate()获取日期
mydate.getDay()获取星期 0-->周日 1-->周一
mydate.getHours()获取当前的小时
mydate.getMinutes()获取分钟
mydate.getSeconds()获取秒
mydate.getMilliseconds()获取毫秒
mydate.getYear()
返回一个距1900的偏移量，这个偏移量加上1900就是正确的年份
mydate.getTime()
返回一个整数值,这个整数代表了从1970年1月1日开始计算到Date对象中的时间之间的毫秒数
mydate.setTime()
设置时间
d.setDate(mydate.getDate()+1);
setInterval()方法与setTimeout()方法
setInterval（"调用的函数", "指定的时间间隔"）
间隔调用
clearInterval(interID)停止调用
setTimeout()方法
setTimeout（“调用的函数”, “指定的时间后"）延迟时间
获取元素的左偏移值elem.style.left
跳转到网页
Window.location.href=”http://www.baidu.com”
3、String对象
创建string对象：
var str = new String();
方法：
length返回字符串的长度
charAt()返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
charCodeAt ()返回一个整数，代表指定位置上字符的 Unicode 编码 (返回值是 0 - 65535 之间的整数)
参数：必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
fromCharCode()从一些 Unicode 字符值中返回一个字符串
replace(str/regexp,newstr)进行文字替换,用newstr替换str/regexp，返回替换后的字符串的复制(只会替换一个)
如果想替换多个，repalce(/a/g,”b”);
//所有a会替换为b
substr(2,5)//从第二个，截取五个
substring(2,5)//从第二个截取到第五个（不含第5个）
如果 substring 是最后有一个数负数 那么默认
substring（2，-8）;从第0个截取到第2个不含第2
toLowerCase()//返回一个字符串，字符串中的字母转化为小写字母
toUpperCase()//返回一个字符串，字符串中的字母转化为大写字母
stringObject.split(separator,limit)//把字符串分割为字符串数组
separator：从该参数指定的地方分割，limit：分割的次数
如果把空字符串 ("") 用作separator，那么 stringObject 中的每个字符之间都会被分割。
indexOf(字串，从哪个位置开始找)//返回字符串内第一次出现子字符串的位置，如果没有返回-1
lastIndexOf()//返回字符串内最后一次出现子字符串的位置，如果没有返回-1
indexOf(“s”,从第几个开始找)
lastIndexOf(“s”)从后面开始找
string与new String的区别：
new出来的实例，即使值一样，他们也不相等。
eg：var str1=”a good string”；
var str2=new String(“a good string”);
str2是string对象的一个实例，对象可以动态随便的添加属性和方法，而字符串类型不能。
4、事件
onclick单击
onblur（） 当鼠标离开文本框
onsubmit（） 当用户单击 submit按钮
onkeyup（） 当键盘弹起
onkeydown（） 当键盘按下
5、window常见属性
window.innerWidth浏览器窗口的宽度
innerHeigt浏览器窗口的高度
var agent = window.navigator.userAgent; //检测浏览器类型(浏览器头的信息)
window.location.href=”http://www.baidu.com”//跳转
6、数组
(1)创建数组
var 变量名=[ 元素1,元素2,元素3,…];
(2)遍历数组
<1>for循环
for(var i=0;i
console.log(arr[i]);
}
<2>for in
for(vinarr){
console.log(v)
}
(3)数组的方法
pop()删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
slice(x,y)从数组中选择元素组成新的数组,x和y值指定了开始位置和结束位置。
splice(位置，个数[,元素1,元素2,……])从数组中删除或替换元素
sort()以字母表的顺序(unicode编码)排序
真正能做到排序的方法：
arr.sort(function(a,b){
if(a>b){
return -1;}
else{return 1;}
})
reverse()将元素倒序输出
数组1.concat(数组2，数组3，……) 合并数组
join()将数组中所有元素都转化为字符串
toString()返回一个字符串，该字符串包含数组中的所有元素，各个元素间用逗号分隔
(4)求最大(最小)值的方法
方法1循环vararr =[11,8,25,998,12];
vartempMax=arr[0];for(vari=0;i
if(arr[i]>tempMax){
tempMax=arr[i]
}
}console.log(tempMax);
方法2Math.max.apply(null,arr);
补充：call()和apply()方法的区别
它们各自的定义：
apply：应用某一对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，以另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。
它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么
Global 对象被用作thisObj。
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
(5)去掉数组中重复的数
vararr =[11,8,25,998,44,32,11,25,12];
vararr2=[];
for(vari=0; i
if(arr2.indexOf(arr[i])==-1){
// 如果在数组2中没有当前的这个数
arr2.push(arr[i]);
// 就把当前的数放入到数组2中
}
}console.log(arr2);
JS判断一个变量的类型：
functionobj(value){
varleixing= Object.prototype.toString.call(value);
returnleixing;
}
varstr = "12,3,2";
alert(obj(str));//输出[object String]
vararr =[12,3,2];
alert(obj(arr));//输出[object Array]
JS判断是不是数组：
<1>function isArray(s){
var flag = s instanceof Array;
if(flag && s.constructor == Array){
alert("是数组");}
else{alert("不是数组");}
}var a =[1,2,3];
isArray(a);
<2>function isArray(object){
var falg == object && typeof object ===‘object’&& Array == object.constructor;
if(flag && s.constructor == Array){
alert("是数组");}
else{alert("不是数组");}
}var a =[1,2,3];
isArray(a);
}
7、windows对象
JavaScript组成：ECMAScript，BOM(浏览器对象模型),DOM(文档对象模型)。
(1)window open 和close 方法
open：
window.open(URL,name,specs,replace)
URL:打开指定的地址
name：_blank(在新的窗口打开),_self(覆盖原来的窗口)
specs:参数，有width height top left等。
close：自己打开的窗口才能关闭
(2)history对象
back()后退历史记录
forward()前进历史记录
go()跳转到某个历史记录
(3)location 对象
href获取当前的地址 如果设置值是跳转到 设置地址reload()刷新（重新加载）
8、document对象
1.方法
getElementById()返回对拥有指定id的第一个对象的引用
getElementsByName()返回带有指定名称的对象的集合
getElementsByTagName()返回带有指定标签名的对象的集合
getElementsByClassName()返回带有指定class名的对象的集合
querySelector返回指定css选择器对象的第一个
querySelectorAll()返回指定css选择器对象的集合
2.visibility属性
visible表示元素是可见的
hidden表示元素是不可见的
语法：object.style.visibility="值"
3.display属性
none
block
inline-block
语法：object.style.display="值"
9、DOM编程
(1)查看/修改属性节点
getAttribute("属性名")
setAttribute("属性名","属性值")
(2)节点关系
parentNode父亲节点
firstChild第一个子节点
lastChild最后一个子节点
priviousSibling上一个兄弟节点
nextSibling下一个兄弟节点
(3)创建和增加节点的方法
createElement（）：创建节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（true）：克隆节点
(4)删除和替换节点
removeChild（）：删除节点
replaceChild(新的，被替换的)：替换节点
(5)表格操作
插入行：table.insertRow(num);
插入列：row.insertCell(num);
删除列：table.deleteRow(num);
html里面有9种类型的节点
元素节点节点类型 nodeType ==1
文本节点节点类型 nodeType ==3
获取/设置元素的类名:
elem.className="name1 name2"
获取/设置的行内样式属性:
elem.style.样式名
如果样式名是带中划线，去掉中划线 后面的单词首字母大写eg：elem.style.fontSize="18px";
获取元素的最终样式：
document.defaultView.getComputedStyle(elem,null)
ie方式：elem.currentStyle
获取元素的高：
elem.offsetHeight 内容+padding+边框
elem.clientHeight 内容+padding 不加滚动条高度
获取元素的滚动距离：
scrollHeight默认 内容+padding 如果有滚动 是滚动区域的高
////////////////////////
console.log("clientHeight",p.clientHeight)
console.log("offsetHeight",p.offsetHeight) //推荐
console.log("scrollHeight",p.scrollHeight)
clientWidth当前宽
offsetwidth偏移宽
scrollWidth滚动宽
获取元素到浏览器四周的距离：
document.body.scrollTop窗口滚动垂直方向的距离
document.body.scrollLeft窗口滚动水平方向的距离
////////////////////////////
elem.scrollTop获取元素垂直方向的距离
window.scrollTo(左右距离，上下距离)
元素到浏览器边界的距离：
Var rect = elem.getBoundingClientRect()
元素距body最顶部的距离-窗口滚动的距离==rect.top，即
elem.offsetTop-document.body.scrollTop
补充：
For循环+匿名函数自执行+setTimeout 做10次 从1到100 (for控制输出的次数，setTimeout控制执行间隔时间)
for(var i = 0;i<10;i++){
!function(i){
var j = i;
setTimeout(function(){
console.log((j+1)*10);
},j*1000)
}(i)
}
10、事件
事件模型：内联模型、脚本模型、DOM2模型
(1)鼠标事件
单击的对象：srcElement
单击时候是否按下ctrl键：ctrlKey
单击时候是否按下shift键：shiftKey
距浏览器窗口左上角距离：
layerX
layerY
pageX
pageY
距离button(单击对象)srcElemet 左上角位置：
offsetX
offsetY
(2)键盘事件
keyCode键盘上每一个键都会有一个键盘编码 判断是哪个键被按下了(eg：空格键是32)
鼠标滚轮 onmousewheel
deltaY 125向下 -125 向上
(3)事件流
冒泡小到大
即事件由最开始的元素接收，让后逐级向上传播到最不具体的那个节点（文档）
捕获大到小
即由最不具体的那个节点（文档）元素接收，然后逐级向下广播到最具体的那个元素
停止事件冒泡 stopPropagation()
添加事件：
addEventListener(事件名，处理事件函数，是否用捕获)
删除事件：
removeEventListener(事件名，处理事件函数，是否用捕获)
11、Cookie
cookie由名/值对形式的文本组成：name=value。
cookie="name=value;expires=date;path=/;domain=m.qq.com;secure"
(1)创建cookie
function setCookie(name,value,day，path){
var cookieText=name+"="+value;
if(day>0){
var d=new Date();
d.setDate(d.getDate()+day)
cookieText+=";expires="+d;}
if(path){
cookieText+=";path="+path;
}
document.cookie=cookieText;
}
(2)获取cookie
function getCookie(name){
var start=0;
var end=0;
if(document.cookie.indexOf(name+"=")!=-1){
start=document.cookie.indexOf(name+"=");
end=document.cookie.indexOf(";",start);
if(end==-1){end=document.cookie.lenght;}
return document.cookie.substring(start+name.length+1,end);
}
}
(3)删除cookie
function unsetCookie(name){
document.cookie=name+"=;expires="+new Date(0);
}
(4)本地存储
存储在本地的数据 没有时间限制
sessionStrage与localStrage区别：
sessionStorage/localStorage session 浏览器关掉就没有了
L不发送到服务器C会发送到服务器
L没有时间限制 C 可以设置时间
L空间大C小
L条没有现在 C有限制
L新浏览器 C所有浏览器
12、正则表达式
(1)创建方式
var reg = /表达式/附加参数;
var reg = new RegExp(“表达式”,“附加参数”);
(2)方法
test：检测字符串中指定的值，返回true或false;
lastIndex 一个整数，标示开始下一次匹配的字符位置,该属性存放一个整数，它声明的是上一次匹配文本之后的第一个字符的位置。
exec()：用于检索字符串中的正则表达式的匹配。
RegExpObject.exec(string)
返回值：
返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
属性：
global：RegExp对象是否具有标志g;
ignoreCase：RegExp对象是否具有标志i
multiline：RegExp对象是否具有标志m
(3)常用符号
/.../代表一个模式的开始和结束
^匹配字符串的开始
$匹配字符串的结束
\s任何空白字符
\S任何非空白字符
\d匹配一个数字字符，等价于[0-9]
\D除了数字之外的任何字符，等价于[^0-9]
\w匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W匹配任何非单字字符，等价于[^A-Za-z0-9_]
.除了换行符之外的任意字符
(如果要使用，写法“\.”)
{n}匹配前一项n次
{n, }匹配前一项n次，或者多次
{n,m}匹配前一项至少n次，但是不能超过m次
*匹配前一项0次或多次，等价于{0， }
+匹配前一项1次或多次，等价于{1，}
？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
add()方法：向select 添加一个option元素。selectObject.add(option,before)
option 必需。要添加选项元素。必需是 option 或 optgroup 元素。
before 必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
var Opt = new Option(“文本”，“值”，true，true)；
后面两个true分别表示默认被选中和有效!
13、匿名函数和闭包
解释：匿名函数就是没有名字的函数，闭包是可访问一个函数作用域里变量的函数。
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。
使用闭包的优点：
1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在
内存泄漏：
1.全局变量引起的内存泄漏
function leaks(){
leak = 'xxxxxx';//leak 成为一个全局变量，不会被回收
}
123
2.闭包引起的内存泄漏
var leaks = (function(){
var leak = 'xxxxxx';// 被闭包所引用，不会被回收
return function(){
console.log(leak);
}
})()
123456
14、淡入淡出动画
淡入
function fadeIn(el){
setOpacity(el,0);
for(var i = 0;i <= 100;i++){
(function(num){
setTimeout(function(){
setOpacity(el,num);
},10 * num);
})(i);
}
}
淡出
function fadeOut(ele){
for(var i = 0;i <= 100;i++){
(function(){
var p = i;
setTimeout(function(){
setOpacity(ele,p);
},10 * (100 - p));
})();
}
}
兼容性
function setOpacity(elem,level){
if(elem.filters){ //ie8
elem.style.filter = "alpha(opacity=" + level + ")";
}else{ //w3c
elem.style.opacity = level / 100;
}
}
15、面向对象与原型
面向对象三大特性：封装，继承，多态。
1.封装
(1)工厂模式创建对象
function createObj(name,sex){
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.say=function(){
return obj.name + ":" + obj.sex;
}
return obj;
}
var a = createObj("小明","男");
var b = createObj("小红","女");
alert(a.say());
alert(b.say());
缺点：无法判断对象的类型
(2)构造函数创建对象
function Box(name,sex){
this.name = name;
this.sex = sex;
this.say=function(){
return this.name + ":" + this.sex;
}
}
var a = new Box("小明","男");
var b = new Box("小红","女");
alert(a.say());
alert(b.say());
缺点：增加了内存消耗
问题：
new Object()在什么地方执行了？
执行的过程如下：
1.当使用了构造函数，并且new 构造函数()，那么就后台执行了new Object()；
2.将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this就代表new Object()出来的对象。
3.执行构造函数内的代码；
4.返回新对象(后台直接返回)。
(3)原型
原型模式的执行流程：
1.先查找构造函数实例里的属性或方法，如果有，立刻返回；
2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；
注意：虽然我们可以通过对象实例访问保存在原型中的值，但却不能访问通过对象实例重写原型中的值。
<1>创建原型对象
prototype通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。
function Box(){}
Box.prototype.name="小明";
Box.prototype.sex = "男";
Box.prototype.say=function(){
alert(this.name + ":" + this.sex) ;
}
var a = new Box();
a.sex = "女";
a.say();
<2>原型检测方式
1、Box.isPrototypeOf()判断一个对象是否指向了该构造函数的原型对象。
删除属性：deletea.name;
//删除属性 delete只能删除自己的，不能删除原型里的属性。
2、实例对象.hasOwnProperty(“sex”)
eg：a.hasOwnProperty(“sex”)
//实例里有返回true，否则返回false
3、in操作符
通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。
alert(“name”in box);//true，存在实例中或原型中
判断是否只有原型中存在属性：
function isPro(obj,pro){
if(!obj.hasOwnProperty(pro)){
if(pro in obj){
return true;
}
}
return false;
}
4、原型重写
Box.prototype={
constructor:Box,
name:"小明",
sex:"男",
say:function(){
return this.name + ":" + this.sex;
}
};
5、组合模式 (构造函数+原型)
构造函数里：写属性(实际上写到了实例里)
原型里：写方法
function Box(name,sex){
this.name = name;
this.sex = sex;
}
Box.prototype={
constructor:Box,
say:function(){
return this.name + ":" + this.sex;
},
sing:function(){
alert("hello");
}
};
var a = new Box("小明","男");
var b = new Box("小红","女");
console.log(a.say());
b.sing();
2.继承
1、原型链继承
function Parent(){
this.name = "父类";
this.age = "34";
}
function Child(){
this.name = "子类";
this.age = "12";
}
Child.prototype = new Parent();
var c = new Child();
(c.__proto__=====>Parent.prototype)
console.log(c.age);
缺点：1、 无法从子类中调用父类的构造函数， 这样就没有办法把子类中属性赋值给父类。
2、 父类中属性是在子类的原型中的，这违背了我们前面所讲的封装的理念。
2、对象冒充继承(伪造对象、经典继承)
function Parent(name,age){
this.name = name;
this.age = age;
}
function Child(name,age,sex){
Parent.call(this,name,age);
//对象冒充，给父类传参
this.sex = sex;
}
var a = new Child("小明","20","男");
console.log(a.name);
console.log(a);
缺点：无原型
3、组合继承
function Parent(name,age){
this.name = name;
this.age = age;
}
function Child(name,age,sex){
Parent.apply(this,[name,age]);
this.sex = sex;
}
Child.prototype = new Parent();
var a = new Child("小明","20","男");
alert(a.name);
console.log(a);
缺点：父类在使用过程中会被调用两次：一次是创建子类型的时候，另一次是在子类型构造函数的内部。
4、ES6类的继承
class语法：
class Box{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
return this.name + ":" + this.age;
}
static max(x,y){
if(x>y){
return x;
}
else{
return y;
}
}
}
var a = new Box("小明","20");
//alert(a.name);
console.log(a);
alert(Box.max(4,2));
类的继承：(关键字extends)
class Parent{
constructor(name,age){
this.name = name;
this.age = age;
}
sing(){
return this.name + ":" + this.age;
}
}
class Child extends Parent{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
say(){
alert("lllll");
}
}
var a = new Child("小明","20","男");
console.log(a);
alert(a instanceof Child);//返回true
alert(a instanceof Parent); //返回true