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

代码如下：

<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. 使用poi导出Excel表格，jar包冲突

    HTTP Status 500 – Internal Server Error Type Exception Report Message Handler processing failed; nes ...

  2. NAT模式下设置 虚拟机linux(Centos7) 联网

    第一步 设置虚拟机网络为NAT模式 第二步 设置虚拟机网络配置 首先执行 cd /etc/sysconfig/network-scripts 之后VI 编辑 ifcfg-ens33(根据实际情况来 基 ...

  3. Linux调优（网络）

    定义socket接受缓冲大小 net.core.rmem_default = N #接受 net.core.rmem_max = N net.core.wmem_default = N #发送 net ...

  4. PHP与thinkphp中var_dump（）打印数组显示不全问题

    在我们进行php开发的时候,经常会使用var_dump()函数进行数组的打印,以方便我们程序的调试,而有时候我们在进行多维数组打印的时候会发现多维数组打印不全,有些地方被…代替,这就是我们php配置的 ...

  5. day14内置函数作业详解

    day14题目 day14作业及默写 1,整理今天所学内容,整理知识点,整理博客. 2,画好流程图. 3,都完成的做一下作业(下面题都是用内置函数或者和匿名函数结合做出): 4,用map来处理字符串列 ...

  6. POJ1023 The Fun Number System

    题目来源:http://poj.org/problem?id=1023 题目大意: 有一种有趣的数字系统.类似于我们熟知的二进制,区别是每一位的权重有正有负.(低位至高位编号0->k,第i位的权 ...

  7. 高可用数据同步方案-SqlServer迁移Mysql实战

    简介 随着业务量的上升,以前的架构已经不满足业务的发展,数据作为业务中最重要的一环,需要有更好的架构作为支撑.目前我司有sql server转mysql的需求,所以结合当前业务,我挑选了阿里云开源的一 ...

  8. MySQL三种存储引擎总结

    MySQL三种存储引擎 MyISAM.InnoDB.MEMORY 1.MyISAM MyISAM,3.23.34a前的默认存储引擎. 优缺点 优点 在于占用空间小,处理速度快. 缺点 不支持事务的完整 ...

  9. svn报错cleanup failed–previous operation has not finished; run cleanup if it was interrupte...

    今天在svn提交的时候它卡顿了一下,我以为已经提交完了,就按了一下,结果就再也恢复不了,也继续不了了... 报错 cleanup failed–previous operation has not f ...

  10. php允许被跨域ajax请求

    只要在被请求端,加一句: header('Access-Control-Allow-Origin: *');