首先先建立一个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. oracle 对象上锁，不能插入或删除情况

    ora-00054:resource busy and acquire with nowait specified解决方法 当某个数据库用户在数据库中插入.更新.删除一个表的数据,或者增加一个表的主键 ...

  2. 无法连接 mysql

    ==================================================================================================== ...

  3. HDOJ-ACM1021(JAVA)

    题意: 斐波拉契数列的另外一个变型,如果F(n)能被3整除,则输出yes,否则输出no.(n<1000000) 解题思路: 看到(n<1000000)这个条件,有点感觉递归量有点大,因此要 ...

  4. glance image cache

    The Glance Image Cache The Glance API server may be configured to have an optional local image cache ...

  5. CentOS搭建VSFTP

    1.先看看有没有安装 rpm -qa | grep vsftpd 如果没有提示,说明没有安装.接下来,我们安装一个ftp. 2.yum安装vsftpd: yum -y install vsftpd 安 ...

  6. C++：private继承与public继承

    1 private, public, protected 访问标号的访问范围 private:只能由1.该类中的函数.2.其友元函数访问. 不能被任何其他访问,该类的对象也不能访问. protecte ...

  7. 四、XML映射配置文件

    MyBatis的XML配置文件包含了影响MyBatis行为甚深的设置和属性信息.XML文档的高层级结构如下: ----configuration配置 --------properties属性 ---- ...

  8. 修改Tomcat Connector运行模式，优化Tomcat运行性能

    Tomcat是一个小型的轻量级应用服务器,也是JavaEE开发人员最常用的服务器之一.不过,许多开发人员不知道的是,Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运 ...

  9. Android获取ip地址

    原文:http://www.cnblogs.com/android100/p/Android-get-ip.html 1.使用WIFI 首先设置用户权限 <uses-permission and ...

  10. C# WPF 解压缩7zip文件 带进度条 sevenzipsharp

      vs2013附件 :http://download.csdn.net/detail/u012663700/7427461 C# WPF 解压缩7zip文件 带进度条 sevenzipsharp W ...