把整个图片库的浏览链接集中安排在你的图片库里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给它。

代码如下：

<body>

        <ul>

            <li>

                <a href="images/4-1.png" onclick="showPic(this);return false">图片1</a>

            </li>

            <li>

                <a href="images/4-2.png" onclick="showPic(this);return false">图片2</a>

            </li>

            <li>

                <a href="images/4-3.png" onclick="showPic(this);return false">图片3</a>

            </li>

            <li>

                <a href="images/4-4.png" onclick="showPic(this);return false">图片4</a>

            </li>

            <img src="data:images/4-1.png" id="placeholder"/>

        </ul>

        <script type="text/javascript">

            function showPic(pic){

                var source = pic.getAttribute("href");

                var placeholder = document.getElementById("placeholder");

                placeholder.setAttribute("src",source);

            }

        </script>

 </body>

- 通过onclick事件处理函数去触发的动作是调用showPic()函数，想调用这个函数必须向它传递一个参数：一个带有href属性的元素节点。因此，要把那些链接本身用作参数。这里用this关键字来表示”这个<a>元素节点“，这个关键字含义是“这个对象"

- 事件处理函数的工作机制：在给某个元素添加了事件处理函数后，一旦发生预定事件，相应的javascript代码就会得到执行，那些javascript1代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。在这，返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个链接没有被点击”

  • chlidNodes属性

该属性可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素。

childNodes属性返回的数组包含着所有类型的节点。除了所有的元素节点，所有的属性节点和文本节点也包含其中。

element.childNode

  • nodeType属性

利用nodeType属性来区分文档里的各个节点。这个属性返回的是一个数字。 node.nodeType

nodeType属性值总共有12种可取值。其中仅有3种具有实际价值：元素节点、属性节点和文本节点，相对的nodeType属性值分别是1,2,3

  • nodeValue属性

这个属性的用途是检索和设置节点的值。 node.nodeValue

  • firstChild 和 lastChild属性

node.firstChild完全等价于 node.childNodes[0]

node.lastChild完全等价于 node.childNodes[node.childNodes.length-1]

查询body元素里有多少个子元素：

　　　　　　　function countBodyChildren(){

                var body_element = document.getElementsByTagName("body")[0];

                alert(body_element.childNodes.length);

                alert(body_element.nodeType);    //1

            }

            window.onload = countBodyChildren;

第四章 用javascript和DOM去建立一个图片库的更多相关文章

  1. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  2. 第四章：javascript： 栈

    列表是一种最自然的数据组织方式.上一章已经介绍如何使用List类将数据组织成一个列表.如果数据存储的顺序不重要.也不必对数据进行查找,那么列表就是一种再好不过的数据结构.对于其它的一些应用,列表就显得 ...

  3. 第四章 函数(JavaScript:语言精粹)

    函数包含一组语句,用来指定对象的行为,其代码可以用来重复使用.   一般来说,编程就是将一组需求分解成一组函数和数据结构的技能.   概览:函数对象 | 函数字面量 | 调用 | 方法调用模式 | 函 ...

  4. 第四章：Javascript表达式和运算符

    表达式是javascript中的一个短语,javascript解释器会将其计算出一个结果.程序中常用量是最简单的一类表达式就是变量.变量名也是一种简单的表达式,它的值就是赋值给变量的值.复杂的表达式是 ...

  5. 第四章 --- 关于Javascript 设计模式 之 迭代器模式

    今天我先写 两个常用的迭代器的 例子.(同学们先自行体会这二种迭代器的优缺点) 需求:比较两个数组是否相等 tips: 当数组的下标不为数字的时候,默认为 该键值对 为 对象. 然后迭代器的原理基本来 ...

  6. 第三章：javascript： 列表

    在日常生活中,人们经常使用列表:待办事项列表,购物清单,十佳榜单,最后十名榜单等.计算机也在使用列表,尤其是列表中元素保存的是太多时.当不需要一个很长的序列中查找元素,或对其进行排序时,列表显得尤为有 ...

  7. 第五章：javascript：队列

    队列是一种列表,不同的是队列只能在末尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据.先进先出.这点和栈不一样,在栈中,最后入栈的元素反被优先处理.可以将队列想象成银行排队办理业务的人,排队在 ...

  8. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  9. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

随机推荐

  1. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  2. 解读人：闫克强，Metabolic and gut microbial characterization of obesity-prone mice under high-fat diet（高脂饮食下易胖倾向小鼠的代谢和肠道微生物菌群特征分析）

    单位: 上海中医药大学 蚌埠医学院 上海交通大学附属第六人民医院 夏威夷大学癌症中心 第二军医大学 技术:非靶向代谢组学,16S rRNA测序技术 一. 概述: 本研究对小鼠进行高脂饮食,根据体重增长 ...

  3. NYOJ247 虚拟城市之旅 （spfa）

    题目链接:点击打开链接 虚拟的城市之旅 时间限制: ms  |  内存限制: KB 难度: 描述 展馆是未来城市的缩影,个人体验和互动是不变的主题.在A国展馆通过多维模式和高科技手段,引领参观者在展示 ...

  4. EIGRP-2-EIGRP的度量

    EIGRP使用多种类型的度量值来描述一条路由的不同技术属性,称为组合度量或度量组合.这些组合度量参数包括带宽.延迟.可靠性.负载.MTU和跳数.这6个参数中的前4个通过一个著名的公式组合在一起,计算出 ...

  5. jquery——无缝滚动

    无缝滚动: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. UVALive 7511 L - Multiplication Table 数学模拟题，暴力

    给定一副表,问其是否合法. 思路:当全部是?的时候,是合法的. 如果不是,那么,就找到一个数字,把它拆成若干个a*b的形式,去判断其它点是否合法即可. 拆分数字的时候,只需要枚举到sqrt(n),因为 ...

  7. SpringBoot | 第十五章：基于Postman的RESTful接口测试

    前言 从上一章节开始,接下来的几个章节会讲解一些开发过程中配套工具的使用.俗话说的好,工欲善其事,必先利其器.对于开发人员而言,有个好用的工具,也是一件事半功倍的事,而且开发起来也很爽,效率也会提升很 ...

  8. <Linux系统isosize指令用法>

    isosize命令:iso9660文件系统大小显示 isosize命令用于显示iso9660文件系统的大小,还文件可以使普通文件,也可以是块设备,如/dev/sr0或者/dev/sda.如果没有相关选 ...

  9. arcgis js 几种拓扑关系详解

    arcgis js的拓扑关系,在处理复杂逻辑和分析时,可以通过拓扑关系,减小客户端的工作量 拓扑关系: 1.overlaps 重叠 这里的重叠跟平时我们理解的不太一样,这里的重叠,必须是A与B有交集, ...

  10. 与 HTML4 比较，HTML5 废弃了哪些元素？

    frame frameset noframe applet big center basefront