如何编码解码

1、Math对象

编码:var code=encodeURI(“原文”);
解码:var 原问=decodeURI(“code”);
用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI
eval 专门执行字符串格式的表达式
var 表达式的结果=eval(“表达式”)
while循环
语法:
while(循环条件){
循环操作;
}

Math.PI圆周率 π

三目运算(简化的if…else)

Math.ceil()向上取整    返回的是大于或等于函数参数,并且与之最接近的整数     如:Math.ceil(2.1) ->3

语法:条件?操作1:操作2
相当于if(条件){
操作1;
}else{
操作2;
}

Math.floor()向下取整     返回的是小于或等于函数参数,并且与之最接近的整数     如:Math.floor(0.4) ->0    Math.floor(1.9)->1

强化版语法:条件1?操作1:条件2?操作2:条件3?操作3:操作4;
if(条件1){
操作1;
}else if(条件2){
操作2;
}
else{
操作3;
}

Math.round(num)返回与num最接近的整数(四舍五入)

for 与 while
1、while循环 一般比较适合用于 不太确定循环次数的时候使用
2、for循环 一般适用于 已经确定了 循环次数的时候使用

Math.max(x,y)返回指定的数中带有较大的值的那个数

***js内置对象:ES标准中规定的,浏览器厂商已经实现的对象(属性和方法)
11个:String Number Boolean -> 包装类型
Array Date Math RegExp
Error Function Object
Global全局对象 -> 在浏览器中被window代替

Math.min(x,y)返回指定的数字中带有最低值的数字

***包装类型:专门封装原始类型的数据,并提供对原始类型数据的操作方法的对象

Math.abs()返回数的绝对值

为什么:原始类型的数据不包含任何属性和功能
本身不能加.调用方法和属性
何时使用:只要试图用原始类型的变量调用属性和方法时,都会自动创建并且调用包装类型对象
何时释放:方法调用后,自动释放!并返回方法执行的结果。

Math.pow(x,y)x 的 y 次幂

为什么null和undefined不能打.:因为没有对应的包装类型

Math.random()返回介于 0 ~ 1 之间的一个随机数     [0,1)

isFinite:判断一个数是否在有效范围内
javascript:infinite 无穷大 5/0
var bool=isFinite(num)
do{
循环体;
}while(条件)

从1开始 至 任意值   [1 , 任意值]

continue:跳过本次循环,继续判断循环条件,结束本次
break:直接退出循环,不再执行循环条件判断,直接结束

parseInt(Math.random()*上限+1);

7、★★★★★★★★Function

范围值:从任意值开始至任意值

js中函数都是一个对象,函数名都是引用函数对象的变量
创建函数:3种
1、声明方式:function 函数名(参数列表){函数体}
只有声明方式创建的函数,才能被声明提前

parseInt(Math.random()*(上限-下限+1)+下限);

鄙视题:js中正确的创建函数的方法
function compare(a,b){return a-b};
var compare=function(a,b){return a-b};
var compare=new Function(“a”,”b”,”return a-b”);

例如:获取-30到30

****声明提前(hoist):
在程序执行前
将var声明的变量和function声明的函数
集中到*当前作用域*的开始位置创建
赋值留在原地
强调:只有声明方式定义的函数才能被提前
直接量方式创建的函数,不能提前

Math.cel(Math.randon()*60-30)

只要遇到先使用后创建的,一定实在考声明提前
解决:先把代码转换为提前后的样子,再去判断

Math.floor(Math.randon()*60-30)

****按值传递:两个变量间赋值或将变量作为参数传递时
其实只是将变量中的值复制了一个副本给对本 – 复制副本,各用个的
如果传递的都是原始类型数据的值
修改新变量,原变量不受影响的
如果传递的是引用类型的对象 — 保存地址值 –
地址值互用,谁用都会发生改变
通过新变量修改对象,等效于直接修改原对象

2、日期对象

 

var mydate=new Date();获取当前时间

****重载(overload):相同函数名,不同参数列表的多个函数
可在调用时,根据传入参数的不同
自动选择对应的函数执行
为什么:减轻调用者的负担!
问题:js的语法不支持重载!
js不允许多个同名函数同时存在。
如果同时存在,最后定义的函数会覆盖之前所有同名函数
解决:arguments对象
什么是arguments:函数中,专门接受所有传入的参数的对象
arguments是类数组对象:长的像数组的对象
只有两点和数组相同:
1、都可用下标访问每个元素
比如:arguments[1]
2、都有length属性记录参数个数
比如:arguments.length
强调:类数组对象不是数组
几乎所有数组API,都不能使用!
何时创建:在调用函数时,自动创建的函数局部变量!
变相实现了重载

eg:获取2017.10.1  new Date(2017,9,1)

****匿名函数:创建函数时,不适用任何变量引用的函数
何时使用:如果一个函数,只会执行一次!
为什么:节约内存!
因为匿名函数对象,没有变量引用着
用完,自动立刻释放!
如何使用:2种
1、自调:函数定义完,立刻执行!
(function(参数列表){
函数体
})();

简单写法:

2、回调:将函数作为对象,传递给其他函数调用!
arr.sort(function(a,b){return a-b});
//排序后,比较器函数自动释放!

var time=document.getElementByID(“time”);

1、闭包
作用域(scope):2种
1、全局作用域
全局变量:随处可用,可反复使用
2、函数作用域
局部变量:只有函数调用时,函数内部才可用
调用结束后,释放
包含:参数和在函数内部声明的变量

time.innerHTML=d.toLocalDateString()+d.toLocalTimeString();

***函数的执行原理:
0、程序加载时:
创建执行环境栈,保存函数调用的顺序的数组
首先压入全局执行环境(EC)
全局EC引用全局对象window
window中将要保存全局变量
1、定义时
创建函数对象,封装函数的定义。
在函数对象中定义scope属性,记录函数来自的作用域
全局函数的scope都来window
2、调用前
在执行环境栈中压入新的EC
创建活动对象AO:保存本次函数调用用到的局部变量
在EC中添加 scope.chain 属性引用AO
设置AO的parent为函数的scope引用的对象
3、调用时
变量的使用规则:优先使用局部变量
如果局部没有才去全局找
4、调用完
函数的EC出栈,AO自动释放,局部变量也就自动释放

mydate.getFullYear()获取年份

***闭包:保护一个可反复使用的局部变量的一种词法结构
为什么:全局变量:优点:可重复使用
缺点:随处可用,容易被污染
局部变量:优点:仅内部可用,不会被污染
缺点:一次性

mydate.getMonth()

如何实现:3步
1、确定受保护的变量?
2、定义专门使用变量的函数
3、用外层函数,将受保护的变量和操作变量的函数包裹起来
外层函数返回内层函数
鄙视时:
1、判断闭包,找到受保护的变量,确定其值
2、外层函数调用了几次?就创建了几个闭包
受保护的变量就有几个副本
3、同一次外层函数调用,返回的内部函数,都是使用同一个受保护的变量

获取月份,月份从0开始的,即0就是1月

严格模式的目的
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。

mydate.getDate()获取日期

语法和行为改变
全局变量显式声明:一定加var
禁止使用with语句
禁止this关键字指向全局对象
对象不能有重名的属性
函数不能有重名的参数
禁止八进制表示法
不允许对arguments赋值
禁止使用arguments.callee

mydate.getDay()获取星期    0–>周日    1–>周一

1、★★★★★★★★Array

mydate.getHours()获取当前的小时

3、****数组API:浏览器厂商已经实现的函数,程序员不需要创建,直接使用
0、arr.indexOf() 从前往后查找 返回下标 只能找1个
arr.lastindexOf() 从后往前查找 返回下标 只能找1个
0、arr.every()对数组中的每一项运行给定函数,如果该函数对每一项都返回
true ,则返回 true

mydate.getMinutes()获取分钟

