一、JavaScript组成
1.ECMAScript 解释器、翻译(提供功能有限,如加减乘除,定义变量、函数等) 几乎没有兼容性问题
2.DOM 有一些兼容性问题
3.BOM(用的少,交互体验太差) 几乎不兼容(除了少数几个比较兼容)
二、变量类型
number、string、boolean、undefined、object、function
1.undefined出现的情况:①没定义②定义了没给值
2.什么是object(对象)
基本类型:number(NaN)、string、boolean、undefined(不可再分)
复合类型:object(obj、[]数组、{}Jason、null)、function
对象就是由基本类型组成的
3.一个变量只存放一种类型的数据
三、数据类型转换
1.显示类型转换(强制类型转换)
parseInt() //与其说把字符串转成数字,更准确的说是从字符串中提取数字,从左到右把数字提取出来,只要一碰到不是数字的就结束,如12dfe34,取出来就是12,如果是字符串,如dty,
取出来是NaN(Not A Number),所以即使sdt568,取出来还是NaN
parseInt(元素,进制)默认情况下按10进制来转
parseFloat() //把字符串转成小数,用parseInt()提取小数的结果是整数部分
注:NaN除了与其他数值比较的结果总不相等外,与自己比也是一样,即两个NaN不等。检测NaN的函数:isNaN()
isNaN():判断是不是数字
alert(isNaN(2)) //false
alert(isNaN("我爱你")) //true
alert(isNaN(function(){alert(1)})) //true
alert(isNaN("2")) //false
isNaN内部是根据Number()来进行转换,转换后才进行判断,只要判断出来的东西是数字,他就输出false
isNaN讨厌的是数字,但不讨厌数字类型,他碰到NaN输出的是true
isNaN小应用:
判断输入框里输的是不是数字(因为从html中拿到的内容,类型都是字符串,用typeof判断全是字符串类型,而isNaN其实悄悄进行了一次类型转换)
2.隐式类型转换
①==
先把两边的东西转成一样的类型,再比较
如var a='12';var b=12;alert(a==b);弹出的就是true
②===
不转换,直接比较
③-
如var a='12';var b='5';alert(a-b); 字符串做减法,会把a和b先转换成数字再相减,相应的乘法除法取模也会转,只有加法不会转
④++ --
var s="10";
s++;
alert(s) //11
⑤> <
alert("10">9) //true 数字间的比较
alert("10">"9") //false 字符串间的比较,拉出来比,1先和9比再0和9比,但是只要前面的比9小了,后面的就不用比了
⑥!
alert(!"abc") //false 把右边的数据类型转换为布尔值
四、变量作用域和闭包
1.局部变量
2.全局变量
3.闭包(变量作用域的一种形式)
简单理解为子函数可以使用父函数的局部变量
五、Json
专门为Js诞生的一种数据格式
如
var obj={a:5,b:6,c:'sss'};
alert(obj.a);
Json可以和数组混着来,即既可以把Json放在数组里,也可以把数组放在Json里
Json和数组的区别:
var obj={a:14,b:5,c:8};
var arr=[14,5,8];
alert(obj['a']);
alert(arr[0]);
Json以字符串作为下标,数组以数字作为下标
Json遍历
var json1={'name':'zwk','age':'24','sex':'male'};
for(var attr in json1){ //不能用for循环,因为jason没有length
alert(attr); //name age sex
alert(json1[attr]); //zwk 24 male 注意这里不要加引号,否则会undefined,加了引号等于去访问json里面有没有'attr'这个属性的词,显然这里只有name age sex,不加引号就是遍 历,加了引号就是找单独的子集
}
六、函数返回值(函数的执行结果,可以没有return,返回的就是undefined)
一个函数只返回一种类型的值
七、函数传参
可变参(不定参):arguments
参数个数可变,参数数组
例子:不知道几个参数的求和
function sum(a,b,c,...){
alert(a+b+c+...);
}
sum(15,8,9,...)
function sum(){
var x=0;
var i;
for(i=0;i<arguments.length;i++){
x+=arguments[i];
}
alert(x);
}
sum(15,8,9,...)
八、数组基础
1.数组的定义
var arr=[1,8,9]; var arr=new Array(1,8,9);
两种方法没差别,[]性能略高,因为代码短
2.数组的属性
length 可以被赋值 如arr.length=0 数组即被清空
数组中最好只存一种类型的变量,要存多种建议用Json
3.数组排序
sort()
直接用sort()对数字数组排序,会错误,需要一个比较函数
arr.sort(function(num1,num2){
return num1-num2;
});
九、文档碎片
文档碎片可以提高DOM操作性能,但是是理论上的说法,实际效果并不如意
十、封装获取的样式
function getStyle(obj,attr){
if(obj.currentStyle){ //currentStyle获取计算后的样式,或者说最终样式,currentStyle的出现是因为style只能获取行间样式
return obj.currentStyle[attr]; //IE下
}
else{
return getComputedStyle(obj,false)[attr]; //FF下,第二个参数false是废的,随便设什么,但是最好设一下,不然在低版本火狐下有bug
}
}
注:currentStyle不能取复合样式,只能取复合样式里的基本样式,如backgroundColor
扩展:css封装函数
function css(){ //有可能是两个参数,那就是获取样式,三个参数那就是设置样式
if(arguments.length==2){
return getStyle(arguments[0],arguments[1]); //不用arguments[0].style[arguments[1]],是因为style只能获取行间样式
}
else if(arguments.length==3){
arguments[0].style[arguments[1]]=arguments[2];
}
}
缺点:可读性差,提示:参数和arguments可共存
function css(obj,attr,value){
if(arguments.length==2){
return getStyle(obj,attr); //不用arguments[0].style[arguments[1]],是因为style只能获取行间样式
}
else if(arguments.length==3){
obj.style[attr]=value;
}
}