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

代码如下：

<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. 51nod1489(dfs)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1489 题意:中文题诶- 思路:dfs 首先我们要通过攻击第1 ...

  2. 接水果(fruit)——整体二分+扫描线

    题目 [题目描述] 风见幽香非常喜欢玩一个叫做 osu! 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经 DT FC 了 The big black,她觉得这个游戏太简单了,于是发明了一个更加难的 ...

  3. 洛谷P5048 [Ynoi2019模拟赛]Yuno loves sqrt technology III（分块）

    传送门 众所周知lxl是个毒瘤,Ynoi道道都是神仙题 用蒲公英那个分块的方法做结果两天没卡过去→_→ 首先我们分块,预处理块与块之间的答案,然后每次询问的时候拆成整块和两边剩下的元素 整块的答案很简 ...

  4. P1089津津的储蓄计划

    题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在 ...

  5. 【ACM】拦截导弹 - 0-1背包问题

    拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...

  6. 非关系型数据库---Memcached

    一.概述 1.Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载: 2.Memcached通过 在内存中缓存对象和数据 来减少读取数据库的次数,从而提升网站的 ...

  7. mac终端快捷键

    mac终端快捷键: http://www.jianshu.com/p/e6c364084c22

  8. js、jquery报错

    js.jquery一直报错,是myecplise的问题, 右键项目->属性->builder->js validate去掉单个文件出错 右击文件->myecplise-> ...

  9. Oracle权限管理

    一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...

  10. nginx去掉url中的index.php

    使用情境:我想输入www.abc.com/a/1后,实际上是跳转到www.abc.com/index.php/a/1 配置Nginx.conf在你的虚拟主机下添加: location / {      ...