写给自己的js知识点小结
2、获取元素
document.getElmentById('id'); 只能在document下获取
obj.getElementsByTagName();
obj.getElementsByClassName();
obj.children
var aLi=oUl.children //获取所有子级
3、判断/流程控制语句
A:
if(){}
if(){}else{}
if(){}else if(){}
if(){}else if(){}else{}
B:
switch(变量){
case '条件':
语句
break; //跳出
default: 默认
break;
}
C:
true&&语句；
4、循环
初始化 条件 语句 自增
while(){} 不确定次数的循环
for(){} 有固定次数的循环 性能高
for in ：
for( 变量 in 对象) {代码}；用于遍历数组或对象的属性
可以循环json和数组（arr），所以性能低
5、数据类型
检测数据类型：typeof
1）基本类型
string 字符串
number 数字 （ NaN属于number类型，非数字（只是一个标识）。特点：自己不等于自己 ）
alert(isNaN(oT.value)); //判断是不是NaN
boolean 布尔值
undefined 未定义
2）复合类型
object 对象（ Object本质上是由一组无序的名值对组成的，如object、array、data等 ）
alert(typeof null);//object 空对象也是对象
3）function 函数
附tips:数组的两种写法：
var arr=[1,2,3,4];
var Array(1,2,3,4);
6、显式数据类型转换/强制类型转换
为什么要转换
比如一些数字，可能被识别成字符串，转成数字方便使用
parseInt 整数（舍弃小数 和数字后面的非数字部分）
1 var a='aa12abc'; //NaN 非数字 2 var a='12abc'; 3 alert(parseInt(a));
1 <script> 2 window.onload=function (){ 3 var oTxt1=document.getElementById('txt1'); 4 var oTxt2=document.getElementById('txt2'); 5 var oBtn=document.getElementById('btn'); 6 7 oBtn.onclick=function (){ 8 var oT1=parseInt(oTxt1.value); 9 var oT2=parseInt(oTxt2.value); 10 11 alert(oT1+oT2); 12 }; 13 }; 14 </script> 15 </head> 16 17 <body> 18 <input id="txt1" type="text" /> 19 + 20 <input id="txt2" type="text" /> 21 = 22 <input id="btn" type="button" value="结果" /> 23 </body>
1 <script> 2 window.onload=function (){ 3 var oTxt1=document.getElementById('txt1'); 4 var oTxt2=document.getElementById('txt2'); 5 var oBtn=document.getElementById('btn'); 6 var oS=document.getElementById('s1'); 7 8 oBtn.onclick=function (){ 9 alert(oS.value); 10 11 var oT1=parseInt(oTxt1.value); 12 var oT2=parseInt(oTxt2.value); 13 14 alert(oT1+oT2); 15 }; 16 }; 17 </script> 18 </head> 19 20 <body> 21 <input id="txt1" type="text" /> 22 <select id="s1"> 23 <option>+</option> 24 <option>-</option> 25 <option>*</option> 26 <option>/</option> 27 </select> 28 <input id="txt2" type="text" /> 29 = 30 <input id="btn" type="button" value="结果" /> 31 </body>
parseFloat 整数、小数/浮点数
1 var a='12.13abc'; 2 alert(parseFloat(a)); //12.13
Number 纯数字
1 var a='123abc'; 2 alert(Number(a)); //NaN
7、隐式类型转换（ 无序人工转换，自动转换 ）
-减 *乘 /除 %模
1 var a='12'; 2 var b=5; 3 4 alert(a*b);
8、运算符
+ - * / %
+= -= *= /= %=
8.2比较运算符
< > <= >= != ==
=== !==
8.3逻辑运算符
! 非 取反
&& 与 并且
|| 或 或者
9、查找某个数 findArr(n)
1 <script> 2 var arr=[55,63,18,26,99,-100]; 3 4 function findArr(n){ 5 //查看所有数字 6 for(var i=0; i<arr.length; i++){ 7 //判断数组里面的某个数是否等于参数n 8 if(arr[i]==n){ 9 //找到了 返回true 10 return true; 11 //这里使用return有两个作用，一个是返回值（相当于alert），第二个是跳出当前的循环或方法，阻止后面的程序的运行。 12 } 13 } 14 //循环结束还没有，证明没找到 返回false 15 return false; 16 } 17 alert(findArr(88)); 18 </script>
10、随机数（封装）
1 function rnd(n,m){ 2 return parseInt(Math.random()*(m-n)+n); //固定的写法 3 } 4 5 alert(rnd(1,34));
11、真假的判断
真：true 非零数字都是真 非空字符串 非空对象
假：false 数字零 空字符 undefined null NaN
12、字符串操作和数组操作
13、时间对象
var oDate=new Date(); 日期对象
var y=oDate.getFullYear(); 年
var m=oDate.getMonth()+1; 月
var d=oDate.getDate(); 日
var day=oDate.getDay(); 星期
var H=oDate.getHours(); 时
var M=oDate.getMinutes(); 分
var S=oDate.getSeconds(); 秒
var MS=oDate.getMilliseconds() 毫秒
oDate.setFullYear
oDate.setHours
oDate.getTime 时间戳
14、Math对象
random
floor
ceil
round
abs
sqrt
pow
max
min
sin
cos
atan2
PI
15、DOM操作
获取子级 children
获取父级节点 parentNode
获取上一个兄弟节点 obj.previousElementSibling||obj.previousSibling
获取下一个兄弟节点 obj.nextElementSibling||obj.nextSibling
获取第一个子级
父级.children[0]
父级.firstElementChild||父级.firstChild
获取最后一个子级
父级.children[父级.children.length-1]
父级.lastElementChild||父级.lastChild
创建
document.createElement();
插入 （创建完了不会显示，需要插入之后才有显示）
父级.appendChild();
父级.insertBefore(obj,obj2);
删除
父级.removeChild();
DOM练习：简易留言板
16、DOM——获取元素信息
obj.offsetLeft/Top 定位父级的距离
obj.offsetWidth/Height 盒子模型大小
offsetParent 获取定位父级
obj.getBoundingClientRect().left/top/right/bottom 绝对距离（自带的，性能高）
绝对距离的数值在IE7下面会多出2像素，如果不想多出2像素，可以使用下面的兼容写法（自己封装的，性能低）
<style> *{ margin:0;padding: 0; } #div1{ width:500px; height:500px; background:red; position:absolute; margin:100px; } #div2{ width:300px; height:300px; background:yellow; position:absolute; margin:100px; } #div3{ width:100px; height:100px; background:green; position:absolute; margin:100px; } </style> <script> function getPos(obj){ var l=0; var t=0; while(obj){ // 不知道有多少个父级（不固定次数）用while循环 l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; //一直是自己的父级 } return {left:l,top:t}; } window.onload=function (){ var oDiv=document.getElementById('div3'); alert(getPos(oDiv).left); }; </script> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div>
附：获取非行间样式
高版本浏览器 getComputedStyle(obj,false)[sName]; sName就是style name
false是兼容低版本（3.x）火狐用的，也可以不写
IE8兼容写法： obj.currentStyle[sName];
17、事件
onload 加载
window.onload 页面加载完成
obj.onclick 点击
obj.onmouseover 鼠标移入
obj.onmouseout 鼠标移出
obj.onmousedown 鼠标按下
obj.onmousemove 鼠标移动
obj.onmouseup 鼠标抬起
obj.onfocus 获得焦点
obj.onblur 失去焦点
ondblclick 双击
onchange 改变
oninput 输入
onkeydown 键盘按下
onkeyup 键盘抬起
oncontextmenu 鼠标右键
onmousewheel 鼠标滚轮（苹果电脑没有）
1、事件对象
function （ev）{
ev.clientX 鼠标x轴距离
ev.clientY 鼠标Y轴距离
}
滚动距离
低版本浏览器
高版本浏览器
兼容写法
IE9一下不兼容：pageX pageY 自带的滚动距离
获取可视区宽高：document.documentElement.clientWidth/Height
例子：div拖拽
事件绑定
obj.addEventListener('click',fn,false);
obj.removeEventListener('click',fn,false);解除绑定
事件冒泡
cancelBubble=true;阻止冒泡
事件委托
加给父级
事件源ev.srcElement
省性能
给未来元素加事件
运动
var start=0;
var iTarget
穿墙