var arr=[1,2,3,4,5,6,7,8,9];
var
result=arr.every(function(value,index,array){//此函数会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。
return value>0;
});
alert(result);//true
0、arr.some()对数组中的每一项运行给定函数,如果该函数对任意一项返回 true
,则返回 true 。
var arr=[1,2,3,4,5,6,7,8,9];
var
result=arr.some(function(value,index,array){//此函数会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。
return value>7;
});
alert(result);*/
0、arr.filter()对数组中的每一项运行给定函数,返回该函数结果为 true
的项组成的数组。
var
newarr=arr.filter(function(value,index,array){//index索引array数组本身
console.log(index+’—-‘+value+’—–‘+array[index]);
return value>3;
});
console.log(newarr);//[4, 5, 6, 7, 8, 9]
0、arr.map()对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
var newarr=arr.map(function(value,index,array){
return value>5;
return value*=100;
});
console.log(newarr);*/
0、arr.foreach()对数组中的每一项运行给定函数。这个方法没有返回值。
var arr=[1,2,3,4,5,6,7,8,9];
arr.forEach(function(value,index,array){
console.log(index+’—-‘+value+’—–‘+array);
});
0、arr.reduce()迭代数组的所有项,然后构建一个最终返回的值。从数组的第一项开始,逐个遍历到最后。
var arr=[1,2,3,4,5,6,7,8,9,10];
var result=arr.reduce(function(prev,value,index,array){
console.log(prev +’—-‘+ value);//prev:每一次迭代的结果
value:数组项的值。
return prev+value
},100);//100:迭代的初始值。prev指向它,如果没有这个值prev指向数组的第一项。
alert(result);
1、 toString():不改变原数组,返回新的字符串
1、var str = String(arr);
每个元素值之间用逗号分隔

mydate.getSeconds()获取秒

2、Array.isArray() 判断是否是数组类型

mydate.getMilliseconds()获取毫秒

3、arr.concat() 数组拼接 不修改原数组

mydate.getYear()

4、arr.slice():截取 不修改原数组,返回新数组 含头不含尾
省略第二个参数,表示从starti一直获取到结尾
var a = [1,2,3,4,5]; a.slice(0,3); // 返回 [1,2,]

返回一个距1900的偏移量,这个偏移量加上1900就是正确的年份

5、arr.join(“连接符”); 会改变原数组
可自定义连接符
省略”连接符”,等效于String()
固定套路:
1、将单个字符数组拼接为单词(无缝连接)
arr.join(“”)
问题:频繁的字符串拼接会浪费内存
解决:先将要拼接的子字符串,放入一个数组,最后将数组无缝拼接为字符串

mydate.getTime()

6、arr.splice:删除,添加,替换
强调:直接修改原数组! 返回所有被删除的元素组成的子数组
删除:arr.splice(starti,n)
添加:arr.splice(starti,0,值1,值2…)
强调:原starti位置的元素,以及后续的元素,都会被顺移

返回一个整数值,这个整数代表了从1970年1月1日开始计算到Date对象中的时间之间的毫秒数

替换:arr.splice(starti,n,值1,值2…)
从starti位置开始,删除n个元素,在插入新元素
强调:删除的个数n,和插入新元素个数不必相同

mydate.setTime()

7、翻转数组:arr.reverse(); 改变原数组

设置时间

8、arr.push()
可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
 9、arr.pop()
从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
10、arr.unshift()方法能够在数组前端添加任意个项 返回新数组的长度。
11、arr.shift() 方法能够移除数组中的第一个项并返回该项,同时将数组长度减
1。

d.setDate(mydate.getDate()+1);

12、arr.sort(); 排序 会改变原数组

setInterval()方法与setTimeout()方法

问题1:默认只能将所有元素转为string后,在排列
解决:自定义比较器函数

setInterval(”调用的函数”, “指定的时间间隔”)

1、必须有两个参数a,b,在被调用时,自动接受正在比较的两个元素值
2、必须返回数字来表示两个值的大小
如果a>b,就返回一个正数
如果a<b,就返回一个负数
如果a=b,就返回0
如何使用比较器:将比较器函数作为参数,传入sort();

间隔调用

问题2:所有算法默认只有升序排列
解决:将比较器中的a-b,换成b-a,让后数-前数;

clearInterval(interID)停止调用

2、★★★★★★★★String 多个字符组成的*只读*字符数组

setTimeout()方法

1、大小写转换:将字符串中每个英文字母统一转为大写 或 小写
var upper = str.toUpperCase();
var lower = str.toLowerCase();

setTimeout(“调用的函数”, “指定的时间后”)延迟时间

2、str.charAt(i);等效于 str[i] 获取指定位置的字符:
3、var num=str.charCodeAt(i); 获取指定位置的字符的unicode号:
4、var char=String.fromCharCode(num); 从unicode号翻译为原文:

获取元素的左偏移值elem.style.left

5、检索字符串:查找关键词的位置。
1、 var i = str.indexOf(“关键词”,fromi);
从fromi位置开始,查找右侧下一个关键词的位置
第二个参数:表示开始查找的位置
可省略,如果省略,表示从0位置开始
返回值:找到:返回关键词第一个字符的位置的下标 没找到:返回-1

跳转到网页

2、从后向前找:var i = str.lastIndexOf(“关键词”,fromi)
从fromi位置开始,查找左侧下一个关键词的位置
第二个参数:省略,默认从length-1开始
注意:以上两个方法,默认只要第一个就结束了,如果希望找出全部的关键字位置,需要用while循环,
判断只要不等于-1,就可以一直执行

Window.location.href=”

6、截取子字符串:
str.slice(starti,n);支持负数参数,截取到不包含下标n 返回新字符串
str.substring(starti,n)不支持负数参数 返回新字符串
str.substr(starti,n);截取n个,返回新字符串

3、String对象

7、replace替换字符串 string.replace(“tmd”, “*”);返回新字符串

创建string对象:

8、str.split() 将字符串以参数分割为数组,返回数组

var str = new String();

var str=’abcadeafg’ str.split(‘a’) //[“”, “bc”, “de”, “fg”]

方法:

 

length返回字符串的长度

4、★★★★★★★★Math

charAt()返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length-1 之间,该方法将返回一个空字符串。

1、取整:3种
1、上取整:只要超过,就取下一个整数
Math.ceil(num);
2、下取整:无论超过多少,都省略小数部分
Math.floor(num);

charCodeAt ()返回一个整数,代表指定位置上字符的 Unicode 编码 (返回值是 0 – 65535 之间的整数)

3、四舍五入取整:够五进位,不够就舍弃
Math.round(num); 返回数字,但只能取整

参数:必需。表示字符串中某个位置的数字,即字符在字符串中的下标。

vs num.toFixed(d); 可以指定小数位数,但返回字符串
自定义round方法:
按任意小数位数四舍五入
返回数字类型
计算机有摄入误差
// function round(num,d){//555.555 2位
// //将num乘以 10 的d次方 55555.49
// num*=Math.pow(10,d);
// console.log(num)
// //用round将num四舍五入 55555
// num=Math.round(num);
// //返回num除以10的d次方 //555.55
// return num/Math.pow(10,d);
// }
// var new1=round(555.555,2);
// console.log(new1);

fromCharCode()从一些 Unicode 字符值中返回一个字符串

2、乘方和开方
乘方:Math.pow(底数,幂) 比如:Math.pow(10,2)
开方:Math.sqrt(num) 只能开平方

replace(str/regexp,newstr)进行文字替换,用newstr替换str/regexp,返回替换后的字符串的复制(只会替换一个)

3、最大值和最小值:返回参数中最大或最小的一个值
Math.max(x,y,z);
Math.min(x,y,z);
获取数组中的最大值或最小值
问题:Math.max()/min() 不支持数组参数!
解决:Math.max.apply(Math,arr);
Math.max.(…arr);

如果想替换多个,repalce(/a/g,”b”);

4、绝对值:Math.abs(num);//负数辩正数

//所有a会替换为b

5、随机数:Math.random(); 在0~1之间取随机小数
可能取到0,但不可能取到1
在min~max之间取随机整数的公式:
parseInt(Math.random()*(max-min+1)+min);

substr(2,5)//从第二个,截取五个

