DOM javascript学习 1-JavaSript-爱易网页

DOM javascript学习 1

日期：2014-05-16　浏览次数：20417 次

DOM javascript学习一

<!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>
	<script type="text/javascript" src="c.js"></script>	
		<link  rel="stylesheet" href="styles/layout.css"
	type="text/css" media="screen"	/>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul id="imagegallery">
			<li><a href="images/a.jpg"  title="a firework display" class="gallerypic">a</a></li>
			<li><a href="images/b.jpg"  title="a cup of coffee" class="gallerypic">b</a></li>
			<li><a href="images/c.jpg" title="a red red rose" class="gallerypic">c</a></li>
			<li><a href="images/d.jpg" title="" class="gallerypic">d</a></li>
		</ul>
		<p id="description">Choose a image.</p>
		<img id="placeholder" src="images/placeholder.gif" />
		<a href="http://www.baidu.com" class="popUp">popUp</a>
	</body>
	
</html>
</DOCTYPE>

addLoadEvent(prepareLinks);


function prepareLinks(){
	//alert("prepareLinks");
	if(!document.getElementById) {
		return false;
	}
	if(!document.getElementsByName) {
		return false;
	}
	if(!document.getElementById("imagegallery")){
		return false;
	}

	
	var gallery = document.getElementById("imagegallery");

	var links = gallery.getElementsByTagName("a");
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="gallerypic"){
			//alert("gallerypic"+i);
			links[i].onclick = function(){
				//为了让showPic()函数所返回的布尔值发挥作用，要加上return ,传递给浏览器
				return showPic(this);
				//return false;     //是否反回false应该由showPic决定而不是由prepareLinks决定
			}
			//links[i].onkeypress = links[i].onclick;  //键盘事件  配合TAB键使用 一般无需添加，onclick可以识别TAB+ENTER
		}
	} 

/*
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="popUp"){
			//alert("to popUp");
			links[i].onclick = function(){
				popUp(this.getAttribute("href"));return false
			}
		}	
	}
*/
	//alert("prepareLinks over");
}

function showPic(whichPic){
	//salert("showPic");
	//检查是否有placeholder 这个ID的元素,如果没有则让html的href跳转
	if(!document.getElementById("placeholder")){
		alert("there is no element named placeholder");
		return true;
	}
	var source = whichPic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	if(placeholder.nodeName!="IMG"){
		return true;
	}
	
	placeholder.setAttribute("src",source);
	
	//检查是否有description这个id的元素
	if(!document.getElementById("description")){
		return false;
	}

	if(whichPic.getAttribute("title")){
		var text = whichPic.getAttribute("title");
	} else {
		var text = "";
	}
	var description =  document.getElementById("description");
	
	if(description.firstChild.nodeType == 3){
		description.firstChild.nodeValue = text;
	}
	
	return false;
}

function popUp(winURL){
	alert("popUp");
	return true;
	window.open(winURL,"popup","width=320,height=480");
}


//addLoadEvent!  onload函数添加
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof winonload != 'function'){
		window.onload = func;
	}
	else {
		window.onload = function(){
			oldload();
			func();
		}
	}
}

body{
	font-family:"Helvetica","Arial",sans-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;

}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

DOM javascript学习 1

相关资料更多>

推荐阅读更多>