事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的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. jQuery自动完成插件flexselect

    项目中使用flexselect自动完成插件时遇到一个问题 刚开始以为是js的引用顺序有问题,但是查看后发现不是js引用顺序问题 js引用顺序如下 最后查找资料也没有解决问题,一直提示这个错误 后来在f ...

  2. sql server 笔记（数据类型/新建、修改、删除数据表/）

    1.数据类型: Character 字符串 / Unicode 字符串 / Binary 类型 / Number 类型  /  Date 类型  / 其他数据类型 详解:http://www.w3sc ...

  3. RestTemplate中几种常见的请求方式

    GET请求 第一种:getForEntity getForEntity方法的返回值是一个ResponseEntity<T>,ResponseEntity<T>是Spring对H ...

  4. jeecg权限设置案例

    JEECG简单实例讲解权限控制 一.业务背景 某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 二.需求 1.角色分为:员工.经理两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评 ...

  5. CSS选择器比较：queryselector queryselectorall

    官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...

  6. Js中parseFloat()方法所产的精度不一致问题

    <script language="javascript"> function checkForm(){ var Sum="0.11"; var S ...

  7. 背景图片之background的用法

    常用的background背景属性有: background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺 ...

  8. mysql测试和sysbench工具详解

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  9. pm2的的常用命令及用法

    使用pm2启动静态文件服务器的方法如下: pm2 serve path port pm2 serve . 9001 这样就可以把当前文件夹下的静态文件跑起来了,而且端口号是9001, 同样也支持进阶的 ...

  10. 转：ArcGIS10.1正式版安装与破解

    一.准备文件 ArcGIS10.1安装包:ArcGIS_Desktop_10.1_129026(en) 认证服务:Pre-release_license_manager 注册机:arcgis10.1K ...