码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础篇总结

时间:2016-04-27 22:42:09      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:

一. 数组

  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);

 

JavaScript基础篇总结

标签:

原文地址:http://www.cnblogs.com/veganQian/p/5440452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!