通过简单的JavaScript 图片库案例来讲解函数应用及扩展。
这是一个图片库小页面，通过单击1、2、3、4在原来的页面变换图片和描述。
下面是HTML标签：
1 <body> 2 <h1>Snapshots</h1> 3 <ul> 4 <li><a href="images/1.jpg" onClick="showPic(this); return false;" title="one">1</a></li> 5 //href="images/1.jpg" onClick="showPic(this); return false;" title="one" 6 //这些都是接来下要通过Javascript调用的标签属性 7 <li><a href="images/2.jpg" onClick="showPic(this); return false;" title="two">2</a></li> 8 <li><a href="images/3.jpg" onClick="showPic(this); return false;" title="three">3</a></li> 9 <li><a href="images/4.jpg" onClick="showPic(this); return false;" title="four">4</a></li> 10 <img src="images/show.jpg" alt="my img gallery" id="placeholder"> 11 </ul> 12 <p id="description">Choose an image.</p> 13 </body>
图片变换步骤：1.获取a对象并取得href参数-> 2.获取img 对象-> 3.将href 的参数赋值给img 的src属性。
1 //getElementsByTag( a );可以来获取a的对象，但是局限性，但是获取哪个a标签？因为Tag返回的是一段数组。
2 //这里我们可以封装一个方法function()用标签属性onClick调用这个函数
3 //在调用这个函数时，用this 关键字传递参数，就可以简单的把该a对象传递过去了
4 //onClick="showPic(this); return false;"为什么，后面要返回false。不加则会跳到href指定页面，返回false可以使链接无效。
5
6 showPic(whichpic)
7 function showPic(whichpic){
8 //whichpic就是传递过来的相对getElementsByTag( a );
9 var source = whichpic.getAttribute("href");
10 var placeholder = document.getElementById("placeholder");
11 placeholder.setAttribute("src",source);
12 }
13 如此一来，就可以变换图片了
文本变换如上步骤差不多，但在此前，先了解一下节点
1.childNodes 属性
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：
element.childNodes
1 function counBodyChildren(){
2 var body_element = document.getelementsByTagName("body")[0];
3 alert( body_element.childNodes.length );
4 }//这个小函数可以显示出你body 元素的子元素的总个数。
或者你想更清楚的了解childNodes具体是查询了哪个节点，可以尝试一下代码：
1 <!DOCTYPE html>
2 <html>
3 <body> <p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>
4
5 <button onclick="myFunction()">试一下</button>
6
7 <script>
8 function myFunction()
9 {
10 var txt="";
11 var c=document.body.childNodes;
12 for (i=0; i<c.length; i++)
13 {
14 txt=txt + c[i].nodeName + "<br>";
15 };
16 var x=document.getElementById("demo");
17 x.innerHTML=txt;
18 }
19 </script>
20
21 <p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>
22
23 </body>
24 </html>
得到的结果如下：
了解节点后继续完善图片库变( showPic(whichpic) )更图片时的描述：
1 function showPic(whichpic){
2 var source = whichpic.getAttribute("href");
3 var placeholder = document.getElementById("placeholder");
4 placeholder.setAttribute("src",source);
5 //我们已经传入了a=whichpic标签对象了
6 //再用getAttribute获取a对象的title属性值,再获取P对象传入text。
7 var text = whichpic.getAttribute("title");
8 var description = document.getElementById("description");
9 description.firstChild.nodeValue = text;
10 }
11 //补充：childNodes里现在已经不包括属性节点了。
1 function showPic(whichpic){
2 var source = whichpic.getAttribute("href");
3 var placeholder = document.getElementById("placeholder");
4 placeholder.setAttribute("src",source);
5 //我们已经传入了a=whichpic标签对象了
6 //再用getAttribute获取a对象的title属性值,再获取P对象传入text。
7 var text = whichpic.getAttribute("title");
8 var description = document.getElementById("description");
9 description.firstChild.nodeValue = text;
10 }
11 //node.firstChild 等价于node.childNodes[0]
12 //node.lastChild 等价于node.childNodes[node.childNodes.length-1]
13 //补充：childNodes里现在已经不包括属性节点了。
原文地址：https://www.cnblogs.com/lailer132/p/8191894.html
时间： 2024-11-06 03:41:25