事件处理函数：事件处理函数的作用是，在特定事件发生时调用特定的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. python3.4 x86_64-linux-gnu-gcc Error

    running install    running build    running build_py    creating build    creating build/lib.linux-x ...

  2. DP：凑零钱问题/最长非降子序列（C++）

    你给出一定数额的钱 i 元给我,我利用手中的硬币(m元, j元, k元...)兑换等值的钱给你,要求硬币数最少. 举例:给出1-11的钱,手中硬币有1元,3元,5元. 重点是找到状态和状态转移方程. ...

  3. 自己的spring boot starter

    这篇文章说的更加详细具体:https://www.cnblogs.com/hjwublog/p/10332042.html 在刚开始看spring boot的时候,发现这么多starter,不免觉得好 ...

  4. xubuntu 安装一款漂亮的图标

    sudo add-apt-repository ppa:noobslab/icons sudo apt-get update sudo apt-get install square-beam-icon ...

  5. 变量&数据类型

    php标记:四种php标记       1.<?php echo 'hello';?>       2.<? echo 'hello'; ?> //短标记       3.&l ...

  6. Windows窗体应用开发1

    1.Windows窗体的基本概念 2.Windows窗体应用程序 3.Windows窗体常见界面元素 4.Windows窗体中的事件处理 1.Windows窗体的基本概念 打开一个Window的系统应 ...

  7. Axis Java调C# Webservice

    这是一个痛苦的过程,如果java对java的webservice可以说很方便,很简单,Axis,CXF等一系列框架生成客户端直接传参调用即可,但是异构语言就有点麻烦了,生成的客户端不好使......无 ...

  8. springmvc+spring+mybatis+sqlserver----查询sqlserver----有返回参数

    <resultMap type="java.util.HashMap" id="resultMap"> <result column=&quo ...

  9. Linux pptpd 的 iptables 包过滤设置

    用Centos架设了一台pptpd vpn服务器,信息如下: 服务器IP 192.168.100.1 /24 网关 192.168.100.254(NAT防火墙,将 <外网IP>:1723 ...

  10. js获取农历日期【转】

    var CalendarData=new Array(100); var madd=new Array(12); var tgString="甲乙丙丁戊己庚辛壬癸"; var dz ...