你的位置:首页 > Java教程

[Java教程]javascript dom 编程艺术笔记 第四章:图片库


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="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="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 ="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="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 ="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="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值为“选择一张图片”,是一个文本节点。