JavaScript_03|JavaScript_03 案例研究-图片库

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

图片库 - 锐客网
  • 小草
  • 猫咪
  • 爱情

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

到现在,我们增加了一个id="zwf"的图片,这个图片位于列表项的底部。用来显示我们要显示的图片,当前照片是选取的一个占位符的图片。考虑一下,如何才能让它显示不同的图片呢?可以看到,其中src="https://www.it610.com/article/img/zwf.jpg"。这句是来表示具体显示的图片的,那我们说,如果这个是一个传递过来的其他的图片路径,就可以显示其他的图片了,不是么?我们要做的是,当点击小草这个链接时,底下的占位符图片换成小草的图片。点击猫咪链接时,显示猫咪的链接。那要做的就是点击某一个链接,把这个链接的href属性的值,传递给id="zwf"的src的值,这样,就可以实现我们想要的功能了。
我们来写一个函数。假设定义函数名为:showPic。传递过来的参数定为一个链接的对象pic。函数结构如下:
function showPic(pic){}

现在开始边思考边编写脚本,首先我们需要获取传递过来的链接对象的href的值。通过我们之前所学的知识,可以编写代码
var picHref = https://www.it610.com/article/pic.getAttribute("href");

然后,我们需要获取id="zwf"的img的节点对象
var img = document.getElementById("zwf");

当我们有了img节点对象,有了链接之后,就需要设置这个节点对象的src属性了。
img.setAttribute("src",picHref);

到这里,我们函数脚本就编写完了。如下:
function showPic(pic){ var picHref = https://www.it610.com/article/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事件。
图片库 - 锐客网
  • 小草
  • 猫咪
  • 爱情
JavaScript_03|JavaScript_03 案例研究-图片库
文章图片

这样我们将a链接的点击事件就和我们的脚步关联起来了。里面的这个参数this指的就是当前对象,我们在标签中使用的这个this对象,指定的就是这个节点了。但是这样之后,发现还是新窗口打开的啊,这是因为虽然我们的onclick被调用了,但是链接被点击时的默认行为也被调用。所以我们要阻断这个默认行为被调用。
怎么阻断呢?加入我们给链接增加了onclick函数,然后让这个函数返回true或false的布尔值。这样以来,当这个链接被点击时,如果返回的时true,就代表“这个链接被点击了”。若返回的时false,onclick事件处理函数久认为“这个链接没有被点击”,默认行为就没有被触发,所以我们这里return false;修改后的代码为:
图片库 - 锐客网
  • 小草
  • 猫咪
  • 爱情
JavaScript_03|JavaScript_03 案例研究-图片库
文章图片

至此,我们可以在当前页面点击链接,并将对应图片在当前页面显示了;
现在想想,对这个图片库再做一点优化啊,例如,在链接点击时,图片底下增加一个图片描述怎么样?我们把链接里对应的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 = https://www.it610.com/article/picTitle;

这么写是没有问题的。但是childNodes[0]有个更直观的同义词,就是firstChild。也就是节点下的第一个元素。与之对应的是lastChild。也就是节点下的最后一个元素。可以理解为childNodes[childNodes.length -1]; 以上代码可以写为:
desc.firstChild.nodeValue = https://www.it610.com/article/picTitle;

【JavaScript_03|JavaScript_03 案例研究-图片库】至此所有的脚本都书写完毕:
function showPic(pic){ if(!document.getElementById("zwf")) return false; var picHref = https://www.it610.com/article/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 = https://www.it610.com/article/picTitle; //设置p节点的第一个元素节点的值为获取到的title信息 }

测试一下,成功!

    推荐阅读