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

代码如下：

<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. 三层登录——C#版

    前言 前期了解三层架构主要是由UI层.BLL层和DAL层三部分构成.看到大牛们都采用三层的思想实现了登录,本菜鸟暗暗地站在了他们的肩膀上. 自己理解 对于三层自己的理解是:就像我们对一个大型的公司去找 ...

  2. MCP|LQD|Data-independent acquisition improves quantitative cross-linking mass spectrometry （DIA方法可提升交联质谱定量分析）

    文献名:Data-independent acquisition improves quantitative cross-linking mass spectrometry (DIA方法可提升定量交联 ...

  3. iOS端实现节日换肤

    本文是我在网上看到一篇不错的文章,因为之前没接触过,所以特意转过来,和大家一起分享下..以下正文: 一.问题的提出 不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛的样式 ...

  4. mycat1.6.5分片（字符串拆分hash）

    https://blog.csdn.net/webnum/article/details/78313525   分片规则:字符串拆分hash 一.conf/schema.xml文件   <?xm ...

  5. Python——连接数据库

    好用的教程(*^▽^*):https://www.cnblogs.com/fatcat132006/p/4081576.html

  6. mediawiki登录时第一次会跳回登录页面，第二次才能登录成功

    原因是:LocalSetting.php中的$wgServer属性使用的是ip,改为域名后成功解决问题 补充:改为域名后使用ip访问会出现第一次登录跳回登录界面的情况,应该根据实际情况来设置$wgSe ...

  7. com.google.gson.stream.MalformedJsonException的解决办法

    关于Gson解析的异常,如果你程序出现以下的异常,有两种可能性:‘ 1. 找到一个JSON格式的验证工具,这个网上很多大家可以百度下: 2.你的JSON格式验证没有问题,却一直报这个解析错误,请确定你 ...

  8. case 范围取值

    你可以在单个case标签中指定一系列连续的值,就像这样:   case low ... high: 这和单独的case标签的合适数字有同样的效果,每个对应包含在从low到high中的一个整数值. 这个 ...

  9. P1681 最大正方形 Iand II

    题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入输出格式 输入格式: 输入文件第一行为两个整数n,m(1<=n,m<=100),接下来n行,每行m ...

  10. AD Framework 发布（一）

      1.     EF Code First 发布时,需要配置数据库账号,账号需要存在服务器角色中具备 diskadmin,public,sysadmin 权限. 2.    数据库不存在时,会通过数 ...