动物像册案例中的代码解释问题整理（需要在具体案例种总结学习）

老年人非常好

已于 2022-09-11 18:00:17 修改

阅读量256

点赞数

文章标签： javascript 前端 html

于 2022-09-10 21:13:38 首次发布

本文链接：https://blog.csdn.net/weixin_54855487/article/details/126799544

版权

暂时发布后续在完善相关问题：

#imagegallery li{ display: inline;/*不会换行*/ list-style: none; } #imagegallery img{ width: 300px; height: 200px;

function showPic(whichpic)：

showPic：：功能调节、大小: 亮度: 对比度:练习、请选择该图片的的名称或诊断

function showPic(whichpic) 代表什么？：括号里应该是一个形参吧

whichpic：为showPic函数的参数

var source = whichpic.getAttribute("href");

source:解释为（河的）源头；水源，引申意思为出处等意思。

getAttribute()：通过元素节点的属性名称获取属性的值。

getAttribute() 方法：返回指定属性名的属性值。这里就是获取href属性的值啊

placeholder.setAttribute("src",source);

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

Placeholder的中文意思就是占位符，用于在会话运行时动态提供输入数据。Placeholder相当于定义了一个位置，在这个位置上的数据在程序运行时再指定。

var desription=document.getElementById("description");

desription：英文单词，名词，作名词时意为“描述，描写；类型；说明书”。

document：Document为计算机术语。每一个载入浏览器的HTML文档都会成为Document 对象。Document：对象使我们可以从脚本（JavaScript）中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

getElementById：为指根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。

desription.firstChild.nodeValue=text;

firstChild：属性可返回文档的首个子节点。

nodeValue：要了解节点的具体信息，可以使用nodeValue这个属性。这个属性的值取决于节点的类型（nodeType）。nodeValue 属性根据节点的类型设置或返回节点的值，在使用这个值之前最好先检测nodeType 属性。

window.οnlοad=function()

加载事件; 页面加载; 载入; 事件; 加载;

var gallery=document.getElementById("imagegallery");

gallery：基本解释 gallery的翻译名词画廊,走廊; (教堂,议院等的)边座; 旁听席; 大批观众。

getElementById，为指根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。

imagegallery：缩略图地址

var links = gallery.getElementsByTagName("a");

nodeName 和 tagName 是获取 HTML 节点名称的属性。tagName 用于获取节点类型为 1 的元素节点的类型。对于属性、注释、文本等其他类型的节点，使用 nodeName 获取节点的名称。

links：联系; 连接; 关系; 纽带; 交通路线; 通讯手段;

var ：为定义变量的意思

案例十六：完成“动物像册”的案例（代码和效果图）。可更改图片数量和名称进行测试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#imagegallery li{
				display: inline;/*不会换行*/
				list-style: none;
			}
			#imagegallery img{
				width: 300px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<h1>动物相册</h1>
		<ul id="imagegallery">
			<li>
				<a href="img/动物1.jpg" title="狗狗">
					<img src="img/动物1.jpg" alt="狗"/>
				</a>
			</li>
			<li>
				<a href="img/动物2.jpg" title="鸡鸡">
					<img src="img/动物2.jpg" alt="鸡"/>
				</a>
			</li>
			<li>
				<a href="img/动物3.jpg" title="狮狮">
					<img src="img/动物3.jpg" alt="狮"/>
				</a>
			</li>
			<li>
				<a href="img/动物4.jpg" title="猫猫">
					<img src="img/动物4.jpg" alt="猫"/>
				</a>
			</li>
		</ul>
		<img id="placeholder" src="img/动物2.jpg" alt="动物相册" />
		<p id="description">选择你喜欢的图片</p>
		<script>
			function showPic(whichpic){
				var source = whichpic.getAttribute("href");
				var placeholder=document.getElementById("placeholder");
				placeholder.setAttribute("src",source);
				var text=whichpic.getAttribute("title");
				var desription=document.getElementById("description");
				desription.firstChild.nodeValue=text;
			}
			window.onload=function(){
				var gallery=document.getElementById("imagegallery");
				var links = gallery.getElementsByTagName("a");
				for (var i=0;i<links.length;i++) {
					links[i].onclick=function(){
						showPic(this);
						return false;
					}
				}
			}
		</script>
	</body>
</html>