文档章节

JavaScript & DOM 学习笔记(四)

pradosoul
 pradosoul
发布于 2015/12/14 11:29
字数 987
阅读 56
收藏 3

案例:将整个图片库的浏览连接几种安排在图片库主页里,在用户点击某个图片链接时才把相应的图片传送出来。

    图片素材: 将图片素材 存放入 images文件夹中,并将文件夹与 html 放在同一级目录下。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; 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>

    如果图片已经排好顺序,可以用 有序清单元素 <ol> 来标记这些图片链接。

    这样这个网页就做好了,但是如果想浏览不同的图片,就需要借助 浏览器的后退按钮。可以做如下改进:

        a. 通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域

        b. 点击某个图片的链接时,拦截网页的默认行为(跳转到图片页面),并将图片显示在“占位符”图片

    将代码: <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 插入到 </ul> 后。效果图如下:

    下面要编写 JavaScript 代码来实现 显示图片了。

     建议将 JavaScript 代码写入单独的 .js 文件,在 html 文档中应用。我们新建一个 showPic.js 并放入 html 文档的 相同目录下的 scripts 文件夹中。代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
</head>
<body>
  <h1>Snapshots</h1>
  <ul>
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display" onClick="showPic(this);return false;">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" onClick="showPic(this);return false;">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose" onClick="showPic(this);return false;">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock" onClick="showPic(this);return false;">Big Ben</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  
  <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
function showPic(whichPic) {
	var placeholder = document.getElementById("placeholder");
	var picSrc = whichPic.getAttribute("href");
	placeholder.setAttribute("src", picSrc);
}

    若一个站点用到多个 JavaScript 文件,为了减少对站点的请求次数(提高性能),应该尽量把这些 .js 文件 合并到一个文件中。

    上面代码中使用到了 onclick 事件处理函数,并且在使用函数 showPic(this)时使用了 this 关键字,this 代表了 <a> 这个元素节点。同时我们应该注意到,在showPic()函数后面,我们增加了 return=false; 代码,这是为了 阻止 链接被点击时跳转的默认行为。

    事件处理函数的工作机制:在给某个元素添加了事件处理函数后,一旦事情发生,相应的 JavaScript 代码就会被执行。被调用的 JavaScript 代码可以返回一个值,这个值将被传递给那个事件处理函数。所以上面我们使用 return=false; 来阻止跳转到链接窗口。

    下面我们给 显示的图片加一个文本描述,每次点击图片的时候,将图片的 title 显示出来。在“占位符”图片下面加一个 <p>元素:

<p id="description">Choose a image</p>

    使用 前一篇 中的 childNodes、nodeValue、firstChild 等元素属性来 改变 description。在 showPic.js 的 showPic function 中做出修改。

function showPic(whichPic) {
	//show picture
	var placeholder = document.getElementById("placeholder");
	var picSrc = whichPic.getAttribute("href");
	placeholder.setAttribute("src", picSrc);
	
	//replace description of image
	var text = whichPic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}

如果想让图片库更美观,可以加入以下 css 样式表,并在 <head> 中加入 <link> 标签引入样式。

link rel="stylesheet" type="text/css" href="styles/layout.css"/>
body {
  font-family: "Helvetica","Arial",serif;
  color: #333;
  background-color: #ccc;
  margin: 1em 10%;
}
h1 {
  color: #333;
  background-color: transparent;
}
a {
  color: #c60;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}
ul {
  padding: 0;
}
li {
  float: left;
  padding: 1em;
  list-style: none;
}
img {
  display:block;
  clear: both;
}


© 著作权归作者所有

共有 人打赏支持
pradosoul
粉丝 6
博文 40
码字总数 37445
作品 0
闵行
程序员
day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03js学习笔记03_js的事件、js的BOM、js的DOM ============================================================================= 涉及到的知识点有: ==================================......

黑泽明军
04/19
0
0
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
04/23
0
0
WEB前端学习javascript学习笔记

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/25
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
52分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
2
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部