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

来源：互联网发布：宝鸡软件开发编辑：程序博客网时间：2024/05/16 17:36

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