第四章 用javascript和DOM去建立一个图片库

把整个图片库的浏览链接集中安排在你的图片库里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给它。

代码如下:

<body>
        <ul>
            <li>
                <a href="images/4-1.png" onclick="showPic(this);return false">图片1</a>
            </li>
            <li>
                <a href="images/4-2.png" onclick="showPic(this);return false">图片2</a>
            </li>
            <li>
                <a href="images/4-3.png" onclick="showPic(this);return false">图片3</a>
            </li>
            <li>
                <a href="images/4-4.png" onclick="showPic(this);return false">图片4</a>
            </li>
            <img src="images/4-1.png" id="placeholder"/>
        </ul>

        <script type="text/javascript">
            function showPic(pic){
                var source = pic.getAttribute("href");
                var placeholder = document.getElementById("placeholder");
                placeholder.setAttribute("src",source);
            }
        </script>
 </body>

- 通过onclick事件处理函数去触发的动作是调用showPic()函数,想调用这个函数必须向它传递一个参数:一个带有href属性的元素节点。因此,要把那些链接本身用作参数。这里用this关键字来表示”这个<a>元素节点“,这个关键字含义是“这个对象"

- 事件处理函数的工作机制:在给某个元素添加了事件处理函数后,一旦发生预定事件,相应的javascript代码就会得到执行,那些javascript1代码可以返回一个结果,而这个结果将被传递回那个事件处理函数。在这,返回给onclick事件处理函数的值是false,onclick事件处理函数将认为“这个链接没有被点击”

  • chlidNodes属性

该属性可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。childNodes属性将返回一个数组,这个数组包含给定元素节点的全体子元素。

childNodes属性返回的数组包含着所有类型的节点。除了所有的元素节点,所有的属性节点和文本节点也包含其中。

element.childNode

  • nodeType属性

利用nodeType属性来区分文档里的各个节点。这个属性返回的是一个数字。 node.nodeType

nodeType属性值总共有12种可取值。其中仅有3种具有实际价值:元素节点、属性节点和文本节点,相对的nodeType属性值分别是1,2,3

  • nodeValue属性

这个属性的用途是检索和设置节点的值。 node.nodeValue

  • firstChild 和 lastChild属性

node.firstChild完全等价于 node.childNodes[0]

node.lastChild完全等价于 node.childNodes[node.childNodes.length-1]

查询body元素里有多少个子元素:

       function countBodyChildren(){
                var body_element = document.getElementsByTagName("body")[0];
                alert(body_element.childNodes.length);
                alert(body_element.nodeType);    //1
            }
            window.onload = countBodyChildren;
时间: 2024-10-03 21:41:15

第四章 用javascript和DOM去建立一个图片库的相关文章

第四章:Javascript表达式和运算符

表达式是javascript中的一个短语,javascript解释器会将其计算出一个结果.程序中常用量是最简单的一类表达式就是变量.变量名也是一种简单的表达式,它的值就是赋值给变量的值.复杂的表达式是由简单的表达式组成的.比如数组访问表达式是由一个表示数组的表达式,方括号.一个整数表达式构成.它们所组成新的表达式运算结果是该数组特定位置的元素值.同样的函 数调用表达式由一个表示函数对象的表达式和0个多个参数表达式构成.将简单表达式组成复杂表达式最常用的方法就是运算符. 本章(本文)将讲解所有ja

第五章:javascript:队列

队列是一种列表,不同的是队列只能在末尾插入元素,在队首删除元素.队列用于存储俺顺序排列的数据.先进先出.这点和栈不一样,在栈中,最后入栈的元素反被优先处理.可以将队列想象成银行排队办理业务的人,排队在第一个的人先办理业务,其它人只能排着,直到轮到他们为止. 队列是一种先进先出(FIFO)的数据结构.队列被用在很多地方.比如提交操作系统执行一系列进程.打印任务池等.一些仿真系统用来模拟银行或杂货店里排队的顾客. 一,队列的操作. 队列的两种主要操作是:向队列中插入新元素和删除队列中的元素.插入操作

JavaScript DOM编程艺术-学习笔记(第三章、第四章)

第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素. 3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul>    ul元素并没有直接包含文本元素 4.获取元素的方法: ①getElementById() ②getElementsByTagName ()  

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

JavaScript高级程序设计:第十四章

第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而与其他HTML元素具有相同的默认属性.不过,HTMLFormElement也有它自己下列独有的属性和方法. 取得<form>元素的引用方式有好几种.其中最常见的方式就是将它看成与其他元素一样,并为其添加id特性,然后再像下面这样使用getElementById()方

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

javascript第四章总结

变量: javascript变量可以用来保存两种类型的值:基本类型和引用类型. 基本类型包括:Undefined,Null,Boolean,Number(用于所有的数值包括整数和浮点型) 和String. 这两者的特点是: 1.基本类型值在内存中占用固定大小的空间,一次被保存到栈的内存中: 2.从一个变量向里一个变量复制基本类型的值,会创建这个值的副本: 3.引用类型的值是对象,保存在堆得内存中: 4.包含引用类型的值得变量的实际上并不包含对象本身,而是一个指向该对象的指针: 5.从一个变量向另