一，回顾 首先先来回顾下DOM和事件。 1，DOM DOM在JavaScript中是应用最广泛的，大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。 看下面的例子: demo 李老师-英语 张老师-数学 刘老师-物理 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 等待页面所有内容加载完毕后，通过getElementsByTagName()方法获取页面中的li元素，然后循环改变li元素颜色为红色。 再看第二个DOM例子，例子将把第二个li元素从页面中删除。 demo 李老师-英语 张老师-数学 刘老师-物理 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 现获取到li元素的父节点ul元素，然后使用removeChild() 方法删除ul元素下 指定的li元素。 当然也可以直接使用 parentNode来直接获取li元素的父节点。代码如下： 复制代码 代码如下: window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].style.color = "red"; } //删除第二个li元素 //var ul = document.getElementsByTagName("ul")[0]; //索引从0开始 //ul.removeChild( li[1] ); //索引从0开始 li[1].parentNode.removeChild( li[1] ); //索引从0开始，直接使用parentNode来获取li元素的父节点 } 2，事件 事件是黏合应用程序中所有用户交互的胶水。DOM和事件的是JavaScript中的黄金搭档（呵呵，来句广告词），它们决定着现代Web应用程序形态的根本所在。 看下面的例子： demo 李老师-英语 张老师-数学 刘老师-物理 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 本例中，获取的li元素后，然后循环给元素添加事件，添加了onmouseover和onmouseout事件。当滑入时，改变颜色，滑出时，恢复颜色。 事件是复杂多变的，上例是一个最简单的例子，所以基本上没遇到问题。在以后，我们将遇到 比如 事件冒泡，事件传递 ，取消事件等问题。 3，DOM和事件 在DOM和事件交互的基础上产生了DHTML，它的实质就是JavaScript事件和DOM元素上CSS属性之间的交互。DHTML存在的意思就是组合这两个技术，然后做它的事情。 二，简单的面向对象开发 我们先来感受一下JavaScript面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]最终结果会输出“李老师 是教 英语 的。” 在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]最终结果会输出： 本例中， 数组的值都调用了 display()方法。 改进如下： 在 复制代码 代码如下:AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i<this.lec.length;i++){ str += this.lec[i] + "n"; } return str; } 中的this.lec[i] 处，统一调用display()方法。然后去掉数组的值调用display()。修改后的代码如下： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 同样也可以输出跟上例一样的结果。 这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。 三，小结 本章回顾了DOM和事件，然后通过例子简单的讲解了面向对象的开发。

　　推荐阅读

　　Mootools 1.2教程 函数

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲，请先查看上一篇教程《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools，而是讲一讲JavaScript中的函数（function）的基本知识。 但是，>>>详细阅读

本文标题：JavaScript 中级笔记 第一章

地址：http://www.17bianji.com/kaifa2/JS/28120.html

 1/2    1