事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的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. js校验密码，不能为空的8-20位非纯数字或字母的密码

    jsp: <div class="mui-input-row"> <label>密码</label><!-- id='password' ...

  2. WCF rest 的帮助页面和缓存机制

    打开vs2010 在工具选项中选择扩展管理器——联机库 安装WCF REST Service Template 40(CS)模板 安装后新建wcf服务应用程序,删除默认建立的文件. 新建RestWcf ...

  3. gRPC框架

    https://blog.csdn.net/shuanger_/article/details/47281381 https://grpc.io/ gRPC是利用通讯协议是HTTP2,序列化用prot ...

  4. 性能测试工具LoadRunner21-LR之Controller 常用函数

    1.事务函数: Lr_start_transaction();  //标记事务的开始 Lr_end_transaction();  //标记事务的结束,一般情况下,事务开始与结束联合使用 Lr_get ...

  5. 在rails 中返回 zip 文件

    在平日的开发当中我们一般只返回html,json 等等,但是偶尔情况下也会使用到其他文件的返回,比如 pdf ,csv 文件 今天在开发中使用的是将大量的文字返回给用户. ## 知识点 `Tempfi ...

  6. .NET标准化题目

    1. 下面对FxCop的描述中,错误的是:(D) A. FxCop是一个静态代码分析工具. B. 可以定制自己的规则加入FxCop引擎. C. FxCop主要是对.NET中托管代码的assembly进 ...

  7. DEDE图集手工上传图片，加入水印

    DEDE的图集手工上传图片,是一个非常好用的flash上传图片工具.但是如果我们希望上传的图片,带有自己网站指定的水印,却发现没有达到我们的要求--那么如果我们确实希望上传的图片,带有水印,怎么办?以 ...

  8. 织梦DEDECMS {dede:arclist},{dede:list}获取附加表字段内容

    以前用织梦DEDECMS做二次开发时获取附加表字段内容都是通过runphp执行SQL查询获得,最近看了看手册,发现一个非常简便的方法. 用arclist调用于附加表字段的方法: 方法一: 要获取附加表 ...

  9. mysql java 通用AES加密

    最近有个需求,需要对数据库某些字段加密,调研发现采用AES加密的方式较多,而且反向解密速度快,符合需求,于是采用:下面是遇到的问题及相关代码 首先第一个问题,AES的秘钥是16位,mysql的密码长度 ...

  10. Jvm方法区以及static的内存分配图

    前面的几篇都没有太明确地指出 方法区 是什么?现在通过一些资料的收集和学习,下面做一些总结 什么是方法区: 方法区是系统分配的一个内存逻辑区域,是JVM在装载类文件时,用于存储类型信息的(类的描述信息 ...