三角函数复习
圆的方程:
X=a+Math.sin(angle*Math.PI/180)*r
Y=b+Math.cos(angle*Math.PI/180)*r
x,y–盒子的位置
a,b–圆心的位置
angle–角度
r–半径
勾股定理复习
C=Math.sqrt(a*a+b*b)

substring(2,5)//从第二个截取到第五个(不含第5个)

 

如果 substring 是最后有一个数负数 那么默认

5、★★★★★★★★Date

substring(2,-8);从第0个截取到第2个不含第2

创建:4种
1、创建一个日期对象,获得客户端当前系统时间
var date = new Date();
2、创建一个日期对象,封装自定义时间
var date = new Date(“yyyy/MM/dd hh:mm:ss”);
本质:其实日期对象中封装的是1970年1月1日0点至今的毫秒数

toLowerCase()//返回一个字符串,字符串中的字母转化为小写字母

3、创建一个日期对象,封装自定义时间
var date = new Date(yyyy,MM-1,dd,hh,mm,ss);
取值返回:MM:0~11 只有月份需要修正
dd:1~31
hh:0~23
ss,mm:0~59

toUpperCase()//返回一个字符串,字符串中的字母转化为大写字母

4、复制一个日期对象:
为什么:日期对象的API都直接修改原日期对象
无法获得修改前的日期
何时复制:只要希望起始时间和截止时间同时保存时
都要先复制一个副本,再用副本修改
var endDate = new Date(startDate.getTime());

stringObject.split(separator,limit)//把字符串分割为字符串数组

分量:时间的单位
年月日星期:FullYear Month Date Day
时分秒毫秒:Hours Minutes Seconds Milliseconds
三句话:
1、命名:年月日星期 都不带s
时分秒毫秒 都以s结尾
2、每个分量,都有一对儿getXXX/setXXX
其中,get负责获取一个分量的值
set负责设置一个分量的值
特殊:Day,没有set方法
3、取值范围:FullYear 就是当前的年份数字
Month:0~11
Date:1~31
Day:0 1 2 3 4 5 6

Hours:0~23
Minutes,Seconds:0~59

separator:从该参数指定的地方分割,limit:分割的次数

计算:
1、两个日期对象相减,结果是毫秒差
2、对每个分量做加减计算,三步:
step1:取出要计算的分量值
var n = date.getXXX();
step2:对取出的分量,做加减
step3:计算后的分量值,设置回去
date.setXXX(n);

如果把空字符串 (“”) 用作separator,那么 stringObject 中的每个字符之间都会被分割。

简写:date.setXXX(date.getXXX()+或-n)
比如:+3年
date.setFullYear(date.getFullYear()+3);
+4月
date.setMonth(date.getMonth()+4);
+10分钟

indexOf(字串,从哪个位置开始找)//返回字符串内第一次出现子字符串的位置,如果没有返回-1

日期转字符串:
默认:转为国际日期标准格式
1、转成当地的时间格式
date.toLocaleString(); //返回日期 + 时间

lastIndexOf()//返回字符串内最后一次出现子字符串的位置,如果没有返回-1

2、转成当地时间格式,仅保留日期部分
date.toLocaleDateString(); //返回日期部分

indexOf(“s”,从第几个开始找)

3、转成当地时间格式,仅保留时间部分
date.toLocaleTimeString(); //返回时间部分

lastIndexOf(“s”)从后面开始找

问题:浏览器兼容性,输出格式不一样
解决:自定义格式化方法

string与new String的区别:

3、★★★★★★★★Regexp

new出来的实例,即使值一样,他们也不相等。

什么是:定义字符串中字符出现规则的表达式
何时使用:查找 替换 验证

eg:var str1=”a good string”;

2、备选字符集:[] 规定*一位*字符可用的备选字符列表
[a-zA-Z\u4e00-\u9fa5_]{6,14}

var str2=new String(“a good string”);

强调:1、一个中括号,只能匹配一个字
2、正则表达式不能仅匹配部分规则:必须全部匹配
特殊:1、如果备选字符集中有部分连续字符
可用-省略中间字符
比如:一位数字:[0-9]
一位字母:[a-zA-Z]
一个数字,字母或者下划线:[0-9a-zA-Z_]
一个汉字:[\u4e00-\u9fa5]

str2是string对象的一个实例,对象可以动态随便的添加属性和方法,而字符串类型不能。

3、预定义字符集:专门对常用字符集的简化写法:
一位数字:\d -> [0-9]
一位字母,数字或下划线:\w -> [0-9a-zA-Z_]
一位空白字符:\s 包括:空格,换行,制表符
一位除换行外的任意字符:.
问题:预定义字符集是固定的,不灵活
解决:需求和预定义字符集完全匹配,优先使用预定义字符集,如果需求和预定义字符集不完全匹
就只能自定义普通字符集了

4、事件

4、量词:规定一个字符集出现次数的规则

onclick单击

1、有明确数量
{n,m}:前边相邻的字符集,最少出现n次,最多出现m次
{n,}:前边相邻的字符集,最少出现n次,最多出现无限次
{n}:前边相邻的字符集,只能出现n次
2、没有明确数量
?:可有可无,但最多1个
*:可有可无,数量不限
+:至少一个,多了不限

onblur() 当鼠标离开文本框

5、选择和分组:
选择:两个规则中二选一匹配
规则1|规则2
分组:将多个字符集临时组成一组子规则

onsubmit() 当用户单击 submit按钮

6、指定匹配位置:
开头和结尾:^表示字符串的开头位置
$表示字符串的结尾位置
特殊:默认正则表达式匹配字符串的一部分即可
如果希望完整匹配:前加^后加$
单词边界:\b 开头,结尾,空格

onkeyup()   当键盘弹起

密码强度:8为字母,数字的组合
至少一位大写字母和一位数字
1、预判整个字符串,从头到位不只由字母组成
结论:可能有数字,或有特殊符号
(?![a-zA-Z]+$)
2、预判整个字符串,从头到尾不只由小写字母和数字组成
结论:可能有大写字母,或特殊符号
(?![0-9a-z]+$)

onkeydown() 当键盘按下

如果前两个条件都满足:说明:
可能有数字,小写字母,大写字母,或特殊符号

5、window常见属性

3、只能是8为字母或数字的组合
[a-zA-Z0-9]{8} — 排除特殊符号了

window.innerWidth浏览器窗口的宽度

^(?![a-zA-Z]+$)(?![a-z0-9]+$)[a-zA-Z0-9]{8}$

innerHeigt浏览器窗口的高度

2、****String中支持正则的API

var agent = window.navigator.userAgent; //检测浏览器类型(浏览器头的信息)

2、search:支持正则,不能指定下次开始位置,不支持g,返回下标 —
适合判断有没有
3、match:支持正则,支持ig,可以找到所有关键词的内容,无法获得下标。 —
适合获得所有关键词的内容
4、即获得每个关键词的位置,又获得其内容
var arr=reg.exec(str);
在str中,查找符合reg规则的第*一个*敏感词
如果不加g,也只能找到第一个
如果加g,可用循环反复调用,找所有
返回值:arr[0]保存着敏感词的内容
arr.index保存着当前敏感词的位置
在使用exec查找关键词的同时,可以用RegExp.$n获得本次找到的关键词的部分的内容

window.location.href=”

贪婪模式与懒惰模式
1、贪婪模式:正则表达式默认匹配最长的符合条件的字符串
2、懒惰模式:仅匹配最短的符合条件的字符串
贪婪改懒惰:.*? .+?

6、数组

2、验证:检查字符串和正则表达式是否*完全*匹配
如果:var bool=reg.test(str);
查找str是否符合reg的规则要求
返回值:验证通过,返回true,否则返回false

(1)创建数组

6、★★★★★★★★Error

var 变量名=[ 元素1,元素2,元素3,…];

