您的位置：首页 > Web前端 > JavaScript

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

2011-08-01 17:14 344 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript css 照片 function xhtml 浏览器

相关文章推荐

新的分享

章节导航