首先先建立一个html文件，建立一个图片库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

</body>

</html>

然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。

代码更改如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

<script>

function showpic(whichpic){

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

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

    placeholder.setAttribute("src",source);

}

</script>

</body>

</html>

这样即实现了查看图片在同一个页面。

界限来介绍几种常用的属性

1.nodeValue属性：它用来得到或者设置一个节点的值

2.childNodes属性：用来获取一个元素的所有子元素

3.nodeType属性：

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

4.firstChild属性：相当于childNodes[0]

5.lastChild属性：相当于childNodes[chlidNodes.length-1]

接下来我们运用以上属性来获取图片的描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

<style type="text/css">

body{

    font-family:"Helvetica","Arial",serif;

    color:#333;

    background-color:#ccc;

    margin:1em 10%;

}

h1{

    color:#333;

    background-color:transparent;

}

a{

    color:#c60;

    background-color:transparent;

    font-weight:bold;

    text-decoration:none;

}

ul{

    padding:0;

}

li{

    float:left;

    padding:1em;

    list-style:none;

}

img{

    display:block;

    clear:both;

}

</style>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

<p id="discription">选择一张图片</p>

<script>

function showpic(whichpic){

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

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

    placeholder.setAttribute("src",source);

    var text=whichpic.getAttribute("title");

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

    discription.firstChild.nodeValue=text;

}

</script>

</body>

</html>

为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的

firstChild值为“选择一张图片”，是一个文本节点。

javascript dom 编程艺术笔记 第四章：图片库的更多相关文章

  1. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  2. JavaScript DOM编程艺术 笔记（四）

    DOM document   object model(map) 家谱树---节点树 父 子  兄弟 元素节点  <div> 文本节点  内容 属性节点   value  src getE ...

  3. JavaScript DOM编程艺术 笔记（一）

    探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...

  4. javascript dom编程艺术笔记之图片库的改进

    dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...

  5. dom编程艺术笔记2--第三章

    DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...

  6. dom编程艺术笔记1--第二章

    第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...

  7. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  8. JavaScript DOM编程艺术 笔记（二）语句操作

    操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...

  9. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. 使用Windows Azure创建Linux系统虚拟机-下

    如何将数据磁盘附加到新虚拟机 您的应用程序可能需要存储数据.要这样设置,您可以将数据磁盘添加到先前创建的虚拟机.要做到这一点,最简单的方法是将空数据磁盘连接到本机. 在Linux上,磁盘资源通常由Az ...

  2. 判断是否已安装.net framework

    1.检测 %SystemRoot%\System 目录下的MSCorEE.dll文件,如果存在,则表明.net framework 已安装. 2.检测一下注册表项的子项: KEY_LOCAL_MACH ...

  3. 局域网yum服务器创建

    yum createrepo createrepo dir 配置httpd发布yum-repo; 在客户端添加yum.rep配置文件;

  4. Open Dynamics Engine for Linux 安装笔记

    下载 在Bitbucket上可以下载到最新的版本(截止目前为0.14版) 或者直接用wget下载 wget "https://bitbucket.org/odedevs/ode/downlo ...

  5. Java获取一个路径下指定后缀名的所有文件

    方法一: http://blog.csdn.net/zjx102938/article/details/8114114 import java.io.File; import java.util.Ar ...

  6. CSS3 keyframes动画实现弹跳效果

    首先,“回到顶部”.“用户反馈”这两个按钮是通过定位放在左下角上. (1)“回到顶部”的按钮只有当滚动条有出现下滑时才出现 (2)“用户反馈”按钮,用户刚打开时会抖动一下,引起用户的注意,然后才定住. ...

  7. android学习二（Activity）

    前面我简单的介绍了android的一些基础知识,当作热身吧,接下来接触android的四大组件的activity活动. 1.活动Activity是是一种保护用户界面的组件,主要用于和用户进行交互. 活 ...

  8. nginx 安装手记 分类： Nginx 服务器搭建 2015-07-14 14:28 15人阅读 评论(0) 收藏

    Nginx需要依赖下面3个包 gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) zlib-1.2.8.tar.gz rewrite 模块需要 pcre 库 ( ...

  9. .ssh 文件夹权限设置问题

    .ssh 文件夹权限 问题 今天遇到了 关于.ssh 文件夹夹 设置什么权限合适问题 :答案是 700 chmod 700 .ssh

  10. POJ 1201 Intervals（图论-差分约束）

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20779   Accepted: 7863 Descri ...