javascript简单的图片库
2016-10-05 本文已影响0人
我是猪队友Y
为什么使用图片库
在网页中，如果一张网页加载太多的图片，那么这张网页将会显示很慢，而且浪费用户流量，而javasrcipt来创图片库将是最佳的选择：把整个图片库的浏览链接集中安排在图片库主页里，只在用户点击了这个页面里的某个图片链接时才把相应的图片传送给他。
方法
<html>
<head>
<script>
function showPic(whichPic){
var source=whichPic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</head>
<body>
<ul>
//return false的话超链接的默认行为则不起作用
<li ><a href="image/1.jpg" onclick="showPic(this);return false;">1.jpg</a></li>
<li ><a href="image/2.jpg" onclick="showPic(this);return false;">2.jpg</a></li>
<li ><a href="image/3.jpg" onclick="showPic(this);return false;">3.jpg</a></li>
<li ><a href="image/4.jpg" onclick="showPic(this);return false;">4.jpg</a></li>
<li ><a href="image/5.jpg" onclick="showPic(this);return false;">5.jpg</a></li>
<li ><a href="image/6.jpg" onclick="showPic(this);return false;">6.jpg</a></li>
<li ><a href="image/7.jpg" onclick="showPic(this);return false;">7.jpg</a></li>
<li ><a href="image/8.jpg" onclick="showPic(this);return false;">8.jpg</a></li>
<li ><a href="image/9.png" onclick="showPic(this);return false;">9.png</a></li>
<li ><a href="image/10.png" onclick="showPic(this);return false;">10.png</a></li>
</ul>
<image id="placeholder" src="image/11.jpg" alt="this is picture's placeholder">
</body>
</html>
childNodes属性：
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组
nodeType
- 元素节点的nodeType的属性值是1
- 属性节点的nodeType的属性值是2
- 文本节点的nodeType的属性值是3
nodeValue属性
如果想要改变一个文本节点的值就需要使用nodeValue属性。但nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。
用description.childNodes[0].nodeValue来获取文本节点的值而不是用description.nodeVlue;其中childNodes[0]等价于firstChild;而lastChild就是这个子节点中最后一个元素
