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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>学习日记</title>
  6. </head>
  7.  
  8. <body>
  9. <h1>hello picture</h1>
  10. <ul>
  11.     <li>
  12.     <a href="images/guitar.jpg" title="one guitar">guitar</a>
  13.     </li>
  14.     <li>
  15.     <a href="images/back.jpg" title="boy'back">back</a>
  16.     </li>
  17.     <li>
  18.     <a href="images/hair.jpg" title="girl'hair">hair</a>
  19.     </li>
  20.     <li>
  21.     <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a>
  22.     </li>
  23. </ul>
  24. <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
  25.  
  26. </body>
  27. </html>

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

代码更改如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>学习日记</title>
  6. </head>
  7.  
  8. <body>
  9. <h1>hello picture</h1>
  10. <ul>
  11.     <li>
  12.     <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
  13.     </li>
  14.     <li>
  15.     <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>
  16.     </li>
  17.     <li>
  18.     <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>
  19.     </li>
  20.     <li>
  21.     <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
  22.     </li>
  23. </ul>
  24. <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
  25.  
  26. <script>
  27. function showpic(whichpic){
  28.     var source=whichpic.getAttribute("href");
  29.     var placeholder=document.getElementById("placeholder");
  30.     placeholder.setAttribute("src",source);
  31. }
  32. </script>
  33. </body>
  34. </html>

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

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

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

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

3.nodeType属性：

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>学习日记</title>
  6. <style type="text/css">
  7. body{
  8.     font-family:"Helvetica","Arial",serif;
  9.     color:#333;
  10.     background-color:#ccc;
  11.     margin:1em 10%;
  12. }
  13. h1{
  14.     color:#333;
  15.     background-color:transparent;
  16. }
  17. a{
  18.     color:#c60;
  19.     background-color:transparent;
  20.     font-weight:bold;
  21.     text-decoration:none;
  22. }
  23. ul{
  24.     padding:0;
  25. }
  26. li{
  27.     float:left;
  28.     padding:1em;
  29.     list-style:none;
  30. }
  31. img{
  32.     display:block;
  33.     clear:both;
  34. }
  35. </style>
  36. </head>
  37.  
  38. <body>
  39. <h1>hello picture</h1>
  40. <ul>
  41.     <li>
  42.     <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
  43.     </li>
  44.     <li>
  45.     <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>
  46.     </li>
  47.     <li>
  48.     <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>
  49.     </li>
  50.     <li>
  51.     <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
  52.     </li>
  53. </ul>
  54. <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
  55. <p id="discription">选择一张图片</p>
  56.  
  57. <script>
  58. function showpic(whichpic){
  59.     var source=whichpic.getAttribute("href");
  60.     var placeholder=document.getElementById("placeholder");
  61.     placeholder.setAttribute("src",source);
  62.     var text=whichpic.getAttribute("title");
  63.     var discription=document.getElementById("discription");
  64.     discription.firstChild.nodeValue=text;
  65. }
  66. </script>
  67. </body>
  68. </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. 新花生壳内网版2.3 + Tomcat7 搭建自己的网站（2015.01.21）

    网上很多资料,问题主要是出在 tomcat 的访问上而已: 如下总结一下: 首先在 花生壳 官网(http://hsk.oray.com/)注册一个帐号,每个帐号可以领取一个免费域名 然后下载安装新版 ...

  2. HW3.12

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. HDOJ-ACM1022(JAVA)

    这道题:是模拟出栈,判断出栈顺序的可能性. 基本上大家的做法都是直接模拟栈的出栈入栈并将顺序用0,1序列来表示,我暂时没想到什么好的思路. import java.util.*; import jav ...

  4. Linux 常见文件打包压缩命令

    .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!)       参数说明:         - ...

  5. MySql避免全表扫描

    对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描: · 使用ANALYZE TABLE tbl_name为 ...

  6. 问题-[Delphi7]程序在WIN7电脑上的日期错误处理

    问题现象:我想大家都遇到过在XP上没有问题的日期格式,到了WIN7之后就不行了. 问题原因:因为在WIN7中增加了新的日期格式,但是老的DELPHI未处理(如果我说错了,希望高人指点). 问题处理: ...

  7. mongodb的查询操作符

    本文地址:http://www.cnblogs.com/egger/archive/2013/05/04/3059374.html   欢迎转载 ,请保留此链接! 官方参考: http://docs. ...

  8. [三]ajax重要属性

    readState:0初始化,1建立,2已接收,3处理中,4请求完成,响应就绪 status:200成功,404未找到页面失败 onreadystatechange:状态改变自动调用的方法 respo ...

  9. Jquery常用方法篇（一）

    1.add方法:将匹配的元素添加到当前的jquery对象集合中. 语法 add(expr,[context]) 参数1表示 用于匹配元素选择器(待添加的对象),或者用于动态生成的HTML代码(字符串) ...

  10. POJ3111 K Best

    Description Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband ...