第一次进书店买书，就被《JavaScript DOM编程艺术》一书所吸引，这是一本介绍JavaScript入门的神书，
内容介绍：
前面几章介绍JavaScript的历史
后面才是实例，
如HTML代码：
|
<!doctype html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Author"content="william">
<metaname="Keywords"content="dom code art">
<metaname="Description"content="">
<linkrel="stylesheet"type="text/css"href="css/layout.css">
<scriptsrc="js/showPic.js"></script>
<title>图片库</title>
</head>
<body>
<h1>Photos<h1>
<ul>
<li><ahref="images/1.jpg"title="菊花"οnclick="showPic(this);return false;">第一张</a></li>
<li><ahref="images/2.jpg"title="沙漠"οnclick="showPic(this);return false;">第二张</a></li>
<li><ahref="images/3.jpg"title="八仙花"οnclick="showPic(this);return false;">第三张</a></li>
<li><ahref="images/4.jpg"title="灯塔"οnclick="showPic(this);return false;">第四张</a></li>
</ul>
<imgid="zhanweifu"src="images/zhanwei.jpg"alt="占位"/>
<pid="description">选择一张照片</p>
</body>
</html>
|
2.CSS
2.1整篇图片库css代码，这里不对css学习做过多总结，css需要另行总结，只是放出代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
body{
font-family:"Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin:1em10%;
}
h1{
color:#333;
background-color:transparent;
}
a:link{color:blue}
a:visited{color:black}
a:hover{color:red}
a:active{color:green}
/*css伪类的运用*/
/*link表示默认，visited表示访问过后，hover表示经过时，active表示点击时*/
a{
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both
}
|
3.JS
3.1showPic函数
1 function showPic(whichPic){ //whichPic是形参，看具体调用的地方 2 //修改占位符图片 3 var source = whichPic.getAttribute("href"); 4 var place = document.getElementById("zhanweifu"); 5 place.setAttribute("src",source); 6 //修改照片下方描述性文字 7 var text = whichPic.getAttribute("title") 8 var txt = document.getElementById("description"); 9 //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]并且更加直观 于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素 10 txt.firstChild.nodeValue = text ; 11 }a.这里接触到了getAttribute()和setAttribute()；前者获取元素属性，后者可以获取并修改元素属性值
b.childNodes nodeType和nodeValue三个属性
childNodes属性可以获取任何有一个元素的所有子元素，它是一个包含这个元素所有子元素的数组；如我想获取body元素的所有子元素
1 var body_element = document.getElementsByTagName("body")[0];//这里[0]是body的第一个元素整篇html也且只有一个用[0]是获取body元素，不用的话只是获取一个空的数组
2 body_element.childNodes
nodeType 获取元素节点语法结构：node.nodeTye如alert(body_element.nodeType )会显示1；
一般js中只有3种具有实用价值的nodeType属性：元素节点的属性值是1；属性节点的属性值是2；文本节点的属性值是3。
nodeValue 用来改变文本节点的值，它用来得到（或设置）一个节点的值，语法结构：node.nodeValue如p[0].nodeValue这里p是元素但是想要获取文本，那么包含在p元素里面的文本节点是另一种节点，如果想要得到内容那么肯定要求p的第一个子节点的nodeValue，★当然第一个也可以用firstChild也表示 p[0]和p.firstChild是等价的
那么以上这些可以实现一个简单的图片库效果，但是还是存在很多不规范的地方，比如是否支持平稳退化、结构和样式是否分离、是否向后兼容？性能考虑，压缩脚本等都可以考虑进来更好的完善图片库。
学习后，有了图片库改进版。第五章主要强调平稳退化，结构样式分离，向后兼容，性能考虑等最佳实践
1.改进版HTML代码
<!--第一版本代码；1、支持平稳退化，即如果浏览器禁用了js，那么用户依然能够访问这些图片而不是404只是体验有所下降-->
<!--第一版本代码；2、js代码和html标记未分离，js onclick还在行间，那么使得js和a标签分离需要一个“挂钩”，此时我们给整个ul清单设置一个专有id如 id="gallerypic"-->
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content="william"> 6 <meta name="Keywords" content="dom code art"> 7 <meta name="Description" content=""> 8 <link rel="stylesheet" type="text/css" href="css/layout.css"> 9 <script src="js/showPic.js"></script> 10 <title>图片库</title>11 </head>12 <body> 13 <!--第二版V2.0 改进点：使得HTML标记和JavaScript代码进行分离--> 14 15 <h1>Photos<h1> 16 <ul id="gallerypic"><!--挂钩，方便统一操作图片清单--> 17 <li><a href="images/1.jpg" title="菊花" >第一张</a></li>18 <li><a href="images/2.jpg" title="沙漠" >第二张</a></li>19 <li><a href="images/3.jpg" title="八仙花">第三张</a></li> 20 <li><a href="images/4.jpg" title="灯塔" >第四张</a></li>21 </ul> 22 <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/> 23 <p id ="description">选择一张照片</p> 24 </body> 25 </html>取消了行内onclick事件并赋予ul一个id以便统一操作ul下的链接，那么我们需要添加事件处理函数
新建函数prepareGallery将有关操作关联到onclick上
- 函数需要检查浏览器是否理解getElementsByTagName。
- 函数需要检查浏览器是否理解getElementByID。
- 函数需要检查当前网页是否存在id为imagegallery的元素
- 遍历imagegallery元素中的所有链接
- 设置onclick事件，让他在有关链接被点击时完成一下操作：1，将链接作为参数传给showPic函数；2，取消链接的默认行为不让浏览器打开链接
-
改版后的js代码新增了prepareGallery函数如下所示：
1 function showPic(whichPic){ //whichPic是形参，看具体调用的地方 -
2 //修改占位符图片 -
3 var source = whichPic.getAttribute("href"); -
4 var place = document.getElementById("zhanweifu"); -
5 place.setAttribute("src",source); -
6 //修改照片下方描述性文字 -
7 var text = whichPic.getAttribute("title") -
8 var txt = document.getElementById("description"); -
9 //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]并且更加直观 于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素 -
10 txt.firstChild.nodeValue = text ; -
11 } -
12 -
13 -
14 //第二版V2.0 分析：如果使得html和js分离 那么我需要把onclick事件与id进行一个绑定需要进行如下代码编写: -
15 //1.检查浏览器是否支持getElementsByTagname、getElementByID; -
16 //2.判断网页是否存在id="gallerpic"的这样一个元素； -
17 //3.遍历gallery元素中的所有链接; -
18 //4.设置onclick事件让他在相关链接被点击时，将此链接作为参数传递给showPic并且取消链接被点击时的默认行为不打开新的窗口. -
19 function prepareGallery(){ -
20 if(!document.getElementsByTagName){return false;} -
21 if(!document.getElementById){return false;} -
22 if(!document.getElementById("gallerypic")){return false;} -
23 var gallery=document.getElementById("gallerypic"); -
24 var links = gallery.getElementsByTagName("a"); -
25 for(var i = 0;i<links.length;i++){ //for语句条件之间是分号不是逗号 要注意 -
26 links[i].onclick = function(){ -
27 showPic(this);return false; -
28 } -
29 } -
30 } -
31 //下面是执行这个prepareGallery函数，需要等到页面加载完onload之后，最简单的办法是定义一个匿名函数诸如 -
32 //window.onload = function(){ -
33 // firstFunction(); -
34 // secondFunction(); -
35 //} -
36 //最佳的办法是调用addLoadEvent函数 -
37 function addLoadEvent(func){ -
38 var oldonload = window.onload; -
39 if(typeof window.onload != 'function'){ -
40 window.onload = func; -
41 }else{ -
42 window.omload = function(){ -
43 oldonload(); -
44 func(); -
45 } -
46 } -
47 } -
48 addLoadEvent(prepareGallery) -
其实jQuery就是JavaScript的库。
扫一扫
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
