文档章节

JavaScript & DOM 学习笔记(四)

pradosoul
 pradosoul
发布于 2015/12/14 11:29
字数 987
阅读 57
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

LSM-Tree 大数据索引技术

一、LSM-Tree概述 核心思想就是放弃部分读能力,换取写入能力的最大化。LSM-Tree ,这个概念就是结构化合并树(Log-Structured Merge Tree)的意思,它的核心思路其实非常简单,就是假定内存...

PeakFang-BOK
17分钟前
0
0
vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新...

peakedness丶
23分钟前
0
0
Weblogic补丁升级操作步骤

linux平台: weblogic1036 1:停止weblogic服务 2:打FMJJ补丁 a:获取weblogic_home目录并执行命令:export weblogic_home="/weblogic/wls1036_x64",(此目录一般为目录“user_projects”上...

fang_faye
36分钟前
0
0
04-《Apache Tomcat 9 User Guide》之部署项目

1.Introduction Deployment is the term used for the process of installing a web application (either a 3rd party WAR or your own custom web application) into the Tomcat server. 部......

飞鱼说编程
37分钟前
0
0
一位十年的老码农他眼中的区块链

大家可能已经听说过比特币、莱特币、以太币等等,以及它们作为一种新货币在市场上的潜力。 有趣的是,很多投资比特币的人也提到了区块链之类的东西。 显然,这项技术是比特币等其他东西的"基...

小刀爱编程
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部