JavaScript基础总结

一、javascript基础：

1.      页面文档输出：document.write(“<h2>thisis a page</h2>”);  //不能在文档加载完成之后使用，会覆盖该文档。

2.      根据id改变HTML文档内容：document.getElementById(“id”).innerHTML=”newcontent”;

3.      根据id改变属性：document.getElementById(“id”).属性名=”new content”;

4.      根据id改变CSS：document.getElementById(“id”).style.属性名=”new content”;

5.      定义数组：var arr=[“hello”,”hi”];或 var arr=new Array(“hello”,”hi”); 或var arr=new Array();

6.      字符串中“＋”表示连接，任何类型与字符串相加都被转换为字符串类型

7.      for-in语句：for(j in i) {  document.write( i[j] );  } //如果变量j是数组i中的一个元素

8.      function函数内定义变量不写var，定义的是全局变量，但要等函数执行才生效。

9.      JavaScript异常处理：

(1)try-catch

try{

            发生异常的代码块；

}catch(err){

            错误信息处理；

}

(2)throw语句---创建一个自定义错误

二、事件

1、 常用事件类型：

onLoad()在body标签上调用

onClick：单击事件

onMouseOver：鼠标经过事件

 onMouseOut：鼠标移出事件

onChange：文本内容改变事件

onSelect：文本框选中事件

onFocus：光标聚集事件

onBlur：移开光标事件

onLoad：网页加载事件

onUnload：关闭网页事件

2、事件句柄

用处：多个句柄添加事件不会覆盖，可实现多个功能

（1）       addEventListener();  //向指定元素添加事件句柄

参数：“事件类型”，“处理事件函数名”

（2）       removeEventListener();  //移除方法添加的事件句柄

3、 事件流

页面中接受事件的顺序

（1）       事件冒泡：由最具体的元素接收，逐级向上传播至最不具体的元素节点

（2）       事件捕获：最不具体的节点先接收事件，最具体的节点最后接收事件

3.      事件处理

（1）       HTML:要修改多处

直接添加到HTML结构中

（2）       DOM0级事件处理：会被覆盖

把一个函数赋值给一个事件处理程序属性

（3）       DOM2级事件处理

addEventListener(“事件名”,”事件处理函数”,”布尔值”);

true:事件捕获

false:事件冒泡

removeEventListener();

（4）       IE事件处理程序：

attachEvent

detachEvent

5、事件对象：在触发DOM事件的时候产生的对象

事件对象event 属性：

（1）       type:获取事件类型

（2）       target：获取事件目标

（3）       stopPropagation() ：阻止事件冒泡

（4）       preventDefault()：阻止事件默认行为

三、内置对象

自定义对象：定义并创建对象实例；使用函数定义对象，然后创建新的对象实例

1.        创建：

<script>
    people = new Object();
    people.name = "wanna";
    people.age="18";
    document.wirte("name:"+people.name+",age:"+people.age);
    people = {name:"wanna",age:"18"};
    document.write("name:"+people.name+",age:"+people.age);
    fuction people(name.age){
           this.name = name;
           this.age = age;
      }
     son = new people("wanna",18);
     document.write("name:"+son.name+",age:"+son.age);
</script>

2.        String字符串对象

属性：

string.length;  

给对象添加属性：string.prototype;   

返回对创建此对象的数组函数的引用：string.constructor

方法：

string.indexOf(“要查询的字符串”);  //返回字符串开始的位置

string.match(“要匹配的内容”);  //返回匹配的字符串，没有则返回空

string.replace(“被替换的参数”,”新替换上的参数”);

string.toUpperCase(); //转换为大写

string.toLowerCase();  //转换为小写

string.split(“分隔符”);  //根据分隔符将字符串转化为数组

3.        Date日期对象

当前时间：var date = new Date();           获取年份：date.getFullYear();

获取毫秒：date.getTime();                设置具体的日期：date.setFullYear();

获取星期：date.getDay();                 时钟实例：在body标签中调用οnlοad=startTime()

四、DOM对象控制html

getElementsByName()----获取name；     getElementsByTagName()-----获取元素

getAttribute()-----获取元素属性；        setAttrubute()-----设置元素属性

childNodes()-----访问子节点；           parentNode()------访问父节点

createElement()------创建元素节点；      createTextNode-----创建文本节点

insertBefore()-----插入节点；           removeChild()------删除节点

offsetHeight：网页尺寸，不包含滚动条   scrollHeight：网页尺寸，包含滚动条

五、JS浏览器对象

1.      window对象

（1）window对象----当前浏览器窗口

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

全局变量是window对象的属性，全局函数是window对象的方法，document也是window对象的属性之一。

（2）       window尺寸

window.innerHeight----浏览器窗口的内部高度

window.innerWidth----浏览器窗口的内部宽度

（3）window方法

window.open()-----打开新窗口--- open（”url”，”window_name”,”height,width,top,left”）;

window.closes()----关闭当前窗口

2.      计时器

（1）       setInterval(函数；毫秒)----间隔指定毫秒数不停地执行指定代码

clearInterval()----停止setInterval()方法执行的函数代码

（2）       setTimeout()----暂停指定的毫秒数后执行指定的代码

clearTimeout()-----停止执行setTimeout()方法的函数代码

3.      History对象

包含浏览器的历史url的集合

（1）       history.back()----后退

（2）       history.forward---向前

（3）       history.go()---进入某个历史页面

4.      Location对象

获取当前页面的地址URL，并把浏览器重新定向到新的页面。

（1）       location.hostname：返回web主机的域名

（2）       location.pathname：返回当前页面的路径和文件名

（3）       location.port：返回web主机的端口

（4）       location.protocol：返回所使用的web协议

（5）       location.href：返回当前页面的url

（6）       location.assign()：加载新的文档

5.      screen对象

包含有关用户屏幕的信息

（1）       screen.availWidth：可用屏幕宽度

（2）       screen.availHeight：可用屏幕高度

（3）       screen.height：屏幕高度

（4）       screen.width：屏幕宽度

六、js面向对象

1.      一切事物皆对象；对象具有封装和继承特性；信息隐藏

2.      函数构造器构造对象

3.      js中没有类，用function模拟

继承+隐藏：

(functin(){
		var n = “ime”;
		function People(name){
			this._name = name;
}
People.prototype.say = function(){
		alert(“peo-hello” + this._name);
}
		window.People = People;
}());
function Student(name){
		this._name = name;
}
Student.prototype = new People();
var superSay = Student.property.say;
Student.property.say = function(){
		syperSay.call(this);
		alert(“stu-hello” + this._name);
}
var s = new Student(“Wanna”);
s.say();