JavaScript DOM编程艺术小记（五）---第四章-JavaScript图片库(实例)

最新推荐文章于 2024-04-24 12:25:21 发布

reborn_tou

最新推荐文章于 2024-04-24 12:25:21 发布

阅读量210

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/reborn_tou/article/details/79607755

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

^编写一个优秀的标记文件

^编写一个JavaScript函数以显示用户想要查看的图片

^由标记触发函数调用

^使用几个新方法扩展这个JavaScript函数

以下代码结合三四章内容

HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Web</title>
</head>

<body>
	<h1>Reborn</h1>
    <ul>
①    	<li><a href="想吃的3.jpg" οnclick="showPic(this);return false;" title="My cute">BlueSnow</a></li>
    	<li><a href="想吃的4.jpg" οnclick="showPic(this);return false;" title="Kawai yome">AOYuKi</a></li>
    	<li><a href="野良神.jpg" οnclick="showPic(this);return false;" title="naragami">ナラガミ</a></li>
    </ul>
②   <img id="placeholder" src="2.27.jpg" alt="description">
③   <p id="description">Select an image</p>    
④   <script src="showPic.js"></script>
    <!--<a href="http://www.baidu.com" οnclick="return false;">Click</a>-->
</body>
</html>

注：

① onclick,事件处理函数给链接添加行为，①中调用了showPic()函数，this指向当前所在元素节点，return false 可以使这个链接的默认行为没有被触发

② 图片占位符，用来替换想要展示的图片

③ 文字占位符，用来替换想要展示的描述

④ 调用JS

JS文件

// JavaScript Document
function showPic(passNode){
①		var image = passNode.getAttribute("href");
②		var placeholder = document.getElementById("placeholder");
③		placeholder.setAttribute("src",image);
④		var showTitle = passNode.getAttribute("title");
⑤		var description = document.getElementById("description");
⑥		description.firstChild.nodeValue = showTitle;
	}

① getAttribute()获取想展示的图片

② getElementById()获取占位符节点元素对象

③ 通过setAttribute替换占位符图片

④ getAttribute()获取想展示的描述

⑤ getElementById()获取占位符节点元素对象

⑥ 通过占位符节点.firstChid获取第一个子元素 nodeValue属性刷新这段描述

这是我看完之后自己对着图敲出来的，敲的过程中有一个地方出错，onclick加上之后点击链接依然跳转新窗口展现图片，我第一反应是不是return false 出现了问题，但是在HTML最后我加上测试，确定return false是正确的，那就是写的showPic()函数出现问题了，然后发现getElementById前忘了document，虽然是很初级的新手问题，但是还是写出来为了以后可能会出现这类问题的朋友们吧~

为了让图片库更美观可以自行使用样式表。