错误处理:当程序发生错误时,保证程序不会异常中断的机制
为什么:程序默认只要碰到错误就会闪退,用户体验差
如何错误处理:
try{
可能发生错误的代码段
}catch(err){
如果发生错误,才执行的错误处理代码
}finally{
无论是否发生异常,都会执行的代码段
}
其实finally是可以省略的
强调:err会在错误发生时,自动获得一个错误对象
错误对象:封装错误信息的对象
在发生错误时,自动创建
js错误对象的类型:6种
语法错误:SyntaxError
引用错误:ReferenceError
类型错误:TypeError
范围错误:RangeError

(2)遍历数组

EvalError,URIerror

<1>for循环

性能:放在try中的代码,效率都会降低
解决:1、尽量在try中仅包含可能出错的代码。
2、大多数异常,都可以提前预知并预防
大多数异常都可用if提前判断错误

for(var i=0;i

***判断浏览器兼容性:
判断浏览器是否支持Ajax对象:XMLHttpRequest

console.log(arr[i]);

try catch中的return
1、finally中没有return
如果不出错,首先会确定try中的return的结果
**再执行finally中的代码
最后返回结果
如果出错,首先执行catch中的代码
确定catch中return的结果
在执行finally中的代码
最后返回结果
2、finally中有return,finally中的return会覆盖之前的所有的return

}

抛出自定义异常:
在一个架构级的函数中,向函数的调用者抛出自定义异常
目的在提醒调用者,错误的使用了函数。
如何抛出:throw new Error(“自定义错误信息”);

<2>for in

8、★★★★★★★★Objiect

for(vinarr){

面向对象:三大特性(封装 继承 多态)
什么是面向对象:程序中都是用对象来描述现实中的一个事物
什么是对象:程序中描述现实中一个具体事物的程序结构
包括:属性和方法
为什么面向对象:现实中所有的数据都必须包含在一个事物中才有意义

console.log(v)

如何创建自定义对象
封装:将一个事物的属性和功能集中定义在一个对象中
现实中一个事物的属性,会成为对象的属性
而一个事物的功能,会成为对象的方法

}

3种:
1、对象直接量:
var obj={
“属性名”:属性值,

“方法名”:function(参数列表){函数体}
}
强调:其实属性名和方法名的引号可以省略
如何访问属性和方法
obj.属性名 — 用法同普通变量
等效于:obj[“属性名”];
obj.方法名() — 用法同普通函数
等效于:obj[“方法名”]();

(3)数组的方法

强调:如果用.就不能加””
如果用[],就必须加””
强烈建议:用.访问对象的属性和方法
*****js中一切都是对象,一切对象的底层都是hash数组
特殊:1、访问到不存在的属性,返回undefined
2、随时可添加不存在属性

pop()删除并返回数组的最后一个元素

this:在当前对象的方法内,引用正在调用方法的对象
何时使用:当前对象的方法内,要访问当前对象自己的属性时,就*必须*写成this.属性名

shift()删除并返回数组的第一个元素

何时创建对象:今后都要先封装对象,在调用对象的属性和方法。

push()向数组的末尾添加一个或更多元素,并返回新的长度。

2、使用new关键词
var obj=new Object();//创建空对象
obj.属性名=值;

obj.方法名=function(){}
其中new Object()
new可省略,()也可以省略,但是不能同时省略

unshift()向数组的开头添加一个或更多元素,并返回新的长度。

*****3、使用构造函数反复创建多个结构相同的对象
使用直接量创建对象的问题:仅适合创建一个单独的对象
反复创建多个结构相同的对象,则代码冗余度太高!
不便于维护
解决:先定义构造函数,再用构造函数反复创建对象
什么是构造函数
专门定义一类对象统一结构的函数
如何定义:function 类型名(属性参数列表){
this.属性名=属性参数值;

this.方法名=function(){}
}
如何调用构造函数创建对象
var obj=new 类型名(属性值列表)
new的执行过程:4个事
1、创建一个空对象:new Object()
2、?
3、用新创建的空对象,调用构造函数
4、返回新对象的地址,保存到左边的变量中

slice(x,y)从数组中选择元素组成新的数组,x和y值指定了开始位置和结束位置。

实例化:用构造函数创建一个新对象
构造函数是一类对象的统一结构
每个对象是构造函数的实例

splice(位置,个数[,元素1,元素2,……])从数组中删除或替换元素

遍历一个对象的属性:
for(var i in obj){
obj[i]//当前属性值
}

sort()以字母表的顺序(unicode编码)排序

1、*****面向对象

真正能做到排序的方法:

面相对象和面相过程的区别(概念)
面向过程–函数式(过程化).
面向过程:面向过程的思想是把一个项目、一件事情按照一定的顺序,从头到尾一步一步
地做下去,先做什么,后做什么,
一直到结束。
弊端:全局变量、全局函数。
面向对象(OOP):强调类的概念,通过类可以创建任意多个具有相同属性和方法的实例对象。
面向对象:面向对象的思想是把一个项目、一件事情分成更小的项目,或者说分成一个个
更小的部分,每一部分负责什么方面的功能,最后再由这些部分组合而成为一个整体。

arr.sort(function(a,b){

工厂模式
工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。
工厂模式的实现方法非常简单,通过封装解决了创建多个相似对象的问题,但是却无从
识别对象的类型,因为全部都是Object,不像Date、Array等

if(a>b){

构造函数模式虽然好用,但也并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例对象上重新创建一遍。

return -1;}

1、*****继承:父对象的成员(属性和方法),子对象可以直接使用

else{return 1;}

为什么继承:代码重用!节约了内存空间!
何时继承:只要多个子对象共有的属性和方法,都要集中定义在父对象上
js中的继承:都是通过原型实现的 — 继承原型
什么是原型:保存一类子对象共有属性和方法的父对象
所有子对象都自动继承原型对象
每个构造函数都有一个prototype属性,应用自己的原型对象

})

对象成员的访问规则
1、先在对象本地找自有属性
2、如果自己没有,就自动通过__proto__找到原型对象的自有属性和共有属性
自有属性:保存在对象本地的属性
共有属性:保存在父对象中的属性,所有子对象共有

reverse()将元素倒序输出

面试题:判断自有和共有属性:
1、判断自有属性:obj.hasOwnProperty(“属性名”);
如果返回true,说明”属性名”是obj的自有属性
如果返回false,说明2种可能,共有或没有

数组1.concat(数组2,数组3,……)   合并数组

2、判断共有属性:2个条件
1、不是自有:hasOwnProperty返回false
2、在原型链上包含:”属性名” in 对象
检查”属性名”是否定义在对象的原型链上
if(obj.hasOwnProperty(“属性名”)==false && “属性名” in obj){
是一个共有属性
}
原型链:由各级对象,通过__proto__逐级继承,实现的链式继承关系
只要在原型链上包含的成员,子对象都可以继承

join()将数组中所有元素都转化为字符串

修改或删除属性:
1、修改或删除自有属性:
修改:obj.属性名=新值;
删除:delete obj.属性名;
2、修改或删除共有属性:
不能用子对象直接操作
如果用子对象操作
1、修改:obj.共有属性=新值; — 危险
结果:在obj本地添加同名的自有属性
2、删除 delete obj.共有属性; — 无效

toString()返回一个字符串,该字符串包含数组中的所有元素,各个元素间用逗号分隔

要想修改和删除共有属性,只能通过原型对象本身

(4)求最大(最小)值的方法

所有内置对象,几乎都有构造函数和原型对象
只有Math没有构造函数
构造函数用于创建内置对象的实例:new 构造函数(…)
new Object 10个内置对象 是平级关系
内置对象的原型对象:保存所有内置对象的可以用的API

方法1循环vararr =[11,8,25,998,12];

判断浏览器不支持指定API
比如:判读Array类型不支持indexOf
见案例:exec01
if(Array.prototype.indexOf===undefined){
Array.prototype.indexOf=function(value,fromi){

vartempMax=arr[0];for(vari=0;i

}
}

if(arr[i]>tempMax){

1、*****继承
如何获取一个对象的原型对象
语法:Object.getPrototypeOf(obj);
等效与__proto__
检查对象间的父子(继承)关系
语法:父对象.isPrototypeOf(子对象);
判断父对象是否是子对象的父级
强调:isPrototypeOf不但可以检查直接父级,还可以检查所有原型链上的父级对象

tempMax=arr[i]

*****判断一个对象是不是数组
1、typeof无法区分对象和数组,默认返回都是[object Class]
2、判断当前对象是否继承自Array.prototype
Array.prototype.isPrototypeOf(obj)
如果返回true,说明是数组,否则不是数组
3、obj instanceof 构造函数
判断obj是否是构造函数的实例
4、输出对象的字符串形式
在Object的prototype中保存着原始的toString方法
原始的toString 默认输出[object Object]

}

5、Array.isArray(obj)

}console.log(tempMax);

