javascript学习总结_javascript 9007199254740990-优快云博客

本文深入解析JavaScript的组成，包括ECMAScript、DOM、BOM，详细讲解变量类型及命名规范，展示行间样式选择，介绍数组操作、DOM元素创建与删除、BOM基础，以及事件冒泡原理。

一、javascript的组成

JavaScript作为一种网络客户端的脚本语言，由以下三部分组成：

1.  ECMAScript--JavaScript的核心，描述了语言的基本语法和对象。

    ECMAScript经历了三个版本的更新，现在大多数网络浏览器都支持Edition3。ECMAScript主要提供语言相关的信息与标准，如语法、类型、声明、关键字、保留字、操作运算符、对象等等。

2.  DOM--The Document Object Model，描述了作用于网页内容的方法和接口。

    DOM是HTML的一个应用程序接口，它也经历了三个版本的更新，其中以第一和第二个版本使用最为广泛，在第二个版本中，最重要的特性莫过于提供了事件响应的接口，处理CSS的接口，移动窗口的接口，并且能够控制代码树的结构等等。
    除了使用最多的DOM Core和DOM HTML标准接口外，其他的部分语言也拥有自己的DOM标准，如SVG、MathML、SMIL。

3.  BOM--The Browser Object Model，描述了和浏览器交互的方法和接口。

    例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。

二、变量类型

Undefined类型

Undefined类型只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。

Null类型

Null类型也只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。Null类型的语义是“一个空的对象引用”。

Boolean类型

Boolean有两种取值true和false

String类型

String类型的的正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。

Number类型

JavaScript的Number共有18437736874454810627 (就是 264-253 +3)个值。JavaScript的Number以双精度浮点类型存储，除了9007199254740990表示NaN，它遵守IEEE 754（见附1）规定，占用64位8字节。

Object类型

JavaScript中最为复杂的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性[[call]]的Object，JavaScript的宿主也可以提供一些特别的对象。

三、命名规范

类型	前缀	示例
数组	a	aArray
布尔值	b	bBool
浮点型（数字）	f	fFloat
函数	fn	fnFunction
整型（数字）	i	iNumber
对象	o	oObject
正则表达式	re	rePattern
字符串	s	sString
变形（可以是任意类型）	v	vVariable

四、行间样式的选择

IE下：alert(oDiv.currentStyle.width);

FF下：alert(getComputedStyle(oDiv));

五、数组

添加：push：从尾部添加；unshift：从头部添加；

删除：pop：从尾部删除；shift：从头部删除；

连接：contact arr1.contact(arr2);

截取：arr1.slice(start, [end]); 以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

排序：arr.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址

arr.sort(); //对数组元素排序，返回数组地址

六、dom操作

1、创建元素

前插insertBefore

[html] view plain copy

window.onload=function(){

var oBtn1=document.getElementById('btn1');

var oTxt1=document.getElementById('text1');

var oUl1=document.getElementById('ul1');

oBtn1.onclick=function(){

var oli=document.createElement('li');

var ali=document.getElementsByTagName('li');

oli.innerHTML=oTxt1.value;

oUl1.insertBefore(oli,ali[0]);

}

</script>

<body>

</ul>

</body>

后插appendChild

[html] view plain copy

window.onload=function(){

var oBtn1=document.getElementById('btn1');

var oTxt1=document.getElementById('text1');

var oUl1=document.getElementById('ul1');

oBtn1.onclick=function(){

var oli=document.createElement('li');

var ali=document.getElementsByTagName('li');

oli.innerHTML=oTxt1.value;

oUl1.insertBefore(oli,ali[0]);

}

</script>

<body>

</ul>

</body>

2、删除元素removeChild

[html] view plain copy

window.onload=function(){

var aA=document.getElementsByTagName('a');

var oUl1=document.getElementById('ul1');

var i=0;

for(i=0;i<aA.length;i++){

aA[i].onclick=function(){

oUl1.removeChild(this.parentNode);

}

</script>

<body>

<li>sdljflajlsdkfdas<a href="javascript:;">删除</a></li>

<li>sdljflajlsdkfdas<a href="#">删除</a></li>

</ul>

</body>

4、设置得到节点属性 setAttribute('value','*') getAttribute('id')

我一般都用点方式直接赋值，所以这是很少用到的方法，不详述。

5、dom节点的兼容性问题

E6/IE7/IE8/Safari/Chrome/Opera 支持childNodes

IE9/Firefox 不支持childNodes

所以可以采用children得到的兼容的节点。其余节点过一阵儿总结。

1、

	IE	FF
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
下一个子节点	nextSibling	nextElementSibling
上一个子节点	previousSibling	previousElementSibing

七、bom基础

window常用事件window.onload window.onscroll window.onresize

八、事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

[html] view plain copy