JavaScript 学习总结
第一章 认识JavaScript
1，JavaScript是什么
JavaScript是一种可以用来给网页增加交互性的编程语言。
脚本语言(Scripting language)
标签
包含在HTML页面内部（通常放在
部分）存储在外部文件中
?
综合总结如下：
js的组成:
ECMAScript
DOM：操作文档（页面）
BOM：操作窗口
关于变量：
var
typeof():number,string,boolean,object,undefined,null,function
关于运算：
隐式：==,-
显式: parseInt/NaN
==/===
关于事件：
事件的处理不放在行间
window.onload=function(){...}
元素名.事件名 =function(){...}
获取元素：
getElementById(元素的id名字)
getElementsByTagName("") 按标签名字取-〉数组
数组.length
关于数组：
数组.sort()
字符串.split(解析分隔符)
数组.join(元素之间的连接符)
关于样式：
style.display=block/none
style.background=颜色
复选框.checked=true/false
结构、表现、行为相分离：
1、布局---html
2、样式--- (.css)
3、js
(
)
4，数组
数组的定义
使用Array关键字定义
例如：var arr=new Array();
var arr=new Array(1,2,3,4);
使用[]定义
例如：var arr=[1,2,3,4]
数组的属性
数组的长度：length属性
数组的方法
push：向数组尾部添加元素
pop：从数组尾部弹出一个数据
shift：从数组头部删除一个元素
unshift：向数组头部添加一个元素
sort：排序
排序规则：字母序对字符串进行排序
比较函数
concat：连接两个数组
split：解析字符串为数组
join：输出数组时元素之间的分隔符
例子：
数组的排序，从小到大排序
5，函数
函数的返回值
没有return/return ;：undefined
规则：令一个函数只返回一种类型的值
函数的参数
一般的参数：
参数类型
参数个数
arguments：参数数组，可变参，不定参
例子：
上面会显示5，数组里面的第2个元素
例子：
模拟“重载”的处理
6，CSS函数
css(‘background’)
css(‘background’,’red’);
第三章，DOM（Ducument Object Model）
1，获取节点
getElementById
获取子节点：childNodes
子节点的个数
操作子节点
例子：
window. (){
var oUl=document.getElementById('ul1');
oUl.childNodes[0].style.background=yellow';//ul的第一个子节点，也就是下面的li
}
2，检测节点的类型
nodeType
元素节点：1
文本节点：3
属性节点：2
例子：
3，父节点parentNode
父节点只有一个
例子：隐藏父节点
window. (){
var aA=document.getElementsByTagName('a');
var i=0;
for(i=0;i
aA[i]. () {
this.parentNode.style.display='none';
}
}
}
this：指向调用该方法或属性的对象。
4，offsetParent
获取当前元素用于定位的父节点
5，子节点
firstChild，firstElementChild
lastChild, lastElementChild
例子：
window. (){
var oUl=document.getElementById('ul1');
//IE低版本
//oUl.firstChild.style.background='red';
//FF，IE11
//oUl.firstElementChild.style.background='red';
var oFirst=oUl.firstElementChild||oUl.firstChild;
oFirst.style.background='red';
}
6，DOM元素的查找
用id选择元素
用tagName选择元素
用className选择元素
选出所有元素
利用if做筛选
封装为函数
function getByClass(oParent, sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[]; //可能存在多个，放在数组中
var i=0;
for(i=0;i
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window. (){
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i aBox[i].style.background='yellow'; } } 7，创建、插入和删除元素 创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子：为ul插入li window. (){ var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn. () { var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; oUl.appendChild(oLi); } } InnerHTML是一个标签内部的东西 这里是标签内部的东西，存储在innerHTML中
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
window. (){
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn. () {
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0){
oUl.appendChild(oLi);
}
else{
oUl.insertBefore(oLi, aLi[0]);
}
}
}
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
window. (){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i
aA[i]. () {
oUl.removeChild(this.parentNode);
}
}
}
第四次课 处理事件
1，在document上加事件
document. (){
alert('a');
}
2，从event对象获取点击坐标（考虑到不同浏览器的兼容性问题）
document.onclick=function(ev){
if(ev){
alert(ev.clientX+","+ev.clientY);
}else{
alert(event.clientX+","+event.clientY);
}
}
3，或运算
非0---true 0/null/false
12 || false 12
0 || ’abc’ ‘abc’
‘’ || true true
12 || 0 12
12 || null 12
null || ’abc’ ‘abc’
‘abc’ || 12 ‘abc’
利用或运算处理浏览器兼容性
document. (ev){
var oEvent=ev||event; //将特殊的放在前面
alert(oEvent.clientX+', '+oEvent.clientY);
};
4，事件流
事件像冒泡一样从DOM层次结构的底层往上一级级升
事件处理：避免事件冒泡带来的干扰
window. (){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn. (ev){
var oEvent=ev||event;
oDiv.style.display='block';
oEvent.cancelBubble=true; //阻止冒泡
};
document. (){
oDiv.style.display='none';
};
};
5，鼠标事件
鼠标位置
document. (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
oDiv.style.left=oEvent.clientX+'px' ;
oDiv.style.top=oEvent.clientY+'px' ;
};
滚动位置
鼠标跟随改进：
document. (ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ; //横向滚动处理
oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ; //纵向滚动处理
};
6，键盘事件
对比鼠标事件：onclick=onmousedown+onmouseup
键盘事件：onpress= onkeydown+onkeyup
键值keycode
document.onkeydown=function (ev){
var oEvent=ev||event;
alert(oEvent.keyCode);
}
offsetWidth: div的宽度
border:1px; +
padding(内边距):10px +
margin(外边距):20px -
offsetLeft：div的左边距
offsetTop
offsetRight
键盘控制移动：上下左右移动
document.onkeydown=function (ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==37){//左
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39) {
oDiv.style.left=oDiv.offsetLeft+10+'px';
}else if(oEvent.keyCode==38) {
oDiv.style.left=oDiv.offsetTop-10+'px';
}else if(oEvent.keyCode==40) {
oDiv.style.left=oDiv.offsetTop+10+'px';
}
};
使用鼠标点击留言:
window. (){
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oBtn. () {
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
};
};
Enter键留言：
window. (){
……
oTxt2.onkeydown=function (ev){ //注意加事件的对象
var oEvent=ev||event;
if( oEvent.keyCode==13){
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};
ctrl+enter提交：
window. (){
……
oTxt2.onkeydown=function (ev){ //注意加事件的对象
var oEvent=ev||event;
if( oEvent.ctrlKey && oEvent.keyCode==13){
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};
7，默认行为
什么是默认行为？
不需要自己编写，浏览器自己即具备的功能。
右键打开快捷菜单（oncontextmenu事件（上下文菜单）：右键菜单）
文本框输入
表单提交
阻止默认行为的一般的写法：return false
弹出自定义右键菜单：
document.oncontextmenu=function (ev){
var oEvent=ev||event;
var oUl=document.getElementById('ul1');
var scrollTop =document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
oUl.style.display='block';
oUl.style.left= oEvent.clientX+scrollLeft+‘px’ ;;
oUl.style.top= oEvent.clientY+ scrollTop +‘px;
return false; //阻止系统右键菜单
};
弹出自定义右键菜单：
document. (){
var oUl=document.getElementById('ul1');
oUl.style.display='none';
};
8，拖拽
存储距离
onmousemove：根据距离计算DIV最新位置
最后总结：
1、事件对象--注意兼容性
function(ev)
var oEvent = ev ||event;
2、事件流
父节点，子节点 相同事件
oEvent.cancelBubble=true; 阻止事件冒泡
3、鼠标事件
鼠标点击位置：
oEvent.clientX 鼠标距可视区的左边距
oEvent.clientY 鼠标距可视区的上边距
带滚动条的滚动位置（注意兼容性）：
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
div定位： oDiv.style.left= scrollLeft+oEvent.clientX +'px';
oDiv.style.top = scrollTop+oEvent.clientY +'px';
4、键盘事件
oEvent.keyCode
取值：测试
常用取值：13--回车
第5次课 BOM
1，打开窗口
window.open(页面地址, 打开方式);
打开方式：在哪个框架中打开？
_blank:新窗口，默认
_self：当前窗口
例子：
oBtn. (){
window.open(‘ www.126.com/', '_self');
};
运行代码：
document.write()：向页面输出内容
举例：document.write(‘aaa’);
运行并查看页面源代码
window. (){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn. () {
var oNewWin=window.open('about:blank');
oNewWin.document.write(oTxt.value);
};
};
2，关闭窗口
window.close()
window. (){
var oBtn=document.getElementById('btn1');
oBtn. () {
window.close();
};
};
3，常用属性
window.navigator.userAgent：浏览器版本号
window.location：当前页面地址
读
alert(window.location);
写
window.location='http://www.126.com/'
4，系统对话
var b = confirm('今天下雨了吗？');
alert(b);
var str = prompt('请输入你的姓名', ‘song');
alert(str);
5，尺寸及坐标
可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.body.scrollTop
document.documentElement.scrollTop
侧边栏例子：
window.onscroll=function (){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
oDiv.style.top=scrollTop+t+'px';
};
需要解决的问题
页面刚加载
页面大小改变
window.onresize=window.onload=……接上面，这样无论怎样都可以居中右靠