JavaScript 中级笔记 第一章
更新时间：2009年09月14日 12:59:41 作者：
JavaScript 中级笔记
一，回顾
首先先来回顾下DOM和事件。
1，DOM
DOM在JavaScript中是应用最广泛的，大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。
看下面的例子:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
等待页面所有内容加载完毕后，通过getElementsByTagName()方法获取页面中的li元素，然后循环改变li元素颜色为红色。
再看第二个DOM例子，例子将把第二个li元素从页面中删除。
[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应用程序形态的根本所在。
看下面的例子：
[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和事件，然后通过例子简单的讲解了面向对象的开发。
相关文章
在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下2023-09-09
脚本吧 - 幻宇工作室用到js,超强推荐base.js...2006-12-12
前面已经讲解了 引用，函数重载，作用域和上下文，接下来，讲解JavaScript中另一个重要的知识——闭包。2009-09-09
Javascript格式化并高亮xml字符串的方法及注意事项
这篇文章主要介绍了Javascript格式化并高亮xml字符串的方法及注意事项,需要的朋友可以参考下2018-08-08
不同的排序算法，执行效率有着天壤之别，本脚本用JavaScript演示了各种常见的排序算法，包括：冒泡排序、选择排序、插入排序、谢尔排序、快速排序(递归)、快速排序(堆栈)、归并排序、堆排序2014-09-09
这篇文章主要介绍了BootStrap初学者对弹出框和进度条的使用感觉的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了JS实现鼠标按下拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了重置Redux的状态数据的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本文主要介绍了JavaScript验证API的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
js的隐含参数(arguments,callee,caller)使用方法
本篇文章只要是对js的隐含参数(arguments,callee,caller)使用方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论