JavaScript_03 案例研究-图片库

假设我们要做一个图片库的功能，如果我们将所有的图片，都显示到一个网页中，显然在页面加载的时候速度会很慢。而另一种解决方法是，点击一个链接，打开我们要查看的图片。通常我们会这么写：

这样写，我们可以在当前网页上通过点击小草、猫咪、爱情链接，会在新的窗口中显示对应的图片。如果我们需要切换查看其他的图片时，则需要借助浏览器的回退按钮。这很不方便，那有没有更方便的方法呢，我们想，如果它能在当前这个网页上显示我们想看到的图片就好了。我们给页面做一些优化。在程序末尾来增加一个显示图片的地方。

到现在，我们增加了一个id="zwf"的图片，这个图片位于列表项的底部。用来显示我们要显示的图片，当前照片是选取的一个占位符的图片。考虑一下，如何才能让它显示不同的图片呢？可以看到，其中src="img/zwf.jpg"。这句是来表示具体显示的图片的，那我们说，如果这个是一个传递过来的其他的图片路径，就可以显示其他的图片了，不是么？我们要做的是，当点击小草这个链接时，底下的占位符图片换成小草的图片。点击猫咪链接时，显示猫咪的链接。那要做的就是点击某一个链接，把这个链接的href属性的值，传递给id="zwf"的src的值，这样，就可以实现我们想要的功能了。

我们来写一个函数。假设定义函数名为：showPic。传递过来的参数定为一个链接的对象pic。函数结构如下：

function showPic(pic){
    
}

现在开始边思考边编写脚本，首先我们需要获取传递过来的链接对象的href的值。通过我们之前所学的知识，可以编写代码

var picHref = pic.getAttribute("href");

然后，我们需要获取id="zwf"的img的节点对象

var img = document.getElementById("zwf");

当我们有了img节点对象，有了链接之后，就需要设置这个节点对象的src属性了。

img.setAttribute("src",picHref);

到这里，我们函数脚本就编写完了。如下：


function showPic(pic){
                var picHref = pic.getAttribute("href"); //获取传递过来节点的图片地址
                var img = document.getElementById("zwf");//获取id为zwf的图片
                img.setAttribute("src",picHref);//设置该图片的src为获取到的图片地址
            }

然后我们将脚本放到外部的js文件中，假设是example.js文件，在html中导入。

导入到中之后，我们点击小草链接，发现并没有什么改变啊，还是在新的窗口显示的啊，why？？。那是因为，我们没有关联a链接的点击操作。我们需要给a链接添加onclick事件。onclick是当用户点击时，当然有些浏览器在当用户切换到当前链接，按下键盘键时，也是作为点击操作来看待的。所以我们在a链接后面分别添加onclick事件。

这样我们将a链接的点击事件就和我们的脚步关联起来了。里面的这个参数this指的就是当前对象，我们在标签中使用的这个this对象，指定的就是这个节点了。但是这样之后，发现还是新窗口打开的啊，这是因为虽然我们的onclick被调用了，但是链接被点击时的默认行为也被调用。所以我们要阻断这个默认行为被调用。
怎么阻断呢？加入我们给链接增加了onclick函数，然后让这个函数返回true或false的布尔值。这样以来，当这个链接被点击时，如果返回的时true，就代表“这个链接被点击了”。若返回的时false，onclick事件处理函数久认为“这个链接没有被点击”，默认行为就没有被触发，所以我们这里return false；修改后的代码为：

至此，我们可以在当前页面点击链接，并将对应图片在当前页面显示了；

现在想想，对这个图片库再做一点优化啊，例如，在链接点击时，图片底下增加一个图片描述怎么样？我们把链接里对应的title作为图片的描述信息吧。在做这个之前，我们先了解几个属性

1、childNodes属性
在一棵节点树上。childNodes属性用来获取任何一个元素下的所有子节点。例如，如果我们要查看当前标签中一共有多少个子节点呢？用我们之前学到的知识：

alert(document.getElementsByTagName("body")[0].length)//通常一个网页只有一个body节点

2、nodeType属性
看这个名字我们就知道，获取的就是节点的类型。我们知道网页中包含有元素节点、属性节点、文本节点。nodeType包含有12中可取值，但是最重要的就是我们刚才提到的三种节点。nodeType的返回值呢不是可以读懂的英文或者汉字，返回的是一个数字，其中
元素节点的nodeType属性值为1
属性节点的nodeType属性值为2
文本节点的nodeType属性值为3
我们也举个例子吧：

alert(document.getElementsByTagName("body")[0].nodeType);

我们继续来优化，在图片底部增加描述。增加描述信息如下：

图片描述信息

安装我们之前的考虑，如果要点击链接，将链接中的title替换掉图片的描述信息，也需要三个步骤，第一步获取链接中的title信息。

var picTitle = pic.getAttribute("title");

第二步，获取id为desc的p节点

var desc = document.getElementById("desc");

第三步，将title替换掉p标签的文本节点内容。修改属性值我们知道是setAttribute().设置或得到一个节点的文本节点的值，需要用到nodeValue属性。结合之前所学的知识，设置文本节点可以使用如下脚本：

desc.childNodes[0].nodeValue = picTitle;

这么写是没有问题的。但是childNodes[0]有个更直观的同义词，就是firstChild。也就是节点下的第一个元素。与之对应的是lastChild。也就是节点下的最后一个元素。可以理解为childNodes[childNodes.length -1];以上代码可以写为：

desc.firstChild.nodeValue = picTitle;

至此所有的脚本都书写完毕：

function showPic(pic){
                if(!document.getElementById("zwf")) return false;
                var picHref = pic.getAttribute("href"); //获取传递过来节点的图片地址
                var img = document.getElementById("zwf");//获取id为zwf的图片
                img.setAttribute("src",picHref);//设置该图片的src为获取到的图片地址
                var picTitle = pic.getAttribute("title");//获取传递过来节点的title
                var desc = document.getElementById("desc");//获取id为desc的p节点
                desc.firstChild.nodeValue = picTitle;//设置p节点的第一个元素节点的值为获取到的title信息
            }

测试一下，成功！

JavaScript_03 案例研究-图片库

你可能感兴趣的:(JavaScript_03 案例研究-图片库)