事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的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. Robot Framework搭建

    需要安装的内容如下: 1. Python2.7.13(听说python3对RF支持的不是很好,所以我下的Python2) 2. wxPython 2.8.12.1(只能这个版本) 3. robotfr ...

  2. python 层次索引交换级别以及排序问题

  3. Murano Setup Steps

    1. Select a Linux Distribution Only Ubuntu 14.04 (Trusty), Fedora 21 (or Fedora 22) and CentOS/RHEL ...

  4. Ubuntu环境下安装Bochs

    首先说一下我的Ubuntu版本,敲命令 sudo lsb_release -a 就可以看到 No LSB modules are available. Distributor ID: Ubuntu D ...

  5. [转]JAVA Iterator 的用法

    java.util包中包含了一系列重要的集合类.本文将从分析源码入手,深入研究一个集合类的内部结构,以及遍历集合的迭代模式的源码实现内幕. 下面我们先简单讨论一个根接口Collection,然后分析一 ...

  6. FormCollection的用法

    FormCollection的用法: 有时候前台抛来的字段太多,在后台一个一个例举出来显得麻烦,而且还容易出错,FormCollection解决了这个烦恼 #region 给商家留言 [HttpPos ...

  7. Java中的阻塞队列-LinkedBlockingQueue（二）

    原文地址:http://benjaminwhx.com/2018/05/11/%E3%80%90%E7%BB%86%E8%B0%88Java%E5%B9%B6%E5%8F%91%E3%80%91%E8 ...

  8. Cookie概述

    一.什么叫Cookie? Cookie翻译成中文是小甜点,小饼干,在Http中它表示服务器送给客户端浏览器的小甜点.其实Cookie就是一个键和一个值构成,随着服务器端的响应发送给客户端浏览器,然后客 ...

  9. h5:WebSocket

    实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特 ...

  10. 缩小javascript文件大小之缩编、混淆

    写前端的相信都遇到过要提高网页的性能,其中javascript文件越小,浏览器的下载速度面对文件的读取和解析就更快.而一般我们在开发又需要一定的代码规范来使我们的代码更加的容易维护和读懂,但是大量空格 ...