#4JavaScript图形库

来源：互联网发布：ppt用什么软件编辑：程序博客网时间：2024/06/06 07:46

<body>
<h1>Snapshots</h1>
<ul>
     <li>
        <a href="images/heying.jpg" onClick="showPic(this); return false; " title="A fireworks display">Fireworks</a>
     </li>
     <li>
        <a href="images/IMG_1984.JPG" onClick="showPic(this); return false; " title="A cup of black coffee"> Coffee</a>
     </li>
     <li>
        <a href="images/timg (1).jpg" onClick="showPic(this); return false; " title="A red, a rose"> Rose</a>
     </li>
     <li>
       <a href="images/timg (2).jpg" onClick="showPic(this); return false; "title="The famous clock"> Big Ben</a>
      </li>
   </ul>
   <img id="placeholder" src="" alt="My Image Gallery"/>
   <p id="description"> Choose an image </p>
</body>
描述：img是个占位符，当点击链接的时候不跳转到图片查看器上，而是将图片放在image的位置并且在图片下放显示当前图片的title

但是DOM使用与任何一种标记语言。
function showPic(whichpic){
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
   }

我们需要在图片列表的链接添加行为，也就是事件处理函数，才能调用showPic（函数）

事件处理函数：
事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码。例如，
如果想在鼠标悬停在某个元素时出发触发一个动作，就需要使用onmouseover事件处理函数；
如果想在鼠标指针离开某个元素时触发一个动作，就需要使用onmouseout事件处理函数；
想让用户点击某个链接时触发一个动作，需要使用onclick事件处理函数
需要注意的是：showPic()函数需要一个参数：一个带有href属性的元素节点参数。当我把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作showPic函数的参数。
使用this关键字。这个关键字的含义是“这个对象”。具体到当前例子，this表示“这个<a>元素节点”
showPic(this)
添加时间处理函数语法：
event = “JavaScript statemen(s)”(每条语句用分号隔开)
onclick = "showPic(this); "

放入后，连接的默认行为也会被调用；
了解下事件处理的工作机制。在给某个元素添加事件处理函数后，一点事件发生，相应的JavaScript代码就会执行。被调用的JavaScript代码了可以返回一个值，这个值将被传递给那个事件处理函数。例如：
我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样，当这个链接被点击了，那段JavaScript代码返回的布尔值就是true，onclick事件处理函数就认为“这个链接被点击了”，反之，如果返回值是false。它就认为没有被点击
onClick="showPic(this); return false; "

接下来是对相应的图片输出当前图片的title
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue=text;

childNodes属性
在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组。
element.childNodes
假设需要把某个文档的body元素的全体子元素检索出来，首先我们使用getElementsByTagName得到body元素，因为每份文档中只有一个body元素，所以它将是getElementsByTagName("body")方法中返回的第一个（也是唯一一个）元素
var body_element = document.getElementsByTagName("body")[0];
可以获取body元素的全体子元素个数
body_element.childNodes.length

function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
这个小函数会弹出一个对话框，显示body元素的子元素的总个数
我把这个函数放在页面加载时执行，需要使用onload事件处理函数
window.onload = countBodyChildren
你会发现数值非常大

nodeType属性
nodeType属性共有12中可取值，但其中仅有3中具有实用价值.
@元素节点的nodeType属性值是1.
@属性节点的nodeType属性值是2.
@文本节点的nodeType属性值是3.
获取nodeType属性：
node.nodeType
将 alert(body_element.childNodes.length);换为alert(body_element.nodeType)将会看到显示数字“1”的会话框

添加这个段落之后<p id="description"> Choose an image </p>

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
下一个任务是实现文本的切换

nodeValue属性
如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值：
node.nodeValue
需要注意的细节是：在nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。可以用alert语句来验证这一点：
alert(description.nodeValue);
包含在<p>元素的文本是另一种节点，它是<p>元素的的第一个节点。因此你想要得到的其实是它的第一个子节点的nodeValue属性值。
alert(description.childNodes[0].nodeValue);
这个值来自childNodes数组的第一个（下标为0）元素。

firstChild和lastChild属性
是node.childNodes[0]和node.childNode[node.childNode.length-1]

最JavaScript终代码
function showPic(whichpic){
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue=text;

   }

随后是css
<style type="text/css">
body {
font-family: "微软雅黑";
color: #333;
background-color: #ccc;
magin: 1em 10%;
}
h1{
color:#333;
background-color:transparent;
}
a{
color:#c60;
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;
width:400px;
height:400px;
}
</style>

小结：
DOM提供的几个新属性
@childNodes
@nodeType
@nodeValue
@firstChild
@lastChild
学习重点：1.是如何利用DOM所提供的方法编写图形库脚本。2.是如何利用事件处理函数把JavaScript代码与网页集成在一起

阅读全文

0 0