***重写(override):子对象觉得父对象的成员不好用,可在本地定义同名成员,覆盖父对象中的成员。
属于多态的一种
借用函数:使用另一个对象,临时调用指定的函数
函数中的this,被替换为了临时对象
函数.call(临时对象) 相当于: 临时对象.函数()

方法2Math.max.apply(null,arr);

****实现自定义继承
1、实现两个对象间的继承
子对象.__proto__=父对象 //可能禁止访问内部属性
兼容:Object.setPrototypeOf(子对象,父对象)
让子对象继承父对象

补充:call()和apply()方法的区别

2、通过修改构造函数的原型对象来修改多个子对象的父对象
时机:应该在开始创建对象之前!

**它们各自的定义:
**

3、即继承对象,又扩展结构
2步
1、借用父类型构造函数
父类型构造函数.apply(this,arguments);
*****call vs apply
功能完全一样,都是借用函数,并传入参数
差别:call,要求分散传入参数
apply,要求将参数放入在集合中传入
2、让子类型的原型,继承父类型的原型
Object.setPrototypeOf(子类型.prototype,父类型.prototype)

apply:应用某一对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A,
arguments);即A对象应用B对象的方法。

1、★★★★★★★★DOM:Document Object Model

call:调用一个对象的一个方法,以另一个对象替换当前对象。例如:B.call(A,
args1,args2);即A对象调用B对象的方法。

专门操作网页内容API W3C DOM标准 浏览器厂商实现DOM标准
DHTML:一切实现网页动态效果的技术的统称
HTML+CSS+javascript
鄙视题:HTML XHTML DHTML XML

它们的共同之处:

HTML:超文本标记语言,专门用于编写网页内容的语言
XHTML:更严格的HTML标准
DHTML:一切实现网页动态效果的技术的统称
XML:可扩展的标记语言 — 可自定义标签名的标记语言(配置文件和数据格式)

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

DHTML模型:
BOM:Broweser Object Model
浏览器对象模型
专门操作浏览器窗口的API
没有标准,基本主流浏览器已经实现了功能,所以,用的不多
DOM:Document Object Model
专门操作网页内容API
W3C DOM标准 浏览器厂商实现DOM标准

它们的不同之处:

DOM:本来是可以操作一切结构化文档的:HTML和XML
核心DOM:可以操作一切结构化文档的API
万能!但是API比较繁琐
增 删 改 查
HTML DOM:专门操作网页内容的API
其实是基于核心DOM的简化版本
API简洁!仅对复杂HTML元素提供了简化 — 不是万能
改 复杂元素:增加 和 删除
实际开发:优先使用HTML DOM
HTML DOM实现不了的,用核心DOM补充

apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。

2、***DOM Tree:保存所有网页内容的树状结构

call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么

***遍历节点树:对每个子节点执行相同的操作
递归:函数内,又调用了自己
何时使用:遍历不确定层级深度的树形结构时
如何实现递归:
1、先实现遍历直接子节点的方法
强调:childNode是动态集合
动态集合:不保存完成的节点属性,只保存节点的位置
只要访问动态集合,都会导致重新查找DOM树
优:快速返回查找结果
缺:每次访问动态集合,都重新查找 — 效率低
遍历时:都要先将length属性存在变量中

Global 对象被用作thisObj。

2、对每个子节点,执行和父节点相同的操作

实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。

算法:深度优先!优先遍历当前节点的子节点
子节点遍历,才跳到兄弟节点

(5)去掉数组中重复的数

递归 vs 循环
1、递归:优:直观,易用
缺:占用更多资源,效率低
2、循环:优:几乎不占用资源,效率高
缺:难度高,代码量大

vararr =[11,8,25,998,44,32,11,25,12];

DOM中所有的节点对象
DOM元素类型

节点可以分为元素节点、属性节点和文本节点…,他们分别用不同的数字代表类型。
例如:元素(1) 属性(2) 文本(3)

每个元素节点又有三个非常有用的属性,分别为:nodeName、nodeType、nodeValue
childNodes节点的集合
childNodes(新方法)/chilrend(不包含空白)
获取当前元素节点的所有子节点,这里面包含空白节点,但在IE9之前,IE浏览器会自动忽略空白节点.

vararr2=[];

节点的高级选取 前面的方法会包含空白节点

for(vari=0; i

firstChild/firstElementChild 获取当前元素节点的第一个子节点
 lastChild/lastElementChild 获取当前元素节点的最后一个子节点
 previousSibling/previousElementSibling 获取当前节点的前一个兄弟节点
 nextSibling/nextElementSibling获取当前节点的后一个兄弟节点
 ownerDocument 获取该节点的文档根节点(document)
 document.documentElement 获取的html标签元素
 document.title 获取title标题元素
 document.body 获取body标题元素
 parentNode 获取当前节点的父节点

if(arr2.indexOf(arr[i])==-1){

 

// 如果在数组2中没有当前的这个数

****鄙视题:getXXXByXXX vs querySeletorXXX
差别:
返回值:
动态集合:
优:查询结构块,缺:导致重复检索DOM树
非动态集合
优:保存完整的属性,不会导致重复检索
缺:查询效率低

arr2.push(arr[i]);

何时使用:
如果一次查询即可得出结果,优先getXXXByXXX
如果需要多次查询才能得到结果,优先使用querySeletorXXX

// 就把当前的数放入到数组2中

2、属性
DOM元素的所有属性节点都保存在一个集合中:attributes
可用下标或者属性名访问每个属性
1、读取属性值:
核心DOM:
1、elem.attribute[下标/”属性名”].value
*2、elem.getAttribute(“属性名”) //value
3、elem.getAttributeNode(“属性名”).value
何时使用:万能 即可获得标准属性,又可以获得自定义属性

}

HTML DOM:elem.属性名 — 只能获得标准属性

}console.log(arr2);

读取css里面属性
//标准浏览器:getComputedStyle(元素对象)[‘属性名’]; 带单位
//IE8及以下:元素对象.currentStyle[‘属性名’]

JS判断一个变量的类型:

2、设置属性值:
核心DOM
*1、elem.setAttribute(“属性名”,”属性值”);
2、elem.setAttributeNode(attrNode);

functionobj(value){

HTML DOM:elem.属性名=属性值; — 只能改标准属性
不是这种方式添加的属性不能直接获取;

varleixing= Object.prototype.toString.call(value);

3、移除属性
核心DOM:
elem.removeAttribute(“属性名”);
何时使用:万能的

returnleixing;

HTML DOM:elem.属性名=””; — 相当于移除

}

4、判断有没有
核心DOM:
elem.hasAttribute(“属性名”) //返回bool
强调:万能 ,即可判断标准属性,又可以判断自定义属性

varstr = “12,3,2”;

HTML DOM:elem.属性名!=””;

alert(obj(str));//输出[object String]

标准属性 vs 自定义属性
标准:即可用核心DOM访问,有可用HTML DOM访问
自定义:只能用核心DOM

vararr =[12,3,2];

编码解码
编码:var code=encodeURI(“原文”);
解码:var 原问=decodeURI(“code”);
问题2:url中不允许出现保留字符:比如: : /
解决:用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI

alert(obj(arr));//输出[object Array]

eval:专门执行字符串格式的表达式
var 表达式的结果=eval(“表达式”)
如果传入eval的表达式有错误,JS引擎会在执行时报错

JS判断是不是数组:

