Chinaunix首页 | 论坛 | 博客
  • 博客访问: 202571
  • 博文数量: 73
  • 博客积分: 2010
  • 博客等级: 大尉
  • 技术积分: 750
  • 用 户 组: 普通用户
  • 注册时间: 2008-03-13 18:32
文章分类

全部博文(73)

文章存档

2009年(1)

2008年(72)

我的朋友

分类: 系统运维

2008-04-03 09:16:26

 
"">


 
  Image Gallery


 

Snapshots


 


  
  
  现在需要改变.html文档的一些行为,比如点击链接时不是直接连接到该图片(另一个网页),而是在网页的空白部分显示该图片。
   定义showPic.js
   function showPic(whicPic){
    var source=whicPic.getAttribute("href");
    var placeholder=document.
      getElementById("placeholder");
    placeholder.setAttribute("src",source);
}
//whicPic指的是页面中的链接
//函数的目的就是需要在placeholder设置所点链接href属性的图片
//在点击某个元素时,该元素会被保存为一个this对象,从而这样
//showPic(this)将该元素传入到该函数中。
#此时当点击元素时placeholder中会显示图片但是链接被点击的默认行为#还是会发生
//在每个
元素中加入以下代码:onclick="showPic(this);return //false;"
//事件处理函数的工作机制:
//在给某个元素添加了事件处理函数之后一旦发生了预定的事件,相应的//javascript函数被调用,并返回一个结果true或者false。若为true则//事件处理函数认为链接被点击了,若为false事件处理函数认为链接没有被点//击。
  
对javascript函数功能进行扩展
  1,childNodes属性
  用于检索一个元素的所有子元素。返回一个数组,包含给定元素节点的所有子元素。
  如获取body元素的所有子元素:
  var body=document.getElementsByTagName("body")[0];
  body.childNodes;
  DOM为body元素提供了一个更为简单的使用方式:document.body;
  document.body.childNodes;
  2,nodeType属性
  body元素中应该只有三个元素,h1,ul,img元素,但输出的数字却远大于此。这时因为文档树的的节点类型并非只有元素节点一种。childNodes包含了文档中其他的属性节点以及文本节点。
  可以使用nodeType属性来区分文档中的各个节点类型,它返回的是一个数字
它共有12中可取值,其中只有3中是有价值的:
  ·元素节点的值为1
  ·属性节点的值为2
  ·文本节点的值为3
  
  在文档末尾添加

Choose an image

,需要在选定某张图片时更改

元素的内容为相应的链接的title属性值。
  nodeValue属性
  如果需要改变某个文本节点的值,可以使用以下的方式node.nodeValue=.
  但是:
  var des=document.getElementById("description");
  在这里得到的是id为description的

元素节点,而不是其中的文本节点。使用以下的方式:
  des.childNodes[0].nodeValue;
  firstChild和lastChild
  访问第一个子节点和最后一个子节点可以分别使用firstChild和lastChild。相应的较为麻烦的方式:childNodes[0],childNodes[childNodes.length-1]
  到这里showPic可以修改为:
  function showPic(whicPic){
    var source=whicPic.getAttribute("href");
    var placeholder=document.
      getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whicPic.getAttribute("title");
    var des=document.getElementById("description");
    des.firstChild.nodeValue=text;
  }


预留退路
臭名昭著的弹出窗:
  window.open(url,name,features);
  eg:
    window.open("",
       "popup","width=320,height=480");
  #test.js
function popUp(ref){
    window.open(ref,"popup","width=320,height=480");
}
  #test.html
阅读(1073) | 评论(0) | 转发(0) |
0

上一篇:DOM简单介绍

下一篇:javascript美术馆改进版

给主人留下些什么吧!~~