源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript 中级笔记 第一章

  • 时间:2020-11-16 10:31 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript 中级笔记 第一章
[b]一,回顾[/b] 首先先来回顾下DOM和事件。 1,DOM DOM在JavaScript中是应用最广泛的,大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。 看下面的例子:
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
等待页面所有内容加载完毕后,通过getElementsByTagName()方法获取页面中的li元素,然后循环改变li元素颜色为红色。 再看第二个DOM例子,例子将把第二个li元素从页面中删除。
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
现获取到li元素的父节点ul元素,然后使用removeChild() 方法删除ul元素下 指定的li元素。 当然也可以直接使用 parentNode来直接获取li元素的父节点。代码如下:
[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
本例中,获取的li元素后,然后循环给元素添加事件,添加了onmouseover和onmouseout事件。当滑入时,改变颜色,滑出时,恢复颜色。 事件是复杂多变的,上例是一个最简单的例子,所以基本上没遇到问题。在以后,我们将遇到 比如 事件冒泡,事件传递 ,取消事件等问题。 3,DOM和事件 在DOM和事件交互的基础上产生了DHTML,它的实质就是JavaScript事件和DOM元素上CSS属性之间的交互。DHTML存在的意思就是组合这两个技术,然后做它的事情。 [b]二,简单的面向对象开发 [/b]我们先来感受一下JavaScript面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
最终结果会输出“李老师 是教 英语 的。” 在此例子的基础上,我们再定义个函数,用来输出所有的课程信息。代码如下所示:
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
最终结果会输出: [img]http://files.jb51.net/upload/20090914130240978.gif[/img] 本例中, 数组的值都调用了 display()方法。 改进如下: 在
[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
同样也可以输出跟上例一样的结果。 这是一个简单的面向对象开发的例子,随着JavaScript逐渐被程序员所接受,设计良好的面向对象代码也日益普及。在后面的笔记中,你将会看到更多的面向对象程序代码。 [b]三,小结[/b] 本章回顾了DOM和事件,然后通过例子简单的讲解了面向对象的开发。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部