一、JavaScript基础
1. JavaScript组成
ECMAScript 解释器、翻译 几乎完全兼容
DOM：Document Object Model文档对象模型 有兼容性问题
BOM：Browser Object Model 浏览器对象模型 几乎完全不兼容
2. 变量类型
typeof运算符
typeof x;
number string boolean undefined object function
数据类型转换：显式类型转换(强制类型转换) 隐式类型转换
parseInt() parseFloat()
3. 闭包
子函数可以使用父函数中的局部变量
4. 命名规范
匈牙利命名法 类型前缀 首字母大写
5. 函数返回值
函数可以没有return或者return;
一个函数应该只返回一种类型的值
6. 函数传参
arguments数组是函数的参数数组
7. 取非行间样式 兼容
if(obj.currentStyle){
console.log(obj.currentStyle[attr]);
}
else{
console.log(getComputedStyle(obj,false)[attr]);
}
8. 数组
添加
push(元素)从尾部添加 unshift(元素)从头部添加
删除
pop()从尾部弹出
shift()从头部弹出
排序
sort(比较函数) 返回值大于0会改变2数顺序
//从小到大
arr.sort(function(num1,num2){
return num1-num2;
})
转换
concat(数组2)连接2个数组
join(分隔符)将数组转换为字符串
split(分隔符)将字符串转换为数组
splice 插入 删除 替换
splice(开始位置，要删除的长度) 删除
splice(开始位置，0，要插入的元素…) 插入
splice(开始位置，要删除的长度，要插入的元素…) 替换
9. input文本框为只读不可编辑的方法
方法1：onfocus=this.blur() 当鼠标放上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>
方法2：readonly
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">
方法3：disabled 文字会变成灰色
<input type="text" name="input1" value="中国" disabled="true">
10. eval(string) 计算其中的字符串，并执行其中的js代码
11. input文本框中的内容从右到左
方法1：text-align:right
<input style="text-align:right" />
方法2：dir=”rtl”
<input type="text" dir="rtl" />
12. 截取字符串
string.slice(start,end)
string.substring(start,stop)
stringObject.substr(start [, length ])
13. 字符串的替换
var str = ‘abcadeacf‘;
var str1 = str.replace(‘a‘, ‘o‘);//只替换第一个
alert(str1);
// 打印结果： obcadeacf
var str2 = str.replace(/a/g, ‘o‘);//替换所有
alert(str2);
//打印结果： obcodeocf,
二、DOM
1. DOM节点
nodeType 节点类型 元素1 属性2 文本3
childNodes子节点 children是children的兼容版
parentNode 父节点
offsetParent 最近的显示指定位置的元素 position是absolute的offsetParent是最近的父的relative的元素
firstChild/firstElementChild 首子节点 有兼容性问题 火狐
lastChild/lastElementChild 尾子节点 有兼容性问题
nextSibling/nextElementSibling 兄弟节点
previousSibling/previousElementSibling 有兼容性问题
childNodes和nodeType结合 //火狐中空白地方也当作文本节点
if(nodex.childNodes[i].nodeTypw==1){…}
2. 元素属性操作
第一种：oDiv.style.display=’block’;
第二种：oDiv.style[‘display’]=’block’;
第三种：
getAttribute(名称)获取
setAttribute(名称，值)设置
removeAttribute(名称)删除
3. 用className获取元素
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName(‘*‘);
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
4. 创建和插入节点
var oLi=document.createElement(‘li‘);//创建
oLi.innerHTML=oTxt.value;
//父.appendChild(newNode);
oUl.appendChild(oLi);//插入
//父.insertBefore(newNode,某子节点)
oUl.insertBefore(oLi,aLi[0]);//在某节点前插入
如果原来没有子节点，不能insertBefore 可以判断一下有没有子节点
如果父元素没有子节点则appendChild()，否则insertBefore()
5. 文档碎片
理论上可以提高dom的性能，实际上并不能 只有面试可能会问
window.onload=function(){
var iStart=new Date().getTime();
var oBtn=document.getElementById(‘btn1‘);
var oUl=document.getElementById(‘ul1‘);
var oFrag=document.createDocumentFragment();
var i=0;
for(i=0;i<i<10000;i++){
var oLi=document.createElement(‘li‘);
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
console.log(new Date().getTime()-iStart);
}
三、BOM
1. 打开网页
window.open(‘http://www.baidu.com/‘,‘_blank‘);
第二个参数可选，_blank在一个新窗口打开，_self在当前窗口打开
window.open(‘about:blank‘);//空白页
window.open()返回值是新打开的页面
2. document.write(‘…’)
在网页上写…
如果是在文档加载完后执行，会清空页面
3. 关闭网页
window.close();
chrom可以直接关闭
ie提示是否关闭
火狐不允许关闭 只能要关闭open出来的网页
4. userAgent
alert(window.navigator.userAgent);
当前浏览器的版本
5. location
alert(window.location);//显示当前路径
window.location=‘http://www.baidu.com/‘;//打开这个网页
6. 尺寸及坐标
可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.body.scrollTop
document.documentElement.scrollTop
距可视区顶部的距离oEvent.clientY
7. 系统对话框
alert(‘…’);//警告框 只能确定
confirm(‘…’);//选择框 有确定和取消2个选项 返回用户的选项true/false
prompt(‘…’,’…’);//输入框 第一个参数是问题，第二个参数是默认值 返回输入的内容 没有内容返回null
8. window对象的常用事件
onload
onscroll//当页面滚动时
onresize
9. document的本质是最外面的一层标签
document.childNodes[0].tagName=html
10. 获取event对象
var oEvent=ev||event;//为了兼容性
11. 取消冒泡
oEvent.cancelBubble=true;
12. 键盘按键
onkeydown 按键按下
onkeyup 按键抬起
onpress=onkeydown+onkeyup
onclick=onmousedown+onmouseup
13. keycode 键值
document.onkeydown=function(ev){
var oEvent=ev||event;
alert(oEvent.keyCode);
}
14. 解决卡顿问题
设置定时器
上下左右设置为布尔变量
onkeydown设置某方向为true if或switch
onkeyup设置所有方向为false
15. ctrlKey shiftKey altKey
按着ctrl时 ctrlKey为true
16. 右键菜单
document.oncontextmenu=function()
{
}
当点击右键时，…
有返回值 return false;可以阻止弹出右键的菜单
17. 浏览器自带的行为都能用return false屏蔽
右键菜单
form提交
按键输入input
18. 拖拽
按下的点与div的左上角距离不变
onmousedown 存储距离
onmousemove 根据距离计算div最新的位置
onmouseup
四、
