下一道彩虹

飞舞着我的故事

javascript_DOM 编程艺术学习笔记(五)

javascript_DOM 编程艺术学习笔记(五)

一、提高js代码的适用性和扩展性

改进前的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul>
		<li><a href="images/1.jpg" class="popup" title="1">1</a></li>
		<li><a href="images/2.jpg" class="popup" title="2">2</a></li>
		<li><a href="images/3.jpg" class="popup" title="3">3</a></li>
		<li><a href="images/4.jpg" class="popup" title="4">4</a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>

</body>
</html> 
js代码:

window.onload = function() {
	if (!document.getElementById) return false;
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if (!document.getElementsByTagName) return false;
	var links = document.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		if (links[i].className === "popup") {
			links[i].onclick = function() {
				showPic(this);
				return false;
			}
		}
	}
}

function showPic(element) {
	var imgElement = document.getElementById("placeholder");
	imgElement.src = element.href;
	var descriptionNode = document.getElementById("description");
	description.firstChild.nodeValue = element.title;
}
改进后代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imageGelley">
		<li><a href="images/1.jpg" title="1">1</a></li>
		<li><a href="images/2.jpg" title="2">2</a></li>
		<li><a href="images/3.jpg" title="3">3</a></li>
		<li><a href="images/4.jpg" title="4">4</a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 

window.onload = function() {
	if (!document.getElementById) return false;
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById("imageGelley")) false;
	var gelleryNode = document.getElementById("imageGelley");
	var links = gelleryNode.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = function() {	
			return !showPic(this);
		}
	}
}

function showPic(element) {
	if(!document.getElementById("placeholder")) return false;
	if(!document.getElementById("description")) return false;
	var imgElement = document.getElementById("placeholder");
	if(imgElement.nodeName != "IMG") return false;
	imgElement.src = element.href;
	var descriptionNode = document.getElementById("description");
	if(description.firstChild.nodeType == 3){ // 确定是文本节点
		description.firstChild.nodeValue = element.title;
	}
	return true;
}


扩展性测试

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imageGelley">
		<li><a href="images/1.jpg" title="1"><img src="images/1.jpg"></a></li>
		<li><a href="images/2.jpg" title="2"><img src="images/2.jpg"></a></li>
		<li><a href="images/3.jpg" title="3"><img src="images/3.jpg"></a></li>
		<li><a href="images/4.jpg" title="4"><img src="images/4.jpg"></a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 
现在添加一些a标签页会被js执行

2、让function依次运行

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}




阅读更多
文章标签: javascript
个人分类: js基础
想对作者说点什么? 我来说一句

Javascript_DOM编程艺术翻译版.pdf

2018年04月02日 2.63MB 下载

Javascript DOM编程艺术(中文版)

2009年11月17日 12.92MB 下载

没有更多推荐了,返回首页

不良信息举报

javascript_DOM 编程艺术学习笔记(五)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