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

代码如下：

<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. centos7安装配置docker

    1. 安装/升级Docker客户端 Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . uname -r 从 ...

  2. 阿里maven镜像配置

    setting.xml<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven< ...

  3. 禁止tableview 像上滑动

    tableView有一个bounces属性.默认YES,所以tableView上下用力拉都会有弹性滑动,如下设置可以禁止,但是这样的话上下弹性都没了 而经常的需求是上方不要弹性,下方要弹性,可以用监听 ...

  4. day01笔记

    linux基本命令的学习: 1.查看主机名 hostname 2.修改主机名 hostnamectl set-hostname s16ds 3.linux命令提示符 [root@s16ds ~]# # ...

  5. 利用git reflog找回错误的重置

    在开发中经常需要reset分支,如果在reset前没有记住分支指向的提交ID,想要重置回原来的提交恐怕大多数开发者是重新拉取远程版本库,再rebase分支.但如果连不上远程版本库或没有远程版本怎么办呢 ...

  6. jquery $.fn $.fx 的意思以及使用

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事 $.fn是指jquery的命名空间,加 ...

  7. Selenium----Selenium简单介绍以及Selenium IDE环境搭建，脚本录制

    1.selenium简单介绍 心得:作为一个新手开始了解这个工具,打算从录制脚本开始学习,“录制,看,学习,写”,总结网友说得打算先使用Selenium IDE录制学习,再使用Selenium RC开 ...

  8. 16-----client、offset、scroll 系列

    1.client 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. Mysql与Sql server，Sum函数跟Count函数

    两者均是统计类函数,都不计算NULL字段!!! 单纯计算行数的话,count的效率比sum的效率高 MySQL SUM()函数介绍 SUM()函数用于计算一组值或表达式的总和,SUM()函数的语法如下 ...

  10. ProtocBuffer安装

    学习protocolhttp://www.jianshu.com/p/fa126a8535a0 mac安装protocbuff: 下边总结一下安装流程: 查看官方文档源码在 https://githu ...