事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码。本例中想要在用户点击某个链接的时候触发一个动作，所以需要使用onclick事件处理函数。

添加事件处理函数的语法：

event="JavaScript statement(s)"

js代码包含在一对引号之间，可以把任意数量的js语句放在这对引号之间，只要把各条语句用分号隔开就可以。

onclick="showPic(this);"//this表示这个对象，本例中即这个<a>元素标签

事件处理函数的工作机制：在给某个元素添加了世间处理函数后，一旦事件发生，相应的js代码就会执行。被调动的js会返回一个值，这个值将会被传递给那个时间处理函数。本例中当链接被点击时，如果执行的js代码返回true，事件处理函数就认为这个链接被点击了，反之如果返回的值是false，onclick事件处理函数就认为这个链接没有被点击。return false;就会将false返回给事件处理函数，所以这个链接的默认行为没有被触发（打开图片查看器。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Images</title>
</head>
<body>
<h1>图片库</h1>

<ul>
    <li><a href="images/door.jpg" onclick="showPic(this);return false;" title="red door">Door</a></li>//return false;事件处理函数工作机制
    <li><a href="images/heart.jpg" onclick="showPic(this);return false;" title="red heart">Heart</a></li>
    <li><a href="images/lake.jpg" onclick="showPic(this);return false;" title="Xuanwu Lake">Lake</a></li>
    <li><a href="images/light.jpg" onclick="showPic(this);return false;" title="lights">Light</a></li>
    <li><a href="images/river.jpg" onclick="showPic(this);return false;" title="Qinhuai River">River</a></li>
</ul>

<img id="placeholder" src="data:images/1.jpg" alt="my image gallery">//选用一个无用图片做占位符图片

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

</body>
</html>

childNodes属性

在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes

childNodes返回的数组包含所有类型的节点，不仅仅是元素节点。

每个节点都有nodeType属性，这个属性让我们知道正在与哪一种节点打交道。

语法：node.nodeType

nodeType的值是一个数字。

alert(body_element.nodeType)

nodeType属性总共有12中可取值，但是其中仅有3种具有实用价值。

元素节点的nodeType属性值是1；

属性节点的nodeType属性值是2；

文本节点的nodeType属性值是3；

nodeValue属性

如果想要改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值：node.nodeValue；

不仅可以用来检索节点的值，还可以用来设置节点的值。

firstChild和lastChild属性

只要需要访问childNodes数组中的第一个元素，都可以写成firstChild   node.firstChild   ←==→   node.childNodes[0]

node.lastChild   ←==→   node.childNodes[node.childNodes.length-1]

js图片库 案例的更多相关文章

  1. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  2. js图片库

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  5. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

  6. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  7. JavaScriptDOM编程学习笔记（二）图片库案例

    <JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...

  8. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  9. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

随机推荐

  1. SteamVR手柄震动控制实现

    SteamVR手柄震动控制实现 public class handCtrl : MonoBehaviour { public SteamVR_TrackedObject _TrackedObject; ...

  2. c++隐式类型转换和explicit

    什么是隐式转换? 众所周知,C++的基本类型中并非完全的对立,部分数据类型之间是可以进行隐式转换的. 所谓隐式转换,是指不需要用户干预,编译器私下进行的类型转换行为.很多时候用户可能都不知道进行了哪些 ...

  3. MySQL设置允许用户远程登录

    . //登录数据库 mysql -u root -pvmwaremysql>use mysql; //%为所有ip都可以远程访问 mysql>update user set host = ...

  4. Devexpress Xtrareport 并排报表

    什么是并排报表呢? 按照我个人理解:并排报表是把两张或者两张以上的报表,放在一个报表页面. 注:为了方便,本示例使用同一个数据源,但是您可以使用相同的方法,而在一个报表文档中显示两个完全不同的 (使用 ...

  5. [UnityShader]点染队列、ZWrite和ZTest

    转载自:http://www.myexception.cn/mobile/1902628.html [UnityShader]渲染队列.ZWrite和ZTest 参考链接:http://blog.cs ...

  6. SpringBoot的运行原理

    SpringBoot关于自动配置的源码在spring-boot-autoconfigure-xxxxx.jar中 <源码解析> 查看当前项目中已启用的和未启用的自动配置的报告的三种方法: ...

  7. Struts2_HelloWorld_5

    1.设置开发模式: 更换配置文件中的 action name="hello_struts",重新访问会出错,因为配置没有立刻响应文件的即时修改. 需要加上配置 <consta ...

  8. OpenCart-2.3 (Ubuntu 16.04)

      平台: Ubuntu 类型: 虚拟机镜像 软件包: opencart-2.3 commercial ecommerce opencart open-source 服务优惠价: 按服务商许可协议 云 ...

  9. php的yii框架开发总结6

    MVC中的Controller部分,所有的controller类都是继承自Controller基类,基类里面包含actionAdmin-管理员,actionIndex-一般默认显示,actionVie ...

  10. 使用BaiDu Java Script Web Api 在Web开发中嵌入地图使用步骤

    前言 很多做企业网站的朋友,都喜欢有一个关于我们.联系我们的栏目,那么这个栏目放什么内容才能饱满那,只有放个地图才显得有点高大上. 一.产生并复制访问Api的密钥(AK) 1.首先我们需要注册一个百度 ...