《DOM Scripting》学习笔记-——第四章 案列分析 JS美术馆（点击链接到图片）
实现效果：点击图片链接，可以在当前网页显示图片，并且显示图片标题。
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<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" onclick="showPic(this);return false" title="A fireworks display"> Fireworks</a></li>
<li><a href="images/coffee.jpg" onclick="showPic(this);return false" title="A cup of black coffee">Coffee</a></li>
<li><a href="images/rose.jpg" onclick="showPic(this);return false" title="A red, red rose">Rose</a></li>
<li><a href="images/bigben.jpg" onclick="showPic(this);return false" title="The famous clock"> Big Ben</a></li>
</ul>
<img id="placeholder" src="data:images/placeholder.gif"alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
思路：
1、为每张图片分别创建一个网页，如果都放在一个网页里，数据量大，下载速度会变慢。
2、当点击某个连接时，可以留在这个网页而非转到另一个窗口。并且可以看到原有的图片清单。
3、为了实现第二条效果，需要增加一个“占位符”图片。“占位符”在这个主页上为图片预留一个浏览区域。在点击某个链接时，要拦截其默认行为。在点击某个链接时，把“占位符”图片替换为与那个连接相对应的图片。
js代码：
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
1、 此方法的两个参数：（1）打算对之进行设置的属性（src）。（2）这个属性的新属性值（保存在source中）。
2、 Whichpic代表了一个元素节点。即某个图片的<a>元素。
3、 为什么不用placeholder.src=source（老方法）.setAttribute（）方法是“第一级DOM”的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置，并且可移植性好，老方法只适用于web文档，DOM适用于任何一种标记语言。（DOM是一种适用于多种环境和多种程序设计语言的通用型API）.
4、 对js函数进行功能扩展，使得在点击相应的图片链接时，图片对应的文本也可以改变。同样，设置含有两个参数的函数（1）打算对之进行设置的属性（p的文本节点的内容）。（2）这个属性的新属性值（保存在text中）。用到的属性：childNodes;nodeType;nodeValue;firstChild;lastChild。
《DOM Scripting》学习笔记-——第四章 案列分析 JS美术馆（点击链接到图片）的更多相关文章
- [Python学习笔记][第四章Python字符串]
2016/1/28学习内容 第四章 Python字符串与正则表达式之字符串 编码规则 UTF-8 以1个字节表示英语字符(兼容ASCII),以3个字节表示中文及其他语言,UTF-8对全世界所有国家需要 ...
- o'Reill的SVG精髓（第二版）学习笔记——第四章
第四章:基本形状 4.1线段 SVG可以使用<line>元素画出一条直线段.使用时只需要指定线段起止点的x和y坐标即可.指定坐标时可以不带单位,此时会使用用户坐标,也可以带上单位,如em. ...
- 《metasploit渗透测试魔鬼训练营》学习笔记第四章—web应用渗透
继续来学习metasploit...记好笔记是很重要的,下面开始正文: 二.WEB应用渗透技术 1.WEB应用渗透基础知识 先介绍WEB应用攻击的主要类型(大致介绍,具体请自行查 ...
- Java 学习笔记 ------第四章 认识对象
本章学习目标: 区分基本类型与类类型 了解对象与参考的关系 从打包器认识对象 以对象观点看待数组 认识字符串的特性 一."=" 和 "==" 当=用于基本类型时 ...
- The Road to learn React书籍学习笔记(第四章)
高级React组件 本章将重点介绍高级 React 组件的实现.我们将了解什么是高阶组件以及如何实现它们.此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能. 引用 DOM ...
- c语言学习笔记第四章——字符串和格式化输入、输出
B站有视频演示 本章学习printf函数的输入输出,字符串的定义与实用. 字符串 字符串(character string)是一个或多个字符的序列,如下所示: "Zing went the ...
- javascript dom 编程艺术笔记 第四章：图片库
首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- [core java学习笔记][第四章对象与类]
4.3 用户自定义类 4.3.1 类数组的声明 需要两次new Employee[]=staff=new Employedd[3]; staff[0]=new Employedd(参数列表); sta ...
- 【数据分析 R语言实战】学习笔记 第四章 数据的图形描述
4.1 R绘图概述 以下两个函数,可以分别展示二维,三维图形的示例: >demo(graphics) >demo(persp) R提供了多种绘图相关的命令,可分成三类: 高级绘图命令:在图 ...
随机推荐
- Base64字符 转图片乱码问题
网站做了个随机验证码图片功能,遇到了一个奇怪的问题——Base64字符集转图片乱码问题,问题描述如下 1.用java画笔将随机验证码绘制成图片 2.再将图片的二进制代码转换成Base64字符集,返回给 ...
- python文件读取操作
#IO操作 #模拟账号登录 data = [] #0=userName 1=password obj = open("login.txt","r") for l ...
- C#中List按特定字段排序
有一个类,如Student,有学号.数学成绩.语文成绩, 存在List列表中,要将List按数学成绩排序,怎么办呢? List<Student> scores=GetScores(); s ...
- JVM-垃圾收集算法
新生代:复制算法,IBM研究过,约98%对象是“朝生夕死”,所以不需要按照1:1来划分:HotSpot中默认是8:1:1,即每次新生代可用空间为90%,只有10%会被“浪费”, 当Survivor空间 ...
- Javascript神器之webstorm
推荐个编辑器主题下载的一个网站. Color Themes 网址:http://color-themes.com [点这里直接跳转] 但是,只支持几个编辑器. 各种颜色搭配的主题,随你选择!我个 ...
- 重置SQLSERVER表的自增列，让自增列重新计数
SQL的自增列挺好用,只是开发过程中一旦删除数据,标识列就不连续了 写起来 也很郁闷,所以查阅了一下标识列重置的方法 发现可以分为三种: --- 删除原表数据,并重置自增列truncate table ...
- 京东饭粒捡漏V1.15
20181105 更新 V1.151.部分BUG修复: 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用户监控抢购商品,有库存的时候进行抢单,主要是通过添加商品ID ...
- 视频流PS，PS封装H264
出处: ISOIEC 13818-1 PS流: PS流由PSGOP组成,每个PSGOP是由I帧起始的多帧集合,每个GOP之间没有相互依赖信息,可以剪切拼接. | PSGOP0 | PSGOP1 | P ...
- subprocess模块 sys模块
常用模块学习—subprocess模块详解 要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用 ...
- Redis单线程架构
参考链接: http://blog.csdn.net/qqqqq1993qqqqq/article/details/77538202 单线程模型: redis中的数据结构并不全是简单的kv,还有lis ...