js小知识点
整理
js小知识点
(一)：获取元素
<script type="text/javascript">
1:document.getElementById('id名');
2:document.getElementsByTagName('获取一组标签');
3:document.getElementsByClassName('按class名获取');
4:getByClass
5:document.getElementsByName('按name名获取');
</script >
(二):变量
1:var name = value;(变量名不可以是数字,不可以使用系统保留名,不可以使用特殊符号);
2:var _this = this;
var $this = this;除外.
(三):函数
1:匿名函数--function(){}
2:命名函数--function show(){} 注:当找不到赋值对象时默认的都是window
(四):流程控制语句几种形式
1:
if(条件){
执行的语句
}else{
执行的语句
}
2:
if(条件){
执行的语句
}else if(条件){
执行的语句
}
3:
if(条件){
执行的语句
}else if(条件){
执行的语句
}else{
执行的语句
}
4:
if(条件){
执行的语句
}
5:三目
条件?语句1:语句2;
6:并且
条件 && 语句1;
7:
if(条件)
8:switch判断
switch(值){
case :
语句
break;
case :
语句
break;
case :
语句
break;
default:
break;
}
(五):循环
1:
for(初始值,条件,自增){
语句
}
2:
for(var name in json){
语句
}
3:
while(条件){
要重复做的事情
改变条件
}
(六):表单元素和非表单元素的区别
表单元素的值:用value 获取；
非表单元素的内容:用 innerHTML 获取
(七):数据的基本类型
使用 typeof(要测试的数据); 来测试数据类型
1:基本数字类型
number 数字类型 string 字符串类型 boolean（布尔类型 返回 true false） undefin 未定义
2:复合数据类型
object 对象类型
3:function -- 是一个特殊的,既可以是基本类型,也可以是复合型,但会划分到复合类型里.
类型的前缀：
类型 前缀 类型 实例
对象 o Object oDiv1
数组 a Array aItems
字符串 s String sUserName
整数 i Integer iItemCount
布尔值 b Boolean bIsComplete
浮点数 f Float fPrice
函数 fn Function fnHandler
正则表达式 re RegExp reEmailCheck
变体变量 v Variant vAnything
(八):数据类型的转换(显示型转换或者强制类型转换)
1:parseInt() 转整数 2:parseFloat() 转浮点数 3:Number 转数字
4:NaN 属于数字类型,是一个数字类型,NaN和谁都不想等包括自己.(判断非数字时使用:isNaN());
(九)几种运算符的分类 （运算符：优先级控制要使用小括号 -->())
1:算术运算符：+ - / %
2:赋值运算：= += -= /= = %=
3:比较运算：== < <= > >= != 不等 === 严格的比较，是不是相等，先比较类型 !== 严格的比较，是不是不相等
4:逻辑运算：与 或 非 || 表示或 只要一个成立，则为真 &&表示并且 全部成立,则为真 !叹号表示取反
(十):什么是真和假
1:真 true 非空字符串 非零数字 非空对象
2:假 false 空字符串 数字0 null undefined
（2==true ->false 在计算机里是二进制去运行流程,所以当是二的时候为假).
(十一):关于作用域
1:全局 是指在所有的函数以外的变量
2:局部变量 函数内部的变量(window.onload 下的变量是局部变量)
3:闭包 子函数可以使用父函数的变量(在函数上套一层).
(十二):关于js的括号和分号应该什么时候添加?
1:括号 在定时器里不能使用括号 例如{ setInterval(fn,time);
在事件函数里不能使用括号 例如{ oBtn.onclick = fn;}
2:分号 赋值语句要使用分号 执行语句结束后要使用分号
(十三):随机数:Math.random
随机数的封装:function rnd(n,m){
return Math.floor(Math.random()(n-m)+m);
}
(十四):返回值: 函数返回值:return 返回值是指返回给调用者,谁调用就返回给谁.能返回什么,只要你愿意什么都可以返回
(十五):eval 是把字符串变成可执行的语句 注:具有注入式攻击
(十六):数组的操作
1）增加 arr.push(数)指放到后面 arr.unshift(数)指放到前面
2）删除 arr.pop()指删除后面 arr.shift()指删除前面
- 删除第几个: arr.splice(开始位置，删除几个[，元素1，元素2])
- 转字符串 arr.join(连接的东西)
- 拼接数组 arr. concat(数组的链接)
- 数组排序 arr.sort()
- 反转数组 arr.reverse()
(十七):字符串的操作
1:查找字符串的位置 str.indexOf('字符串') 指找某个东西在字符串中出现的位置,区分大小写.
2:查找字符串的位置 str.lastIndexOf(小字符串) 从右往左看，确定一个位置后就不再找,区分大小写.
3:字符串截取 str.substring(开始位置,结束位置);
4:切分字符串 str.split(切的方式) 切分的结果：数组
5:大小写转换 str.toUpperCase() 把整个字符串转成大写
6:大小写转换 str.toLowerCase() 把整个字符串转成小写
7:charAt()
(十八):Math对象
1:Math.random() 随机数
2:Math.abs()
3:Math.max()
4:Math.min()
5:Math.pow()
6:Math.sqrt()
7:Math.ceil()
8:Math.floor()
9:Math.round()
(十九):Date对象:
var oDate = new Date(); 时间
1:小时：getHours();
2:分钟：getMinutes();
3:秒： getSeconds();
4:年： getFullYear()
5:月： getMonth()+1 -- 从0月开始
6:日： getDate()
7:星期：getDay() --- 星期日是 0
8:毫秒: getMilliseconds();
9:时间戳 getTime()
10:setFullYear(年,月,日);
11:setHours(时,分,秒,毫秒);
12:setFullYear(年,月-1);
13:setFullYear(年);
定时器：
*原则：定时器要先清除，再打开
另一个定时器setTimeout
setInterval 一直执行，连续不断的
setTimeout 只执行一次
setTimeout(函数名，时间)
清除：clearTimerout();
(二十):i的问题
1:使用封闭空间()(i):1）解决了变量冲突的问题 2）i值的问题 3)循环里面加事件，事件里的i不能用
2:自定义属性
(二十一):数组:1:arr = []; 2:json = {};
(二十二):DOM的操作:
1:获取元素--obj.tagName();
2:父级获取子级 children;
3:父级元素的子结点数组 childNodes;
4:首节点：1) oParent.firstChild 2)oParent.children[0];
兼容写法: var oFirst = oParent.fristElementChild || oParent.firstChild;
5:尾节点 1)oParent.lastChild 2)oParent.children[oParent.children.length -1];
兼容写法: var oLast = oParent.lastElementChild || oParent.lastChild;
6:兄弟节点：
上一个兄弟节点：var oPrev = obj.previousElementSibling || obj.previousSibling
下一个兄弟节点：var oNext = obj.nextElementSibling || obj.nextSibling
7:创建元素： document.createElement('标签名');动态创建的元素和原来就存在的元素，没有任何区别
8:添加元素：document.body.appendChild(obj);
9:父.appendChild(obj); 表示:添加到父元素的最后面
10:添加前面：父.insertBefore(obj,谁的前面);
11:删除元素: 父.removeChild(obj);
(二十三):获取位置
a:获取可视区宽高
1:可视区高度:（写法）document.documentElement.clientHeight
2:可视区的宽度：（写法）document.documentElement.clientWidth
b:获取盒模型宽高
1:盒模型高度：offsetHeight
2:盒模型宽度：offsetWidth
c:定位父级距离
1:左：obj.offsetLeft
2:上：obj.offstTop
d:绝对位置:getPost
1:getBoundingClientRect().left
2:getBoundingClientRect().top
3:getBoundingClientRect().right
4:getBoundingClientRect().bottom
(二十四):属性操作：
getAttribute(属性名) 获取自定义属性
setAttribute(属性名，值) 设置自定义属性
removeAttribute(属性名) 删除属性
(二十五):事件
1:onclick 点击事件
2:onmouseover 鼠标移入
3:onmouseout 鼠标移出
4:onmousedown 鼠标按下
5:onmousemove 鼠标移动
6:onmouseup 鼠标抬起
7:onmouseenter 鼠标指针移入对象内时触发
8:onmouseleave 鼠标指针移出
9:onmousewheel 鼠标滚轮事件
10:DOMMouseScroll 兼容火狐的滚轮事件写法
11:oncontextmenu 鼠标右键菜单事件
12:ondblclick 鼠标双击事件
13:onchange 域的内容发生改变
14:oninput
15:onblur 失去焦点
16:obj.focus();强制设置焦点：
17:onfocus 获取焦点
18:obj.blur();强制失去焦点:
19:onkeydown 键盘按下时
20:onkeyup 键盘抬起
21:onload 载入网页
22:onerror
23:onresize 窗口缩小
24:onscroll 鼠轮滚动执行
滚动条：
高： document.documentElement.scrollTop || document.body.scrollTop
宽：document.documentElement.scrollLeft || document.body.scrollLeft
(二十六)事件对象:ev
var ｏＥvent = ev || Event;
(二十七)事件流:
obj.addEventListener('click',fn,false);
false 事件冒泡
true 事件捕获（事件下沉）
只存在高版本浏览器上:obj.attachEvent('onclick',fn);
面试题:解释一下IE事件流和chrome事件流
1:IE 只存在事件冒泡
2:chrome 可以是事件冒泡可以是捕获（true false）
事件绑定:
1:obj.addEventListener(事件,函数,是否捕获);
事件：不能带 on
兼容性： chrome ff ie9+
2:obj.attachEvent(事件,函数);
事件：必须带on
兼容性：ie 系列
3:处理兼容性：
if(obj.addEventListener){
obj.addEventListener(事件,函数,是否捕获);
}
else{
obj.attachEvent(事件,函数);
事件解绑：
obj.addEventListener(sEv,fn,false);
removeEventListener(sEv,fn,false)
obj.attachEvent(事件,函数);
obj.detachEvent(事件，函数);
DOMReady();
1:window.onload所有资源加载完才会加载JS
html css img video audio flash.. js
2:DOMReady
html css js
(二十八)cookie:
特性: 1:在服务器环境下，跟随服务器发送
2:大小只有4K大
3:默认会话结束（指关闭浏览器时会话结束）
4:name=value 成对出现
5:name不能重复,否则会覆盖
</script>
