由一段 “javascript css 照片切换代码” 引发的深入研究

最新推荐文章于 2019-12-28 15:04:18 发布

何东狮吼

最新推荐文章于 2019-12-28 15:04:18 发布

阅读量740

点赞数

分类专栏： javascript css 文章标签： javascript css 照片 function xhtml 浏览器

本文链接：https://blog.csdn.net/hedong37518585/article/details/6651432

版权

css 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript css</title>
<style>
body,ul,li{
	margin:0;
	padding:0;
}
body{
	padding:50px;
	background:#FEFCE7;
}
ul#photolist{
	/*触发IE hasLayout消除浮动*/
	height:1%;
	list-style-type:none;
}
ul#photolist:after{
	/*ul:after为IE8 chrome firefox等浏览器消除浮动*/
	content:".";
	height:0;
	visibility:hidden;
	clear:both;
	display:block;
}
ul#photolist li{
	float:left;
	padding:0 0 10px 10px;
}
a:link,
a:visited{
	color:#FF9999;
	text-decoration:none;
}
a:hover{
	color:#FF0000;
	text-decoration:underline;
}
img{
	display:block;
}
</style>
<script>
//事件加载函数，把需要加载的函数创建为一个队列，用法 addLoadEvent(firstFunction);addLoadEvent(secondFunction);
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
//insertAfter(新节点,目标节点)
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling);	
	}
}
//创建图片和描述
function createImgAndTxt(){
	if(!document.createElement) return false;
	if(!document.createTextNode) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("photolist")) return false;
	var img = document.createElement("img");
	var p = document.createElement("p");
	var txt = document.createTextNode("大猫咪");
	img.setAttribute("border","0");
	img.setAttribute("id","maomiimg");
	img.setAttribute("alt","大猫咪");
	img.setAttribute("src","http://hi.csdn.net/attachment/201108/1/0_13121966060Q17.gif");
	p.setAttribute("id","phototxt");
	p.appendChild(txt);
	var photolist = document.getElementById("photolist");
	insertAfter(img,photolist);
	insertAfter(p,img);
}
//绑定点击切换图片事件
function bindClick(){
	//不支持DOM的浏览器则不执行下面的脚本
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("photolist")) return false;
	var piclist = document.getElementById("photolist");
	var links = piclist.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		//绑定点击事件到节点列表并取消链接的默认行为
		links[i].onclick = function(){
			return showPic(this);			
		}
	}
}
//切换图片
function showPic(url){
	//如果图片在日后的维护中被删除了，那么就不取消链接应该触发的默认行为，直接跳转到相应图片
	if(!document.getElementById("maomiimg")) return true;
	//var nowsrc = url.getAttribute("href"); 也可以
	var nowsrc = url.href;
	var nowtitle = url.title ? url.title : "";
	var mypic = document.getElementById("maomiimg");
	if(mypic.nodeName != "IMG") return true;
	//mypic.setAttribute("src",nowsrc);
	//mypic.setAttribute("alt",nowtitle);
	mypic.src=nowsrc;
	mypic.alt=nowtitle;
	//如果描述不存在，则不执行下面的代码，直接返回
	if(!document.getElementById("phototxt")) return false;
	var phototxt = document.getElementById("phototxt");
	//phototxt.firstChild.nodeValue = nowtitle; 也可以
	if(phototxt.firstChild.nodeType == 3){
		phototxt.innerHTML = nowtitle;
	}
	return false;
}
//加载创建图片和描述的函数，以及绑定点击事件的函数
addLoadEvent(createImgAndTxt);
addLoadEvent(bindClick);
</script>
</head>

<body>
<h1>我家宝贝大猫咪</h1>
<ul id="photolist">
	<li><a href="http://hi.csdn.net/attachment/201108/1/0_13121899343eyd.gif" title="大猫咪1">大猫咪1</a></li>
	<li><a href="http://hi.csdn.net/attachment/201108/1/0_1312189938a68T.gif" title="大猫咪2">大猫咪2</a></li>
	<li><a href="http://hi.csdn.net/attachment/201108/1/0_1312189941Kf5D.gif" title="大猫咪3">大猫咪3</a></li>
	<li><a href="http://hi.csdn.net/attachment/201108/1/0_1312189944IwRw.gif" title="大猫咪4">大猫咪4</a></li>
</ul>
</body>
</html>

要点：

css js xhtml 表现行为内容分离
DOCTYPE html简写，无论是XHTML1.1还是HTML5，都可以用DOCTYPE html来做文档类型声明
css简写，0px的可以直接写0
style 和 javascript 标签的简写，不需要type等
ul,li去除列表符号
ul通过:after伪类给内部最后添加一个内容为点的元素，设置为块元素，并设置为不可见，来清除浮动，而IE不支持，则通过给ul设置height:0%来触发hasLayout清除浮动

javascript 通过对象检测来向后兼容不支持DOM的浏览器，并检测所需要操作的那个对象是否存在，以便以后忘记js和文档的关联而删除了这部分html，也不至于js出问题，比如默认图片不存在一样可以进行点击浏览其他图片（可分别删除 ul和img 测试）
href不使用#也不使用javascript:;伪协议，做到预留退路，让不支持javascript或者禁用javascript的浏览器一样可以浏览，并且对搜索引擎蜘蛛更加友好
每个函数尽量只有一个入口点和出口点，但也有特殊情况，上面的return false有3次，逻辑关系如果通过层层{}嵌套只是为了只用一次return false显然更加累赘，那既然不能避免多次使用，最好在函数的一开始集中出现，不要在函数中零散分布
javascript的变量尽量小写，因为javascript区分大小写，并且变量名只能是数字英文$和_组成，而函数名想要和变量名区分，最好是在第二个单词开始后的每个单词首字母大写比如showPic，这样的书写习惯有助于区分变量名和函数名
if语句并非一定要用{}花括号给包围起来，只不过这么做是个好习惯有便于阅读和理解，但是代码不是很多的情况下可以简写
window.onload让分离后的javascript代码不管是放在head还是body都没关系，因为不会因为dom还没加载完整而出现问题
如果有多个函数需要绑定到window.onload，可以看此文章 javascript 函数队列加载模块
双重return，return 子函数中返回的布尔值 来返回给当前函数
三元操作符的格式变量 = 条件 ? if true : if false
DOM Core和HTML-DOM的使用方法。推荐使用DOM Core，因为它是由W3C制定的访问和操作标记语言文档的标准API，不仅仅适用于javascript，支持DOM的任何一种语言都可以使用它们（比如PHP操作XML）；而且它的用途也不仅仅是HTML，它们可以用于任何一种标记语言（比如操作XML），常见的DOM Core方法和属性
alert(element.nodeName);返回的总是大写的元素名称，比如P

以上很多js都是实际操作中不需要的，只不过是为了把学到的很多理念和方法用于同一个实例来实践一下，至于如何运用掌握的知识，具体情况具体对待

何东狮吼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
由一段 “javascript css 照片切换代码” 引发的深入研究

javascript cssbody,ul,li{ margin:0; padding:0;}body{ padding:50px; background:#FEFCE7;}ul{ height:1%;/*触发IE hasLayout消
复制链接

扫一扫