首先先建立一个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的故障检测和重试逻辑

    高度可用的应用程序设计的一个关键点,是利用代码中的重试逻辑正常处理临时中断的服务.Microsoft 模式和实践团队开发的暂时性故障处理应用程序块可协助应用程序开发人员完成此过程.“暂时性”一词表示仅 ...

  2. node系列4

    进程管理 NodeJS可以感知和控制自身进程的运行环境和状态,也可以创建子进程并与其协同工作,这使得NodeJS可以把多个程序组合在一起共同完成某项工作,并在其中充当胶水和调度器的作用.本章除了介绍与 ...

  3. cygwin设置中文

    cygwin\home\username\.bashrc # 让ls和dir命令显示中文和颜色 alias ls='ls --show-control-chars --color' alias dir ...

  4. 小波变换和motion信号处理（一）(转)

    写的太好,不得不转:http://www.kunli.info/2011/02/15/fourier-wavelet-motion-signal-1/ 这是<小波变换和motion信号处理> ...

  5. Kooboo中怎么新增一个关联的Details 动态页面。

    Kooboo中怎么新增一个关联的Details 动态页面. 有几个要点: 1. Sub Page的Parent Page 必须是英文书写.如果是中文会出现找不到页面 500错误 2. 要在Page M ...

  6. hdoj 1231 最大连续子序列

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. HTML5终极备忘大全

    二.文字备忘之标签 HTML5中新增的标签 <article> 定义文章 <aside> 定义页面内容旁边的内容 <audio> 定义声音内容 <canvas ...

  8. Redis_基本类型介绍和指令___3

    1.set(集合) Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O( ...

  9. 从a站点跳转到b站点，通过url的参数判断是否让该用户选择身份

    一.问题的由来 问题是这样子给出来,今天产品那边跟我说,在a网站跳转到b网站时,让用户有一个选择身份的弹窗.因为公司有两个不同站点,你无论在a或者b网站注册后,都可以随便登录这两个站点,进入之后都会有 ...

  10. Linq to SQL 简单增删改查

    用Linq大大减少了对数据库的一般操作所需的编码量.运行下面事例之前,首先建一个叫做Alien的数据库表. CREATE TABLE [dbo].[Aliens](    [Id] [int] IDE ...