码迷,mamicode.com
首页 > Web开发 > 详细

js知识体系的梳理一

时间:2016-10-25 07:41:43      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:attribute   last   property   undefined   onscroll   val   turn   事件触发   跳过   

今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获;
js总结一
一、【获取元素】:

1、通过ID: var oBtn=document.getElementById(‘btn1‘);
var oDiv=document.getElementById(‘div1‘);

2、通过标签:var aDiv=document.getElementsByTagName(‘div‘);
操作一组元素就要用循环:
for(初始值;循环条件;自增自减条件){} 有长度的用for循环
初始值;while(循环条件){代码;自增自减条件;} 没有长度的用while循环;
for in循环:对象中使用:json arr arr中一般用上边的for循环性能高;

3、通过class名: var aDiv=document.getElementsByClassName(‘div1‘);
有兼容性的问题:通过封装函数来解决:
getByClass(oBox,‘div1‘);
function getByClass(obj,sName){
var aObj=obj.getElementsByTagName(‘*‘);
var arr2=[];
for(var i=0;i<aObj.length;i++){
var str=aObj[i].className;
var arr=str.split(‘ ‘);
if(findInArr(sName,arr)){
arr2.push(aObj[i]);
};
}
return arr2;
}
注:通过Id是获取到一个元素,其他两个获取的都是一组元素,
id只能在document下获取,其他两个方法可以在父级下获取;
id和tagName全兼容,通过类名获取有兼容性问题
获取出来的一组与元素是类数组 可意识使用长度aDiv.length 和 下标aDiv[0] 不能使用数组的其他方法;

二、【事件】:

系统事件:onload\DOMContentLoaded\onreadystatechange\onscroll\onresize
鼠标事件:onclick\onmouseover\onmouseout\onmousedown\onmouseup\onmousemove\onmousewheel\DOMMouseScroll\ oncontextmenu\
键盘事件:onkeydown\onkeyup\
oninput\onpropertychange\

*****事件对象:存储事件发生的详细信息;声明 var oEvent=ev||event;

事件委托:给父级加事件,判断事件源,执行某项代码;可以给未来的元素加事件;

事件绑定:obj.addEventListener(‘不带on的事件名‘,fn,false);兼容高级浏览器
DOM事件必须绑定;且DOM事件只能在高级浏览器中兼容;
obj.attachEvent(‘带on的事件名‘,fn);兼容IE浏览器;
事件冒泡:从下往上一级一级传递的事件流,一般不阻止冒泡,有问题才阻止;
oEvent.cancelBubble=true;
事件下沉:与事件冒泡相反的事件流,从上往下一级一级传递;

常见的对象信息 oEvent.target||oEvent.srcElement;
oEvent.clientX;/oEvent.clientY;
oEvent.keyCode/oEvent.shiftKey/oEvent.altKey/oEvent.ctrlKey;
oEvent.wheelDelta/oEvent.detail

三、【函数】:

1、命名函数:function show(){} 出现 show();的时候执行;
2、匿名函数:functionz(){}; 加括号时执行,如封闭空间;
封闭空间:(function(index){})(i); 1)解决变量冲突;2)解决i的问题;3)不用单独起名字;
3、事件函数:obj.onclick=function(){}; 事件触发时执行;

注:函数的返回值:return 可写可不写,需要时写,见return直接跳出函数后面的代码不执行了;函数如果没有写返 回值;那返回的就是undefined;
函数的定义存在预解析:在if 和 for 循环中不能直接定义函数;

四、【流程控制】:

1、if(){}else if(){}else{}; 只有第一个if是必须的 后边的需要是用;
2、switch(条件){
case 条件一:
代码;
break;
case 条件二:
代码;
break;
default:
代码;
break;

};

五、【循环】:

1、for(初始值;循环条件;自增自减条件){} 有长度的用for循环; for循环中直接套for循环时注意变量不能一样
2、初始值;while(循环条件){代码;自增自减条件;} 没有长度的用while循环;
3、for in循环:对象中使用:json arr arr中一般用上边的for循环性能高;

注:循环中如果有事件 事件中的i有问题,用this或封闭空间来解决(i只要赋值时间与调用时间存在时间差就有问题)
break/continue:大多数都用在循环中,break 是直接跳出循环,continue 是跳过当次循环;
应用:选项卡 简易日历 九九乘法表

五、【操作属性和样式】:

