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

javascript dom 编程艺术学习

2016-11-22 20:48 337 查看

1.代码分离，分离HTML CSS JAVASCRIPT代码减少CSS 和JAVASCRIPT代码对HTML代码的依赖性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片库</title>
<link rel="stylesheet" href="F:\pagefromtxz\图片库css.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="F:\pictures\人.jpg" title="人" >人</a>
</li>

<li>
<a href="F:\pictures\猫.jpg" title="猫" >猫</a>
</li>

<li>
<a href="F:\pictures\龙.jpg" title="龙" >龙</a>
</li>

<li>
<a href="F:\pictures\鹿.jpg" title="鹿" >鹿</a>
</li>
</ul>
<img id="placeholder" src="F:\pictures\placeholder.jpg" alt="placeholder" width="500" height="400"/>
<p id="description">Choose a picture,please.</p>

<script src="F:\pagefromtxz\图片库js.js" type="text/javascript"></script>
</body>
</html>

1.平稳退化，渐进增强代码理念，利用IF判断。

2.记得引用函数

//共享onload事件的函数

prepareGallery();
addLaodEvent(prepareGallery);
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload !='function'){
window.onload=func;}
else{
window.onload=function(){
oldonload();
func();
}
}
}
function showPic(which){
if(!document.getElementById("placeholder")){return false;}
var source=which.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var text=which.getAttribute("title");
var description=document.getElementById("description")
description.firstChild.nodeValue=text;
}
return true;
}
function prepareGallery(){
//	if(!document.getElementsByTagName){return false;}
//	if(!document.getElementById){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++){
links[i].onclick=function(){
return !showPic(this);
}
}
}

@charset "utf-8";
body{
font-family:"Helvtica","Arial",serif;
color:#333;
background-color:#CCCCCC;
margin: 1em 10%;}/* CSS Document */
h1{
font-family:"Helvtica",serif;
color:#333333;
background-color:transparent;}
a{
color:#CC6600;
background-color:transparent;}
ul{
margin:0 auto;
display:block;
padding:0;}
li{
float:left;
padding:1em;
list-style:none;}
#placeholder{clear both;display:block;}//clear both 清楚前面li的float的影响

#imagegallery{
list-style:none;}
#imagegallery{
display:inline;}
#imagegallery li a img{
border:0;}

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

标签：

相关文章推荐

新的分享

章节导航