1、元素的内容
elem.innerHTML:获取或设置元素开始标签到结束标签之间的HTML代码内容,没有兼容性问题。
何时使用:只要获得完整的HTML原文时
只要批量设置元素内容时,都要使用innerHTML先拼接好字符串,再一次性赋值。

<1>function isArray(s){

elem.textContent:获取或设置元素开始标签到结束标签之间的纯文本的正文
忽略html标签:将特殊符号翻译为正文
有兼容性问题:IE8 老IE:elem.innerText

var flag = s instanceof Array;

 

if(flag && s.constructor == Array){

3、样式
内联样式:优先级最高,会覆盖其他地方的样式
仅仅当前元素可用,不会影响其他元素
elem.style.css属性名
elem.style.css属性名=”值”
elem.style.cssText=属性名=”值” 连写

alert(“是数组”);}

内部样式表和外部样式表:
var sheet=document.styleSheets[i];//获取某一个样式表

else{alert(“不是数组”);}

var rules=sheet.cssRules||sheet.rules;//当前样式表中所有的选择器

}var a =[1,2,3];

var rule=rules[i];//获取第几个选择器

isArray(a);

rule.style.transform=”rotate(0deg)”;//给当前选择器修改样式

<2>function isArray(object){

修改的缺点:1、复杂
2、优先级不一定能覆盖到其他样式
3、牵一发而动全身(改一个有可能多个都被改变)

var falg == object && typeof object ===‘object’&& Array == object.constructor;

使用场合,用于获取样式

if(flag && s.constructor == Array){

1、添加和删除元素
1、添加单个元素:3步
1、创建一个空元素
语法:var elem = document.createElement(“标签名”);

alert(“是数组”);}

2、将新元素,加载到指定DOM树上的父元素下
语法:parent(父元素).appendChild(elem)
//将我们的elem追加到parent的最后一个子元素的后面
parent(父元素).insertBefore(elem,已有元素);
//将elem插入到”已有元素”的前面
parent(父元素).replaceChild(elem,已有元素); //用elem替换”已有元素”

else{alert(“不是数组”);}

强调:每一次修改DOM树,都会导致重新layout,频繁修改DOM树,会效率降低
解决:先在内存中,将DOM子树拼接好,在整体加到DOM树里面

}var a =[1,2,3];

2、批量添加多个平级子元素(兄弟元素)
1、创建一个文档片段:Document Fragment
文档片段:内存中临时存储多个DOM元素的临时父元素
何时使用:只要添加多个拼接子元素的时候,都要先将子元素,放入到我们的文档片段中保存(缓存)
var frag = document.createDocumentFragment();

isArray(a);

2、将子元素追加到文档片段里面去,临时保存
frag.appendChild(子元素);
其实frag的用法和普通父元素是完全一样的

}

3、将文档片段整体追加到页面上
parent.appendChild(frag);
强调:Fragment不会出现在DOM树上

7、windows对象

3、删除子元素:parent(父元素).removeChild(子元素);

JavaScript组成:ECMAScript,BOM(浏览器对象模型),DOM(文档对象模型)。

2、*****event对象

(1)window open 和close 方法

事件:用户手动触发的 或者 浏览器自动触发的状态的改变
事件对象:在事件发生时,自动创建的,专门封装事件信息的对象
事件处理函数:在事件发生时,自动调用执行的函数

open:

事件对象获取:

window.open(URL,name,specs,replace)

IE8:window全局有一个属性event,在事件发生时,保存事件对象
兼容:elem.onXXX=function(e){
e=e||window.event;
}
也可以通过arguments[0]获取

URL:打开指定的地址

事件对象属性
clientX,clientY:鼠标相对于可视区的位置。
pageX,pageY: 鼠标相对于文档的位置。
offsetX,offsetY:鼠标相对于操作元素(鼠标点击元素)到元素边缘(左上)的位置.
screenX,screenY:鼠标相对于显示屏的位置.

name:_blank(在新的窗口打开),_self(覆盖原来的窗口)

3、事件监听器(事件绑定)(兼容)–可以绑定多个函数在一个对象上
target.addEventListener(“事件类型”, 函数,
是否捕获(布尔值))–标准浏览器事件监听
 target.removeEventListener()–标准浏览器取消监听
 target.attachEvent(“事件类型”,函数) –IE浏览器事件监听
 target.detachEvent() –IE浏览器取消监听