./[] 点能操作的中括号都能操作,点后不能跟变量,中括号中可以加变量;操作的都是行间样式;

getAttribute(‘属性名‘)/setAttribute(‘属性名‘,‘属性值‘);

应用:懒加载

六、【变量】:
1、声明变量:var 变量名=‘变量值‘; 存在预解析的问题;定义被放到作用域的最前边;面试常考
严格模式下:变量的定义必须加var
2、非严格模式下:var a=b=c=8; 第一个变量是局部变量 后两个是全局变量;
3、变量使用时不加引号;字符串加引号;

七、【数据类型】:
1、 string 字符串 使用时加引号;字符串的拼接 ‘字符串‘+变量+‘字符串‘+变量;

字符串的方法:
str.charAt(下标):查找下标对应的字符串;
str.indexOf(‘字符串‘):从左往右查找字符串所对应的下标;找不到时返回-1;
str.lastIndexOf(‘字符串‘) 从右往左查找字符串所对应的下标;
str.split(‘切割方法‘):将字符串以括号中的方式切割成数组;
str.substring(开始的位置,结束的位置):截取从开始到结束位置的字符串;
str.toUpperCase(); 字符串中的字母全部转换成大写;
str.toLowerCase(); 字符串中的字母全部转换成小写;

字符串转数字:parseInt();转换成整数 数字后边可以跟字符串
parseFloat();转换成小数 数字后边可以跟字符串;
Number();严格转换 字符串中只用是数字;
转换失败返回NaN NaN代表的意思是不是一个字母,但它的数据类型是numberNaN不等于任何东西包括它自己
判断是不是NaN 用isNaN();

比较大小:
1) 两个都是数字时正常比较;
2) 一个数字一个数字类型的字符串;先隐式类型转换 再按数字大小进行比较
3) 两个都是数字类型的字符串则从左往右一个一个比较 例如 ‘2‘>‘12‘;
4) 两个都是完全的字符串,则从左往右一个一个比较 a<z;a<A;

应用:字符串首字母转大写 判断浏览器类型

2、number 数字

1)数字加数字是算数运算;数字加字符串 则是字符串拼接;+号没有隐式类型转换;
2)在运算符中除了+ = === 外其他大多数都存在隐士类型转换
3)常用的数学方法
Math.random()随机数
Math.abs() 绝对值
Math.sqrt() 开方
Math.pow(n,m) n的m次方
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
Math.max() 最大值
Math.min() 最小值
4)运算符:
算术运算符:+、-、*、/、%;
赋值运算符:=、+=、-=、*=、/=、%=;
比较运算符:==、>、>=、<、<=、===、!=、!==
逻辑运算符:&&、||、!
应用:计算器 随机数获取 瀑布流

3、Boolean 布尔值

true: 除了false都是真的;
false:false\0\‘‘\undefined\NaN\null;都是假的

4、object 对象

数组:
声明:var arr=[]/ var arr=new Arrey(); 数组中可以放任何数据类型;有序、有长度
数组项的添加、替换:arr[1]=‘blablabla‘;
数组的方法:
arr.push() 向后添加一项;
arr.unshift() 向前添加一项;
arr.pop() 从后边删除一项;
arr.shift() 从前边删除一项;
arr.splice(开始的位置,删除的个数,添加项);
arr.reverse() 翻转;
arr.join(‘拼接方式‘) 将数组中的每一项拼接成一个字符串;
arr.sort(function(n,m){return n-m}); 排序 里面参数和返回值顺序相同时是从小到达,反之是从大到小
arr.concat(arr1,arr2) 数组的拼接;

注:数组可以用for循环 也可以用for in 循环 一般情况下用for 循环 性能高;

应用:字符串翻转 排序 数据存储调用

json:
声明:var json={‘‘:‘‘,‘‘:‘‘,‘‘:‘‘};无序、无长度、取值用json.name;
json中添加项 json.name=‘val‘/json[‘name‘]=‘val‘;
替换项 上述同样的方法:用一样的键名
删除项 delete json.name/delete json[‘name‘];
json的循环只能用for in for(name in json){} name 表示键名;
应用:json 数组去重 json[arr[i]]=‘luanqibazao‘;
setStyle();
getPos();
数据存储与调用;交互eval(‘(‘+json+‘)‘);

js知识体系的梳理一

标签:attribute   last   property   undefined   onscroll   val   turn   事件触发   跳过   

原文地址:http://www.cnblogs.com/jasonwang2y60/p/5995268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!