JavaScript图片库(简单的应用案例)

这个图片库小例子的效果如图所示，点击网页上某个图片链接时你将看到两种效果：占位符图片呗替换成这个链接所指向的图片，同时描述性文字也被替换为这个链接的title属性值。

 

 

利用一个简单的图片库应用案例，介绍DOM的几个属性。

首先为图片创建一个链接清单，我们使用无序清单元素<ul>,图片集保存在images里。通过增加一个占位符图片在主页上为图片预留一个浏览区域<img id="placeholder" src="img/timg.jpg" alt="my image gallery"/>。

然后，我们要求点击某个链接的时候留在这个网页，同时看到点击的那张图片和原有的图片清单。

• getAttribute：它是一个函数，用来获取元素的属性，getAttribute方法不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用。object.getAttribute(attribute)，它的参数只有一个，就是你打算查询的属性的名字。
• setAttribute：它允许我们修改属性节点的值，与getAtrribute一样，setAtrribute也只能用于元素节点。object.setAtrribute(attribute,value)

利用上面两种方法我们写一个函数，函数的名字叫showPic，参数叫whichPic。函数的作用有两个：

一、通过改变占位符图片的src属性将其替换为参数图片。

二、把图片下方的文本同时替换为那个图片连接的title属性值。

所以实现第一步后函数为：

function showPic(whichPic){
var source=whichPic.getAttribute('href');
var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);
}

接下来我们扩展这个函数，要想把图片下方的文本替换为title属性值，并让它和相应的图片一起显示在网页上。

首先获取whichPic对象的title属性值，并把它存到text变量并获取元素节点<p></p>：

var text=whichPic.getAttribute（'title'）;

var description=document.getElementById('description');

接下来实现本文的切换，如果想得到或改变一个本文节点的值，那就使用DOM提供的nodeValue属性：<p>是一个元素节点，它本身的nodeValue是空值，而我们需要的是<p>的第一个子节点，也就是它包含的文本节点。description.childNodes[0].nodeValue,也可以写成description.firstChild.nodeValue。

然后我们用text变量去刷新id值等于description的<p>元素的第一个子节点的nodeValue属性值：

descriptipn.firstChild.nodeValue=text;

扩展后的函数为：

function showPic(whichPic){
var source=whichPic.getAttribute("href");
var text=whichPic.getAttribute('title');
var descriptipn=document.getElementById('description');
var placeholder=document.getElementById('placeholder');
placeholder.setAttribute('src',source);
descriptipn.firstChild.nodeValue=text;
}

接下来给图片列表的链接添加行为，也就是事件处理函数（在特定事件发生时调用特定的JavaScript代码），我们这里用onclick点击事件。

当我们把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作showPic函数的参数，这个时候就用this，表示这个<a>元素节点。

现在有一个问题，我们点击链接时，不仅showPic函数被调用，链接点击的默认行为也会被调用，也就是页面还会跳转到图片查看窗口，所以我们要阻止默认行为。

事件处理函数的工作机制中，在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后，如果相应JavaScript代码返回true，onclick事件处理函数就会认为这个链接被点击了，同样的若返回false即会认为链接未被点击。所以在onclick所触发的代码中加上return false；就可以防止被带到图片查看窗口。

 

附：childNodes属性

childNodes属性用来获取任何一个元素的所有子元素。element.childNodes

它返回的是一个数组，所以用数组的length属性就能知道它包含的元素的个数。childNodes属性返回的数组包括所有类型的节点，而不仅仅是元素节点。空格，换行符都会被解释为节点。

每个节点都有nodeType属性：node.nodeType

元素节点的nodeType属性是1.

属性节点的nodeType属性是2.

文本节点的nodeType属性是3.