JavaScript DOM编程艺术(第2版)学习笔记2(4~6章应用实例)
本书的第4章使用第3章学到的操作DOM的方法和属性写了一个展示图片的网页,并在第5,6章对代码进行了优化。
第一版,搭建网页的静态结构,包括一级标题<h1>,无序列表清单<ul>,每个列表<li>中又包括了链接<a>,当点击列表文字时会显示链接所指向的图片,这属于浏览器的默认行为。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8"/>
<title>照片库</title>
</head>
<body>
<h1>My Photoes Gallery</h1>
<ul>
<li><a href="pictures/ASH1.png" title="空气弹簧">ASH</a></li>
<li><a href="pictures/LS1.png" title="片弹簧">LS</a></li>
<li><a href="pictures/MN1.png" title="磁负刚度">MN</a></li>
<li><a href="pictures/PAN.png" title="倒立摆">PAN</a></li>
</ul>
</body>
</html>
问题:显示图片后只能通过后退回到列表清单界面,希望实现图片与列表在同一界面,点击列表文字后直接将图片及说明显示在下方。
第二版,点击链接时直接将图片及说明显示在下方
操作步骤分为3步:
1,结构上添加图片占位符和文本占位符
2,js中写一个函数,用链接中的href属性替换图片占位符中的src属性,用链接中的title属性替换文本占位符的值
3,在html中相应节点上添加事件处理函数,应用js中所写的函数,注意需要阻止点击的默认行为
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8"/>
<title>照片库</title>
</head>
<body>
<h1>My Photoes Gallery</h1>
<ul>
<li><a href="pictures/ASH1.png" title="空气弹簧"
onclick="showPics(this);return false;">ASH</a></li>
<li><a href="pictures/LS1.png" title="片弹簧"
onclick="showPics(this);return false;">LS</a></li>
<li><a href="pictures/MN1.png" title="磁负刚度"
onclick="showPics(this);return false;">MN</a></li>
<li><a href="pictures/PAN.png" title="倒立摆"
onclick="showPics(this);return false;">PAN</a></li>
</ul>
<img id="placeholder" src="" alt="该图片已损坏或无法显示"/>
<p id="description">description of picture</p> <script src="ShowPics.js"></script>
</body>
</html>
js代码如下:
function showPics(whichPic){
//获取链接节点,获取图片节点,将链接节点中的href属性赋给图片节点中的src属性
var source=whichPic.getAttribute("href");
var myimage=document.getElementById("placeholder");
myimage.setAttribute("src",source);
//用链接节点中的title属性替换文本节点的值
var mytext=document.getElementById("description");
var context=whichPic.getAttribute("title");
mytext.firstChild.nodeValue=context;
}
注意:
1,在onclick事件中添加 return false;表示默认行为没有被触发即阻止了默认行为。
2,给图片占位符赋值时除了用setAttribute还可以用一种非DOM的方法,直接给元素的属性赋值 myimage.src=source,但这种方法并不适用于所有的属性,一般还是使用setAttribute,适用于所有属性。
3,给文本节点赋值时,需要注意修改的是p节点的第一个子节点,这个节点才是显示在界面上的文字。
4,src和href的区别
src(source)用引入的内容替换当前元素,常用于script,img,frame,
浏览器解析到该元素时会停止渲染知道文件加载完毕,所以将js文件放在body的最后;
href是一种引用,在当前文档与引用资源之间建立起一种联系,常用于a,link,
浏览器解析不会停止,所以用href引用css文件。
问题:
为提高代码的兼容性、可访问性,需要检查js功能被禁用时是否支持平稳退化;js与html是否完全分离;对DOM方法或使用到的元素是否存在进行检测
1,js代码没有与html完全分开,事件处理函数仍在html中
2,缺少必要的测试环节,如html中某些元素不存在
第三版:将事件处理函数从html中独立出来,该函数需要实现的功能:当点击某一链接时,将该链接传递给showPic()函数,去掉点击的默认行为
html代码只需要将onload函数去掉,在ul标签上加id属性
js代码如下:
function showPics(whichPic){
//增加测试
if(!document.getElementById("placeholder"))return false;
//获取链接节点,获取图片节点,将链接节点中的href属性赋给图片节点中的src属性
var source=whichPic.getAttribute("href");
var myimage=document.getElementById("placeholder");
myimage.setAttribute("src",source);
//用链接节点中的title属性替换文本节点的值,能否用nodeValue?可以,但是是p节点的第一个子节点的属性值
if(!document.getElementById("description"))return false;
var mytext=document.getElementById("description");
var context=whichPic.getAttribute("title");
mytext.firstChild.nodeValue=context;
}
function seperateclick(){
//1,测试当前浏览器是否理解DOM方法
if(!document.getElementById)return false;
if(!document.getElementsByTagName)return false;
var gallery=document.getElementById("picturegallery");
if(!gallery)return false;//疑问?能否先赋值再测试
//2,遍历列表中的所有链接,当某一链接被点击时,把这一链接传递给showPics函数,取消默认行为
//先将所有的链接存放在一个数组中
var links=gallery.getElementsByTagName("a");
//循环遍历
for(var i=0;i<links.length;i++){
links[i].onclick=function() {
showPics(this);
return false;
}
}
}
window.onload=seperateclick;
最新文章
- Windows程序设再读笔记02-Unicode
- 【瞎想】TDD与汉字;FDD与英语字母
- NGINX原理分析 之 SLAB分配机制
- SqlSever基础 group by之后,加having 对分组之后的数据在进行处理
- show_space.sql.txt
- 数据库及SQL优化
- UVA - 10048 Audiophobia (Floyd应用)
- Regular Expression(正则表达式)之邮箱验证
- 神经网络的另一种非线性阶跃函数---ReLU函数
- python 几个简单算法详解
- JAVA 8 主要新特性 ----------------(五)Lambda方法引用与构造器引用
- pygme 安装
- 触摸UITextView找到该触摸点的文字
- WebApi的缺点
- 通用型正方教务(通杀各版本)存在注入(不需登陆)+获得webshell+提权内网漫游
- Week12《java程序设计》第12次作业总结
- [洛谷P3261][JLOI2015]城池攻占
- 洛谷P1491 集合位置 [最短路,SPFA]
- PHPExcel 读取的几个例子
- 服务追踪数据使用 RabbitMQ 进行采集 + 数据存储使用 Elasticsearch + 数据展示使用 Kibana