JavaScript_图片库

2024-04-27 15:04:41

字体：大中小

来源：转载

供稿：网友

事件处理函数:

1.onmouSEOver鼠标进入 2.onmouseout鼠标移出 3.onclick鼠标点击用法：

表示当鼠标进入时执行showPic函数，参数是本身这个对象。执行完所有函数后返回false，因为一般情况下，点击一个链接会打开一个新的页面。而当onmouseover返回false时，就会认为没有被点击，所以不会打开新的页面。

childNodes 属性

获取一个元素的所有子元素，他是一个包含所有子元素的数组。 elements.childNodes

nodeType属性

获取body节点的属性类型：*body[0].nodeType*

节点类型	属性值
元素节点	1
属性节点	2
文本节点	3

nodeValue获取属性的内容

获取p节点的内容：

var p = document.getElementsByTagName("p"); alert(p[0].firstChild.nodeValue);

内容是一个文本节点，他是p节点的一个子节点，所以直接用p.nodeValue并不可以获取文本内容，而是用p.firstChild获取他的子节点的内容。

firstChild/lastChild 第一个子节点/最后一个子节点

运用以上知识完成的一个小项目：效果图如下：源码如下：

<!DOCTYPE><html><head> <meta charset="utf-8"> <title>Image Gallery</title> <link rel="stylesheet" type="text/CSS" href="CSS/photos.css"/></head><body> <h1>Snapshots</h1> <ul> <li> <a href="http://i1.piimg.com/584041/a46e945e0fa0f2b4.jpg" onmouseover="showPic(this); return false;" title="0001" >0001</a> </li> <li> <a href="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" onmouseover="showPic(this); return false;" title="0002">0002</a> </li> <li> <a href="http://i1.piimg.com/584041/60be391e7c6a7f4f.jpg" onmouseover="showPic(this); return false;" title="0003">0003</a> </li> <li> <a href="http://i1.piimg.com/584041/9130f7450dab0a15.jpg" onmouseover="showPic(this); return false;" title="0004">0004</a> </li> </ul> <img id="placeholder" src="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" title="placeholder" wodth="400" height = 300/> <p id="description">Choose a image </p> <script type="text/javascript" src="JS/photos.js" ></script></body></html>//Javascript部分function showPic(whichpic){ var sourse = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",sourse); var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = "This is image :"+text;}/*css部分*/*{ padding:0; margin:0;}body{ font-family: "helvetica","Arial",serif; color:#333; background-color:#ccc; margin:1em 10%;}h1{ color:#333; background-color:transparent;}a{ color:#c60; background-color:transparent; font-weight:bold; text-decoration:none;}li{ list-style:none; display:inline-block; margin:1em; margin-top:2em;}img{ display:block; clear:both;}p{ margin-top:1em; font-size:18px; font--weight:bold;}

上一篇：javaScript中的DOM0级和DOM2级事件

下一篇：node版本控制n的使用