JS笔记03
JS图片库
标记
需求效果：
网页中的图片链接显示在网页中的图片框内部而不是打开新的页面
//html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="../js/2019_9_14.js"></script>
</head>
<body>
<ul>
<li>
<a href="../img/001.jpg" title="A001" onclick="showPic(this);return false;">001</a>
</li>
<li>
<a href="../img/002.jpg" title="A002" onclick="showPic(this);return false;">002</a>
</li>
<li>
<a href="../img/003.jpg" title="A003" onclick="showPic(this);return false;">003</a>
</li>
<li>
<a href="../img/004.jpg" title="A004" onclick="showPic(this);return false;">004</a>
</li>
</ul>
<img id="img1" src="../img/x.jpg" alt="my image gallery" />
</body>
</html>
//js部分
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var a = document.getElementById("img1");
a.setAttribute("src",source);
}
childNodes
用于获取一个元素的所有子元素
nodeType
获取节点的type属性
nodeValue
获取节点的属性值
firstChild 和 lastChile 属性
用于提取元素列表的第一个元素和最后一个元素
