JavaScript基础篇总结
一. 数组
1. 终止循环
a. break 终止整个循环,即跳出循环体,执行之外的语句。
b. continue 终止本次循环,直接进行下一次循环
2. 数组
定义: 在内存中开辟一片连续的区域来存储数据。
声明: var arr = []; var arr = new Array();
长度: 不超过最大值都行,无固定长度。arr.length
索引: 数组的基地址 + 偏移量
存储类型: 数组元素可以使任意类型
赋值方式: arr[0] = 1; arr[name] = "tom" -> arr.name = "tom";
二. 函数
1. 函数名代表函数的地址,该值可以赋值给其它变量。
2. 函数名() 表示调用这个函数。
3. JS的函数调用可以再该函数声明前。
4. 如果函数名称相同的函数被多次声明,后面的声明将覆盖前面的。
5. 如果声明了多个同名但传递参数个数不同的函数,再调用时,首先会匹配参数个数相同的函数,
如果找不到,再匹配参数个数大于它的函数,如果还是匹配不到,则会匹配无参的函数。
6. 理解函数的返回值、函数的地址、匿名函数的申明。
7. 函数的作用域
a. 如果先定义了全局变量,然后在在函数内定义自己的变量,但名字相同,在函数类使用该变
量名是,使用的函数内声明的变量,而全剧变量会被屏蔽。
b. 思维误区
<script>
var num = 1;
function func(){
alert(num);
var num = 2;
}
func();
alert(num);
</script>
此时打印出来的结果为: undefined 、 1。
分析原因: 在上面一点中可以得出,在func()里面声明的num会自动屏蔽外面声明的num,但是,
由于声明在执行alert(num)的后面,在alert时,num是未定义的变量,所以打印的结果是undefined。
8. 传参
a. 传递的参数可以是一个值,也可以是一个地址(如数组名、指针)。
9. 返回值
a. 当函数中执行到return语句后,函数就结束执行并返回该值。
10. 构造函数
a. 构造函数不能被调用,必须通过new运算符在创建一个对象时才执行。
b. 编译器会默认提供一个不带参数的构造函数,这个函数用户定义了带参数的构造函数之间互称为重载。
c. this关键字:指当前对象本身。如 var stu = new Student();这里的this就是stu。
d. 简单理解就是谁调用了构造函数this就代表这谁,this也可是window。如:
<script>
var i = 0;
alert(this);
alert(this.i);
</script>;
此时输入的结果为:Object Window 、0
三. 冒泡和捕获
1. 冒泡和捕获
冒泡过程:最内层对象-->最外层对象
捕获过程:最外层对象-->最内层对象
例如:
<p>我是一只鱼</p>
<script>
var obj = document.getElementsByTagName('p')[0];
// 冒泡
obj.addEventListener("click",function(){
alert("点了一只鱼");
},false);
window.addEventListener("click",function(){
alert("点了window");
},false);
document.addEventListener("click",function(){
alert("点了document");
},false);
// 捕获
document.addEventListener("click",function(){
alert("点了document");
},true);
obj.addEventListener("click",function(){
alert("点了一只鱼");
},true);
window.addEventListener("click",function(){
alert("点了window");
},true);
</script>
冒泡的执行过程依次是: alert("点了一只鱼");-->alert("点了document");-->alert("点了window");
捕获的执行过程依次是: alert("点了window");-->alert("点了document");-->alert("点了一只鱼");
2. DOM level 0
程序处理通过指派给对应的事件,可以使用在JavaScript中或者HTML中
JavaScript中: obj.onclick = function(){};
HTML中: <p onclick="func()"></p>
3. 添加和删除事件
i. IE中添加和解除事件
添加事件: obj.attachEvent("onclick",func);
解除事件: obj.dettchEvent("onclick",func);
ii. DOM中添加和删除事件(DOM level 2)
添加事件: obj.addEventListener("click",func,boolean); boolean:true-->捕获阶段,false-->冒泡事件
解除事件: obj.removeEventListener('click',func,boolean);
iii. 兼容解决
if(document.addEventListener){
obj.addEventListener('click',func,boolean);
}
else if(document.attachEvent){
obj.attachEvent("onclick",func);
}
4. Event对象
i. 创建事件时,都会生成一个Event对象,事件执行完成后,Event对象就被销毁。
ii.解决IE和DOM的Event兼容性
event = event || window.event;
5. 事件类型
i.鼠标事件
包括: click,dblclick,mousedown,mouseout,mouseover,mouseup,mousemove
ii.键盘事件
包括: keydown,keyup,keypress
iii.HTML事件
包括: locd,select,change,scroll,focus,blur。。。
四. BOM和DOM
BOM对象
1. 所有对象都是window的子对象
2. window的子对象: document frames history location navigator screen
3. document的子对象: anchors forms images links location
BOM功能:
1. 弹出新浏览器窗口的能力
2. 移动、关闭和更改浏览器窗口大小
3. 提供web浏览器详细信息的导航对象
4. 提供浏览器载入的页面的详细信息的本地对象
5. 提供供用户屏幕分辨率详细信息的屏幕对象
6. 支持cookie
7. 在IE下,可以通过js来实现ActiveX对象类
定时器:
1. 定时执行(只执行一次)
a. setTimeout(函数名,ms);
b. 清除定时器 var timer = setTimeOUt(func,time); clearTimeout(timer);
2. 连续执行(无限执行)
a. setInterval(func,time);
b. 清除(和setTimeout一样)
3. 用setTimeout 模仿setInterval
用递归的方法,使函数不断调用自身反复执行
function func(){
document.write(" timer ");
setTimeout(func,1000);
}
func();
打开和关闭窗口
1. 打开窗口 open(url,window.name,size(position),boolean如果window.name为已存在的窗口,则为true。否则为false)
2. 关闭窗口 window.close();
访问指定URL(window.location)
1. location.href = "http://www.baidu.com"
访问历史(window.history)
1. 返回上一个页面 history.back();
2. 访问下一个页面,之前必须使用了back或者go history.foward();
3. 前进、后退多少个页面 history.go(num), num为正则前进,为负则后退
DOM
1.节点的属性和方法
nodeName : 节点名
nodevalue: 节点值
nodeType : 节点类型
childNodes: 节点列表
firstChild: childNodes中第一个节点
lastChild : childNodes中最后一个节点
previousSibling:前一个兄弟节点
nextSibling :后一个兄弟节点
appendChild(node) : 正在childNodes末添加node节点
insertBefore(new,ref) : 在ref前插入new节点
removeChild(node) : 移除node节点
replaceChild(new,old),new -> old 替换节点
2. 节点的类型的常量和值
节点类型 类型常量 值
a. 元素节点 Node.ELEMENT_NODE 1
b. 属性节点 Node.ATTRBUTE_NODE 2
c. 文本节点 Node.TEXT_NODE 3
3. 创建节点
a. 创建元素节点
creatElement("div");
b. 创建文本节点
creatElement("text");
4. 添加节点
a. appendChild(node) - 在childNodes末添加一个node
b. insertBefore(new,ref) - 在ref节点前添加new节点
5. 在html中 回车也会算一个节点(#text)
五. ajax
1. 全是套路的ajax
i. 创建XML
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
ii. 打开链接
/*
-type: POST/GET
-URL
-boolean:true异步, false同步
*/
xhr.open(type,url,boolean);
iii. 绑定同步函数(发送请求成功后触发)
xhr.onreadystatechange = function(){}
iv. 发送请求
xhr.send(null);