html用javascript经过时修改图片路径里的某部分_和大猫咪一起学JavaScript（3）-CSDN博客

本文链接：https://blog.csdn.net/weixin_29935511/article/details/112085011

900年前的风雨大作的一天，爱国诗人陆游抱着大猫咪烤着火，写下诗句：

溪柴火软蛮毡暖，我与狸奴不出门。

在今天这样一个风雨大作的周末，最适合待在家里和大猫咪一起学JavaScript了。

今天，我们将利用JavaScript建立一个图片库：我们把整个图片库的浏览链接集中安排在图片库的主页里，当用户点击了主页里的某个图片链接时，会相应的把图片传给他。首先，我们还是把本文涉及到的名词和定义进行梳理：

名词与定义

href (Hypertext Reference)：指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。href的目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。

src （source）：指向外部资源的位置，指向的内容将会应用到文档中当前标签所在的位置。

alt属性：<img>中的属性，当图片无法正常显示时用来代替的文本。

事件处理函数：用于在特定事件发生时调用特定的JavaScript代码。例如，鼠标指针悬停于某元素时触发动作，需调用onmouseover函数；鼠标指针离开某元素时触发动作，需调用onmouseout函数。如果要在用户点击某个链接时触发一个动作，我们使用onclick函数。

this关键字：在Javascript中，当一个函数被调用时，会创建一个活动记录（也称为执行上下文）。它包含函数在哪里调用、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到。this关键字是在运行时进行绑定的，与函数声明的位置没有任何关系，它指向什么完全取决于函数在哪里被调用。

<script>标签： 通常放置在一个网页的头部标签<head>内，用于链接外部JS文件外部资源标签。最常见的用途是链接外部JS。

onload事件处理函数：onload 事件会在页面或图像加载完成后立即发生。

添加事件处理函数的语法：event="JavaScript statement(s)" 注意JavaScript代码包含在一对引号之间。我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。

return false语句：通常让函数返回false，是想当不满足或满足一定条件时，阻止默认默认事件的发生（即继续执行下面的代码），但是注意：return false只在当前函数有效,并不会影响其他外部函数的执行。今天的应用，是在onclick事件中，阻止用户点击链接后，通过窗口弹出目标图片。

childnodes属性：可以用来获取一个节点树上任何一个元素的所有子元素。

nodeType属性：用于获取节点的属性。

nodeValue属性：用于获取节点属性的值。不过，获取<p>中的文本节点时，文本实际是在它的第一个子节点的nodevalue属性值。通过description.childNode[0].nodeValue可以获取。注意，setAttribute不能设置容器类标记的文本，此时只能用nodeValue。

link rel： 是<link>标签的rel属性，指示被链接的文档是一个样式表。

以下开始演示图片库的示例。

1. 标记

现在我们开始着手建立JavaScript图片库。

首先，我们来为这些图片创建一个链接清单。

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8"/>
	<title>Image Gallery</title>	
  </head>
  <body>
	<h1>Snapshots</h1>
	<ul>
		<li>
			<a href="images/fireworks.jpg"title="A fireworks display">Fireworks</a>
		</li>
		<li>
			<a href="images/coffee.jpg"title="A cup of black coffee">Coffee</a>
		</li>
		<li>
			<a href="images/rose.jpg"title="A red, red rose">Rose</a>
		</li>
		<li>
			<a href="images/bigben.jpg"title="The famous clock">Big Ben</a>
		</li>
	</ul>	
</body>
</html>

我们将这些代码保存到gallery.html文件，并把图片集中保存在目录images里。images目录和gallery.html文件位于同一个目录下。