注意:移除事件监听的参数和添加事件监听的参数是一致的。
实现兼容:
if(elem.addEventListener){
elem.addEventListener(“事件名//不要加on”,函数对象//方法名不要加())

specs:参数,有width height top left等。

}else{
elem.attachEvent(“on事件名”,函数对象);
}
DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

close:自己打开的窗口才能关闭

DOM:3个阶段
1、捕获阶段,由外向内
捕获:记录所有要执行的事件处理函数
2、目标触发:优先触发目标元素上的事件处理函数
目标元素:实际发生事件的元素
3、由内向外,冒泡执行

(2)history对象

IE8:2个阶段,没有捕获

back()后退历史记录

改变事件触发的顺序
设置事件处理函数在捕获阶段就提前执行
如何设置:elem.addEventListener(“事件名//不要加on”,函数对象//方法名不要加(),”capture”);
capture:true:在捕获阶段提前执行
false:在冒泡阶段执行(默认)

forward()前进历史记录

只有DOM的addEventListener可以修改触发顺序
IE8的attachEvent没有第三个参数,不能修改事件触发顺序

go()跳转到某个历史记录

事件委托机制
利用冒泡机制,将子元素事件委托给父元素执行。
oUl.onclick=function(ev){
var ev=ev||window.event;
var element=ev.target;
if(element.nodeName==’LI’){
alert(element.innerHTML);
}
}*/

(3)location 对象

1、取消冒泡
DOM:e.stopPropagation()
IE8:e.cancelBubble=true;
if(event.stopPropagation){
event.stopPropagation(); //标准浏览器
}else{
event.cancaleBubble==true; //老ie
}

href获取当前的地址 如果设置值是跳转到 设置地址reload()刷新(重新加载)

 

8、document对象

2、html dom对象
1、Image对象
创建img元素:var img = new Image();
属性:width、height、src
强调:不是所有元素都可以new!只有个别可以

1.方法

2、select对象:代表一个select
属性:options:获取select下所有的option子元素的*集合*!
下标访问,length属性,遍历
selectedIndex:获取当前选中项的下标
方法:add(option):将option添加到select下
相当于:appendChild(option)
remove(i):删除i位置的option
相当于:removeChild(子元素);
时间:onchange:当前选中项发生改变的时候触发

getElementById()返回对拥有指定id的第一个对象的引用

3、option对象:代表select下面的一个option元素
创建:var opt = new Option(innerHTML,value);
相当于:
1、var opt = document.createElement(“option”);
2、opt.innerHTML=””;
3、opt.value=value;

getElementsByName()返回带有指定名称的对象的集合

属性:index:获取当前option的下标
text:获取当前option的文本
value:获取当前option的value
selected:获取当前option被选中了吗

getElementsByTagName()返回带有指定标签名的对象的集合

银河国际平台官方网站,简写:创建option后,立刻追加到select中
select.add(new Option(text,value))

getElementsByClassName()返回带有指定class名的对象的集合

4、table对象:代表html的table元素
属性:rows 获取所有行
方法:
insertRow(i) 在指定位置插入一个tableRow对象
deleteRow(i) 在指定位置删除一个tableRow对象

querySelector返回指定css选择器对象的第一个

5、tableRow:代表html表格行
属性:
cells 获得所有的格(td)
innerHTML 获取当前行的所有的内容
rowIndex 获取当前tr在整个表格中的下标
方法:
insertCell(i) 在指定位置插入一个tableCell对象
deleteCell(i) 在指定位置删除一个tableCell对象

querySelectorAll()返回指定css选择器对象的集合

6、tableCell对象
属性:cellIndex
innerHTML
colSpan
rowSpan

2.visibility属性

7、form对象:代表一个form元素
获得form元素:document.forms[i/”id”/”name”];
方法:reset() 重置哪个form表单
submit(); 手动提交
事件:onsubmit:当正式提交表单之前,自动触发,专门用来在表单提交前,实现验证

visible表示元素是可见的

查找表单里面的元素:form.elements[i/”id”/”name”];
可简写:form.id/name
只能找到带name属性的额数据采集元素(input)或按钮
elem.focus();//让指定元素获得焦点

hidden表示元素是不可见的

1、★★★★★★★★BOM:Browser Object Model 专门操作用浏览器窗口的API —
没有标准

语法:object.style.visibility=”值”

window对象:扮演2个角色
1、它代替了ES里面的Global,充当全局作用域
包含所有的全局对象,方法以及变量
2、指代当前打开的浏览器窗口

3.display属性

1、location对象
window.location.href= “” ; 跳转后有后退功能
   window.location.replace(“”) ;
跳转后没有后退功能
window.location.search 从问号 (?) 开始的 URL(查询部分)
window.location.reload(true)方法 刷新页面,如果参数为true,通过缓存刷新。

none

2、window.open(“url”,”_self”);跳转后有后退功能
window.open(“url”,”_blank”);可以打开多个页面
window.open(“url”,”name”,”config”)
config是配置窗口初始化大小和位置的配置*字符串*
window.open(”)
其中width和height相当于innerHeight innerWidth

block

3、window.close() – 关闭当前窗口

inline-block

   window.moveTo(left,top) – 移动当前窗口

语法:object.style.display=”值”

   window.resizeTo(newwidth,newheight) – 调整当前窗口的尺寸

9、DOM编程

4、history对象
history.back() 等同于按浏览器的后退按钮
history.forward() 等同于按浏览器的前进按钮
history.length 属性 — history对象中缓存了多少个URL
history.go(-2)或 history.go(“任意.html”) 向前或向后移动,
5、navigator对象
navigator.userAgent
用户代理信息,通过该属性可以获取浏览器及操作系统信息
6、screen对象:保存屏幕的分辨率信息
screen.width screen.height完整屏幕宽高
screen.availWidth screen.availHeight 去掉任务栏的剩余宽高

(1)查看/修改属性节点

BOM的常用事件
onload事件:页面内容加载完成(DOM结构,图片…..)
onscroll事件:拖动浏览器的滚动条触发此事件。
onresize事件:浏览器窗口缩放所触发的事件。

getAttribute(“属性名”)

可视区的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
offsetleft 元素相对于父级的距离
offsettop
offsetwidth 元素宽度
offsetheight

setAttribute(“属性名”,”属性值”)

滚动条距离(某些浏览器下面做兼容)
document.documentElement.scrollTop || document.body.scrollTop

(2)节点关系

2、定时器
timer=setInterval(任务function(){},间隔毫秒数) 创建定时器
timer获得定时器的序号,唯一表示内存中的一个定时器
强调timer通常不是局部变量
clearInterval(定时器序号=timer); 暂停定时器
timer=null; 定时器清除

parentNode父亲节点

timer=setTimeout(任务,等待时间)
clearTimeout(定时器序号=timer);
timer=null

firstChild第一个子节点

}else{
e.cancelBubble=true;//老IE包含了主流浏览器
}

lastChild最后一个子节点

阻止浏览器的默认行为
ev.preventDefault();
标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false; 非标准浏览器(IE8)阻止默认事件
return false; 退出执行, 所有触发事件和动作都不会被执行. 可以用来替代
preventDefault

priviousSibling上一个兄弟节点

COOKIE的概念

Cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件,它可以包含相关用户的信息。

nextSibling下一个兄弟节点

cookie的特点
 禁用Cookie后,无法正常登陆。

cookie是与浏览器相关的,不同浏览器之间所保存的cookie也是不能互相访问的;
 cookie可能被删除。因为每个cookie都是硬盘上的一个文件;
 cookie安全性不够高。

(3)创建和增加节点的方法

数组、对象cookie的存储和访问。
1、JSON.parse 函数
作用:将 JavaScript 对象表示法 (JSON)
字符串转换为对象,具有json格式检测功能。
2、JSON.stringify()函数
作用:将 JavaScript 值转换为 JavaScript 对象表示法 (JSON) 字符串

createElement():创建节点

1、★★★★★★★★ES6

appendChild():末尾追加方式插入节点

this的应用及指向问题
this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是调用函数的那个对象。
this的使用情况:
1、作为普通函数调用,这时函数属于全局性调用,因此this就代表全局对象window。
2、作为对象方法的调用,这时this就指这个当前对象。(事件处理函数同理)
3、作为构造函数调用,所谓构造函数,就是通过这个函数生成一个新对象(实例)。这时,this就指这个新对象(实例)。
4、apply 、 call 、bind的介绍(函数的方法)
apply 、 call 、bind
三者都是用来改变函数的this对象的指向的;第一个参数都是this要指向的对象,也就是想指定的上下文;
从第二个参数开始,就是函数的本身的参数;
但bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
5、应用总结
我们都知道定时器的匿名函数里不能写this,它会指向window,但有了bind方法以后,我们可以随意设定this
的指向。
利用变量赋值改变this执行(将正确的this存储下来)。

insertBefore():在指定节点前插入新节点


let和const命令
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。
不存在变量提升
let不允许在相同作用域内,重复声明同一个变量。
ES6允许块级作用域的任意嵌套,外层无法读取内层作用域的变量,反之可以
允许在块级作用域内声明函数,外部同样可以访问
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const声明的常量,也与let一样不可重复声明。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
核心:var 和 let const的区别
变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.
解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者
obj[key]等传统方式进行赋值
数组的解构赋值
对象的解构赋值
字符串的解构赋值。
函数参数的解构赋值(利用数组和对象解构传参赋值)

cloneNode(true):克隆节点

扩展运算符
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
rest运算符
rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一
个数组
字符串扩展
模板字符串
模板字符串(template
string)是增强版的字符串,用反引号(`)标识。它可以当作普通

(4)删除和替换节点

字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量(${})。
repeat(n)方法返回一个新字符串,表示将原字符串重复n次。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
=>函数
函数默认值
箭头函数有几个使用注意点。
1、函数体内this对象,就是定义时所在的对象,而不是使用时所在的对象。This不会改变了。
2、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3、不可以使用arguments对象,该对象在函数体内不存在。
4、箭头函数一定是匿名函数。
5、箭头函数应用总结:
箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如用在map、reduce、filter的回调函数定义中;
不要在最外层定义箭头函数,因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数,
将this控制在可见的范围内;
箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下,箭头函数的简洁性并没有很大的提升,
反而影响了函数的作用范围的识别度,这种情况不建议使用箭头函数。
Symbol类型
symbol–表示独一无二的值,它是js中的第七种数据类型。
基本数据类型:null undefined number boolean string symbol
引用数据类型:object
Symbol():首字母大写。
symbol 函数前不能使用new,否则会报错,原因在于symbol是一个原始类型的
值,不是对象。
1、symbol函数接收一个字符串作为参数,表示对symbol的描述,主要是为了
在控制台显示,或者转为字符串的时候,比较容易区分。描述的内容相同仅仅表示
的是描述,不代表其他的意义。
2、symbol数据类型转换。
symbol可以利用String()、toString()转换成字符串
利用Boolean()或者!转换成布尔值(只有true值)
不能转换成数字。
不能使用任何运算符进行运算。
3、作为对象的属性名。
4、注意事项
不能直接使用[symbol()]作为键值,最好添加对应的参数进行区分,而且也不能被
for…in遍历出来。但可以通过
Object.getOwnPropertySymbols(obj)方法获 取一个对象所有的symbol属性。
Set(array)和Map(object)结构
ES6提供了数据结构set.
它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set 本身是一个构造函数,用来生成 Set 数据结构,数组作为参数。
每一项即是键也是值,键和值是相同的。
1、创建一个Set;
2、Set类的属性–size
3、Set类的方法
Set.add(value) 添加一个数据,返回Set结构本身,允许进行链式操作。
Set.delete(value) 删除指定数据,返回一个布尔值,表示删除是否成功。
Set.has(value) 判断该值是否为Set的成员,返回一个布尔值。
Set.clear() 清除所有的数据,没有返回值。
forEach():使用回调函数遍历每个成员
数据结构–map
JavaScript 的对象(Object),只能用字符串当作键。这给它的使用带来了很大
的限制。ES6 提供了 Map 数据结构。
它类似于对象,但是“键”的范围不限于
字符串,各种类型的值(包括对象)都可以当作键。Symbol类型当作key输出时
无法确认是同一个key.
1、创建一个map
2、map类的属性–size
3、map类的方法
map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构,如
果key已经有值,则键值会被更新,否则就生成该键,可以链式操作。
map.get(key) get方法读取key对应的键值,如果找不到key,返回undefined
map.delete(key) 删除某个键,返回true.如果删除失败,返回false.
map.has(key) 方法返回一个布尔值,表示某个键是否在当前map对象之中。
map.clear() 清除所有数据,没有返回值
map.keys() 返回键名的遍历器
map.values() 返回键名/键值的遍历器
map.entries() 返回键值对的遍历器
map.forEach() 使用回调函数遍历每个成员。
Generators生成器函数和iterator接口
1、Generators生成器函数
Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数是一个状态机,封装了多个内部状态。
2、iterator接口
遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问
机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作
Iterator 的作用有三个:
一是为各种数据结构,提供一个统一的、简便的访问接口;
二是使得数据结构的成员能够按某种次序排列;
三是 ES6 创造了一种新的遍历命令for…of循环,Iterator
接口主要供for…of消费。
如何检测数据可以使用for…of【Symbol.iterator】
数组和对象的扩展
数组的扩展方法
1、Array.from()方法用于将对象转为真正的数组(类数组转数组)
2、Array.of()方法用于将一组值,转换为数组。
3、fill()方法使用给定值,填充一个数组。
对象的扩展方法
1、对象的简洁表示法
2、object.assign()用于对象的合并,将源对象的所有可枚举属性,复制到目标对象。

removeChild():删除节点

1、★★★★★★★★PHP: Hypertext Preprocessor

replaceChild(新的,被替换的):替换节点

中文名:“超文本预处理器”
是一种免费开源的服务器端脚本程序。主要适用于Web开发领域。
PHP
是一种非常弱的类型语言。在大多数编程语言中,变量只能保存一种类型的数据,
而且这个类型必须在使用变量之前声明。而在 PHP
中,变量的类型是由赋值给变量的值确定的。

(5)表格操作

变量的八大数据类型
四种标量类型:
boolean (布尔型)
integer (整型)
float (浮点型, 也称作 double)
string (字符串)
两种复合类型:
array (数组)
object (对象)
最后是两种特殊类型:
resource (资源):资源是由专门的函数来建立和使用的,例如打开文件、数据连接、图形画布。
NULL (NULL)

插入行:table.insertRow(num);

数据类型的获取和设置:gettype( ) settype( )
php的输出:echo、print、print_r、var_dump
函数(变量的作用域)
php 表单 (get post request)
php 数组
创建数据的两种方式
array创建
range():建立一个包含指定范围单元的数组
数组的相关方法介绍
count()和 sizeof()(别名) 统计数组下标的个数,数组的长度
array_count_values() 统计数组中所有的值出现的次数
array_unshift() 函数将新元素添加到数组头
array_push() 函数将每个新元素添加到数组的末尾。
array_shift()删除数组头第一个元素,与其相反的函数是
array_pop(),删除并返回数组末尾的一个元素。
sort() 数组排序
foreach() 提供了遍历数组的简单方式,仅能够应用于数组和对象
array_unique() 移除数组中重复的值(生成新数组)
数组的遍历
for循环
foreach循环
返回JSON格式数据
json_encode() 对变量进行JSON编码
json_decode() 对JSON格式的字符串进行解码

插入列:row.insertCell(num);

1、★★★★★★★★数据库 MYsql

删除列:table.deleteRow(num);

MySQL操作
显示当前存在的数据库
SHOW DATABASES;
选择你所需要的数据库
USE guest;
查看当前所选择的数据库
SELECT DATABASE();
查看有多少张表
SHOW TABLES
查看一张表的所有内容
SELECT * FROM guest;
创建一个数据库
CREATE DATABASE book;
在数据库里创建一张表
create table numberone(
sid tinyint(2) unsigned not null auto_increment primary key,
url varchar(200) not null,
title varchar(100) not null
)DEFAULT CHARSET=utf8;//设置字符编码为utf8;
显示表的结构
DESCIRBE users;
给表插入一条数据
INSERT INTO users () VALUES ();
筛选指定的数据
SELECT * FROM users WHERE 条件;//users:表名
修改指定的数据
UPDATE users SET sex = ‘男’ WHERE username=’Lee’;
删除指定的数据
DELETE FROM users WHERE username=’Lee’;
删除指定的表
DROP TABLE users;
删除指定的数据库
DROP DATABASE book;
MySQL 常用数据类型
整数型:TINYINT,SMALLINT,INT,BIGINT(带符号和无符号)
TINYINT : 1个字节 -128 — 127(0-255)
INT : 4 个字节 -2147483648 — 2147483647(0 -4294967295)
浮点型:FLOAT,DOUBLE
FLOAT:占4个字节。
字符型:CHAR,VARCHAR
CHAR:定长类型,一般用于性别、密码等。
VARCHAR:可变类型,自身长度+1,一般用于用户名、标题等。
日期型:DATETIME,DATE( NOW():当前事件 )
DATETIME ‘0000-00-00 00:00:00’ 日期时间
DATE ‘0000-00-00’ 日期
备注型:TINYTEXT,TEXT,LONGTEXT
TINYTEXT 字符串,最大长度255个字符
TEXT 字符串,最大长度65535个字符
LONGTEXT 字符串,最大长度4294967295个字符

html里面有9种类型的节点

1、★★★★★★★★AJAX
异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

元素节点节点类型 nodeType ==1

创建ajax对象
var request = new XMLHttpRequest();
var request = new ActiveXObject(“Microsoft.XMLHTTP”)
ajax的open方法
request.open(“get”, “”, true);
1.open的第一个参数:GET/POST请求数据–默认GET方法
GET:把数据名称和数据值用=连接,如果多个的话,那么会把多个数据用&连接,然后把数据放到url?后面传给指定的页面。
POST:直接传送数值,但需要申明发送的数据类型
ajax.setRequestHeader(‘content-type’ ,
‘application/x-www-form-urlencoded’)
数据放在send()里面作为参数传递。
post/get的区别: 安全性,长度受限
2.open的第二个参数:接口地址
3.open的第三个参数:是否异步
当该值为true时,服务器请求是异步进行的,也就是脚本执行send方法后不等待服务器的
执行结果,而是继续执行脚本代码;
若该值为false,则服务器请求是同步进行的,也就是脚
本执行send方法后等待服务器的执行结果的返回,除非超时。
ajax的send方法
request.send( )
readyState:就绪状态–0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)
0:请求初始化(还没有调用 open())。
1:请求已经建立,但是还没有发送(还没有调用 send())。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用,但是服务器还没有完成响应的生成。
4:响应已完成;您可以获取并使用服务器的响应了。
设置回调函数
request.onreadystatechange = function(){
if(request.readyState == 4) {
}
}
onreadystatechange当状态值(readyState)发生改变的事件
ajax.readyState==4 代表ajax的工作状态,共5个值
ajax.status==200 服务器状态(http状态码);
操作内容:
responseText:
ajax请求返回的内容就被存放到这个属性下面,返回获取的内容,string
responseXML返回xml文件

文本节点节点类型 nodeType ==3

.ajax的优势和弊端。
//1、最大的一点是页面无刷新(定时器异步不断请求),在页面内与服务器通信,给用户的体验非常好。
//2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
//3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
//4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

获取/设置元素的类名:

//弊端
//1、ajax干掉了back按钮,即对浏览器后退机制的破坏。
//2、安全问题
//3、对搜索引擎的支持比较弱。
//4、破坏了程序的异常机制。
//5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。例如,有一个url地址,如果采用了ajax技术,也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
//6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,如手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的。

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