首先先建立一个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. 韦东山yy公开课笔记(2)--各种杂的问题

    1. 编译器的版本和glibc库有对应关系吗,如何查看glibc的版本(glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc),编译器是不是只带glibc被编译生成的 . ...

  2. POJ 2533 Longest Ordered Subsequence （LIS DP）

    最长公共自序列LIS 三种模板,但是邝斌写的好像这题过不了 N*N #include <iostream> #include <cstdio> #include <cst ...

  3. Configure the AD FS server for claims-based authentication -zhai zi wangluo

    Applies To: Microsoft Dynamics CRM 2011, Microsoft Dynamics CRM 2013 After enabling claims-based aut ...

  4. Introduction to SignalR -摘自网络

    What is SignalR? ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of ...

  5. JavaScript Garden2

    Types Equality and Comparisons JavaScript has two different ways of comparing the values of objects ...

  6. GitHub初次使用记录（一）

    1.从GitHub上克隆或者复制别人的档案库:

  7. error C2589: “(”: “::”右边的非法标记 error C2059: 语法错误 : “::

    1. 错误输出 ./zlibrary/ui/src/win32/w32widgets/W32VBorderBox.cpp(114) : error C2589: “(”: “::”右边的非法标记    ...

  8. 【开发工具 - Git】之Git常用命令汇总

    本文记录了Git Bash中的常用指令. 1       Git操作 git clone XXXXX:将GitHub项目XXXXX克隆到本地 git remote –v:查看远程连接信息 git ch ...

  9. DELPHI TDownLoadURL下载网络文件

      DELPHI XE6 FMX 附件:http://files.cnblogs.com/xe2011/IDHttp_fmx.7z unit Unit1; interface uses //引用 Vc ...

  10. careercup-递归和动态规划 9.7

    9.7 编写函数,实现许多图片编辑软件都支持的“填充颜色”功能.给定一个屏幕(以二维数组表示,元素为颜色值).一个点和一个新的颜色值,将新颜色值填入这个点的周围区域,直到原来的颜色值全部改变. 类似l ...