JS图片库

标记

需求效果：

网页中的图片链接显示在网页中的图片框内部而不是打开新的页面

//html部分

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/jscript" src="../js/2019_9_14.js"></script>

	</head>

	<body>

		<ul>

			<li>

				<a href="../img/001.jpg" title="A001" onclick="showPic(this);return false;">001</a>

			</li>

			<li>

				<a href="../img/002.jpg" title="A002" onclick="showPic(this);return false;">002</a>

			</li>

			<li>

				<a href="../img/003.jpg" title="A003" onclick="showPic(this);return false;">003</a>

			</li>

			<li>

				<a href="../img/004.jpg" title="A004" onclick="showPic(this);return false;">004</a>

			</li>

		</ul>

		<img id="img1" src="../img/x.jpg" alt="my image gallery" />

	</body>

</html>


//js部分

function showPic(whichpic){

	var source = whichpic.getAttribute("href");

	var a = document.getElementById("img1");

	a.setAttribute("src",source);

}

childNodes

用于获取一个元素的所有子元素

nodeType

获取节点的type属性

nodeValue

获取节点的属性值

firstChild 和 lastChile 属性

用于提取元素列表的第一个元素和最后一个元素

JS笔记03的更多相关文章

  1. JS笔记—03（DOM编程）

    1. 动态体现:HTML代码加载到浏览器,代码运行后改变文档(DOM树)增删改查节点.例如:ajax(不是新技术,是几个技术的合体js+http后台操作)就是这样的原理 2.js对象(浏览器对象.脚本 ...

  2. Node.js 笔记03

    一.buffer(缓存区) Node里面的buffer,是一个二进制数据容器,数据结构类似与数组,专门用于Node中数据的存放 ​ 1. buffer的基本使用 历史上的使用方式:const buf1 ...

  3. JS自学笔记03

    JS自学笔记03 1.函数练习: 如果函数所需参数为数组,在声明和定义时按照普通变量名书写参数列表,在编写函数体内容时体现其为一个数组即可,再传参时可以直接将具体的数组传进去 即 var max=ge ...

  4. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  5. 《30天自制操作系统》笔记(03)——使用Vmware

    <30天自制操作系统>笔记(03)——使用Vmware 进度回顾 在上一篇,实现了用IPL加载OS程序到内存,然后JMP到OS程序这一功能:并且总结出下一步的OS开发结构.但是遇到了真机测 ...

  6. 机器学习实战（Machine Learning in Action）学习笔记————03.决策树原理、源码解析及测试

    机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...

  7. CS229 笔记03

    CS229 笔记03 局部加权线性回归 Non-Parametric Learning Algorithm (非参数学习方法) Number of parameters grows with the ...

  8. OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓

    本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...

  9. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

随机推荐

  1. C. Gas Pipeline DP

    C. Gas Pipeline time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  2. 第1节 kafka消息队列：11、kafka的数据不丢失机制，以及kafka-manager监控工具的使用；12、课程总结

    12.kafka如何保证数据的不丢失 12.1生产者如何保证数据的不丢失 kafka的ack机制:在kafka发送数据的时候,每次发送消息都会有一个确认反馈机制,确保消息正常的能够被收到 如果是同步模 ...

  3. 如何对接网建SMS短信通短信验证码接口

    1首先注册登录网建SMS网站  http://www.smschinese.cn/ 2.下载Java代码 3.JAVA调用 import java.io.UnsupportedEncodingExce ...

  4. java学习-初级入门-面向对象①-面向对象概述-结构化程序设计

    为了学习面向对象程序设计,今天我们先利用面向对象以前的知识,设计一个学生类. 要求进行结构化程序设计. 学生类: Student 要求:存储学生的基本信息(姓名.性别.学历层次和年级),实现学生信息的 ...

  5. SystemVerilog基本语法总结（中）

    Systemverilog 语法总结(中) 上一个博客分享了SV基本的概念,这一博客继续分享,等下一个博客分享一个公司的验证的笔试题目. l 事件 背景: Verilog中当一个线程在一个事件上发生阻 ...

  6. CH15 面向对象程序设计

    面向对象程序设计是基于三个基本概念的:数据抽象.继承和多态. 第7章介绍了数据抽象的知识,简单来说,C++通过定义自己的数据类型来实现数据抽象. 数据抽象是一种依赖于接口和实现分离的编程技术:类的设计 ...

  7. vim的几种模式

    Normal Mode 普通模式 功能:在这种模式下可以移动光标等. 进入:默认进入vim之后,处于这种模式.在其他模式下狂按ESC后进入此模式. Visual Mode 可视模式 功能:在这种模式下 ...

  8. Python 的 os 与 sys 模块

    os与sys模块的官方解释如下: os: This module provides a portable way of using operating system dependent functio ...

  9. 题解 P5043 【【模板】树同构（[BJOI2015]树的同构）】

    进入正题 题意:将所有树结构相同的树归类. 思路 嗯,这道题让我们把树的结构归类,自然而然就想到了哈希,我们对这整颗树哈希一遍.然后判同构就十分之简单了.只需要找哈希值一样的树就可以了. 其实真得很简 ...

  10. leetcode813 Largest Sum of Averages

    """ We partition a row of numbers A into at most K adjacent (non-empty) groups, then ...