文档章节

JavaScript & DOM 学习笔记(四)

pradosoul
 pradosoul
发布于 2015/12/14 11:29
字数 987
阅读 67
收藏 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
闵行
程序员
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
桌面即时贴软件--GloboNote

GloboNote 是一个桌面记事软件,可帮你创建待办事宜、提醒和其他笔记信息。无限制即时贴的数量,可分组整理,支持搜索,可定制文本的显示格式(字体、颜色和大小),可将某个即时贴始终显示在...

匿名
2013/01/21
6.8K
1
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
JavaScript 服务器页--JSSP

JSSP (JavaScript Server Pages) 可以让你在 Java 的应用服务器上使用 JavaScript 生成网页。支持已有的 Java 包和嵌入式 SQL 命令。包含 Dervish 这个 JavaScript 交互操作包用于简化 Ajax...

匿名
2013/02/11
3.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

使用旁路输出(side output)来拆分和复制流

  我们在处理数据的时候,有时候想对不同情况的数据进行不同的处理,那么就需要把流进行拆分或者复制。 如果是使用filter来进行拆分,也能满足我们的需求,但每次筛选都要保留整个流,然后...

osc_ct0tt1cu
47分钟前
18
0
Azure AD 与 AWS IAM 集成实现SSO—上(Azure部分)

整体的架构和流程是下面这个样子: Azure部分: 登录Azure的portal通过Azure Active Directory创建一个测试用户: 返回Azure Active Directory 创建新的应用程序 Amazon Web Service 搜索 Am...

osc_bgs3qxk5
49分钟前
0
0
Azure AD 与 AWS IAM 集成实现SSO—下(AWS部分)

再回顾一下架构,我们都要做什么,别乱: 看来在AWS上做的工作要多一些。 登录AWS控制台: 进入到IAM这个服务: 在配置提供程序中,选择SAML,提供商名称自定义,比如WAAD,将刚才下载的元数...

osc_ibuoui1c
50分钟前
0
0
AWS DevOps 通过Config自动审计Security Group配置——上篇

这个实验的一个场景是,运维同事设计安全组Security Group的时候,打开了除了HTTP和HTTPS的入口访问权限。其他协议或端口如果打开,除了审计不通过的同时,会自动触发一个函数将它修改成我们...

osc_l330x9u1
51分钟前
3
0
AWS DevOps 通过Config自动审计Security Group配置——下篇

再讲一下背景, 这个实验的一个场景是,运维同事设计安全组Security Group的时候,打开了除了HTTP和HTTPS的入口访问权限。其他协议或端口如果打开,除了审计不通过的同时,会自动触发一个函数...

osc_cudh2wh2
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部