当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 中级笔记 第一章

Javascript
JavaScript中出现乱码的处理心得
JQuery 写的个性导航菜单
Jquery 高亮显示文本中重要的关键字
使用jQuery获取radio/checkbox组的值的代码收集
jquery 弹出登录窗口实现代码
JQuery与iframe交互实现代码
Javascript 键盘keyCode键码值表
javascript 事件加载与预加载
javascript 处理事件绑定的一些兼容写法
javascript 鼠标事件总结
javascript 异步的innerHTML使用分析
javascript 键盘事件总结 推荐
javascript Array对象使用小结
再谈javascript 动态添加样式规则 W3C校检
用Javascript同时提交多个Web表单的方法
javascript 闪烁的圣诞树实现代码
键盘上下键移动选择table表格行的js代码
javascript 计算两个整数的百分比值
js tab效果的实现代码
默认让页面的第一个控件选中的javascript代码

No. « 253 254 255 256 »

技术文章搜索

关键字

Javascript 中的 JavaScript 中级笔记 第一章

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 310 ::
收藏到网摘: n/a

JavaScript 中级笔记

一，回顾
首先先来回顾下DOM和事件。
1，DOM
DOM在JavaScript中是应用最广泛的，大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。
看下面的例子:

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

等待页面所有内容加载完毕后，通过getElementsByTagName()方法获取页面中的li元素，然后循环改变li元素颜色为红色。
再看第二个DOM例子，例子将把第二个li元素从页面中删除。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

现获取到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 全选 提示:你可先修改部分代码,再按运行]

本例中，获取的li元素后，然后循环给元素添加事件，添加了onmouseover和onmouseout事件。当滑入时，改变颜色，滑出时，恢复颜色。
事件是复杂多变的，上例是一个最简单的例子，所以基本上没遇到问题。在以后，我们将遇到 比如 事件冒泡，事件传递 ，取消事件等问题。
3，DOM和事件
在DOM和事件交互的基础上产生了DHTML，它的实质就是JavaScript事件和DOM元素上CSS属性之间的交互。DHTML存在的意思就是组合这两个技术，然后做它的事情。
二，简单的面向对象开发
我们先来感受一下JavaScript面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

最终结果会输出“李老师 是教 英语 的。”
在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

最终结果会输出：

本例中， 数组的值都调用了 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 全选 提示:你可先修改部分代码,再按运行]

同样也可以输出跟上例一样的结果。
这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。
三，小结
本章回顾了DOM和事件，然后通过例子简单的讲解了面向对象的开发。