JavaScript 对图像进行（追加，插入，替换，删除）

本次所学内容：

document.querySelector('.container')       　　　　

这个是可以查找单个【id标签和class标签】

document.querySelectorAll('.container')   　　　　

这个是可以查找全部【li标签和class标签】

container.appendChild(img)    　　　　　　　　　 

这个是对container标签进行追加子标签

container.firstElementChild　　　　　 　 　　　　

这个是在（谷歌浏览器兼容），功能是查找container标签下的第一个子标签

container.firstChild;　　　　　　　　　   　　　　 

这个是在（IE8兼容），功能是查找container标签下的第一个子标签

container.lastElementChild                        　　　　

这个是在（谷歌浏览器兼容），功能是查找container标签下的最后一个子标签

container.lastChild;                                    　　　　 

这个是在（IE8兼容），功能是查找container标签下的最后 一个子标签

container.insertBefore(img,firstImg);         　　　   

这个是对container标签的子标签进行插入功能，参数一个是要插入的标签，后边的参数是要在那个节点进行插入

container.replaceChild(img,lastImg);        　　　　

这个是对container标签然后替换这个标签下的标签，共有俩个参数，一个是要替换的标签，一个是被替换的标签

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>1.节点方法:添加、替换、删除</title>

	<style>

	/*对class标签进行css样式*/

	.container{

		width:600px;

		/*设置宽度为600px*/

		height:600px;

		/*设置高度为600px*/

		border:1px solid #ddd;

		/*设置边框 厚度为1px 使用实线，颜色为灰色*/

	}

	img{

		/*通过img标签名进行查找*/

		width:100px;

		/*设置宽度为100px*/

		height:100px;

		/*设置高度为100px*/

		border-radius:50%;

		/*设置图像显示的范围，50%为园型图*/

		float:left;

		/*使用向左悬浮，去掉间隙*/

	}

	</style>

</head>

<body>

	<div class="container">

	<!-- 定义一个div标签 -->

		<img src="data:images/1.jpg" alt=""/>

		<!-- 在div标签中定义一个img标签 -->

	</div>

	<button>点击追加一张图片</button>

	<!-- 定义一个按钮标签 -->

	<button>点击前面添加一张图片</button>

	<!-- 定义一个按钮标签 -->

	<button>点击替换最后一张图片</button>

	<!-- 定义一个按钮标签 -->

	<button>点击删除第三张图片（索引值为2）</button>

	<!-- 定义一个按钮标签 -->

</body>

<script>

/*

方法

	// append:追加 child:子节点

	ul.appendChild(节点对象):

	// insert:添加 before:在...之前

	insertBefore(添加的节点,指定的节点)

	// replace:替换

	replaceChild(新节点,被替换的节点)

	// remove:删除

	removeChild(删除的节点)

*/

	//1.获取对象

	var container = document.querySelector('.container');

	// 获取标签并赋值到一个变量中

	var btn = document.querySelectorAll('button');

	// 获取所有的标签并赋值到一个变量中，获取的是一个数组，每个数组中都是object对象

	//2.点击事件,追加一张图片images/2.jpg

	btn[0].onclick = function(){

		// 通过下标索引获取第一个button标签，然后绑定一个点击事件

		//(1)创建图片节点

		var img = document.createElement('img');

		//创建一个新的img标签，然后赋值给变量

		//(3)随机数

		var index = rand(1,60);

		// 调用函数将函数的执行效果赋值给变量

		img.src = 'images/' + index + '.jpg';

		// 使用拼接字符，然后设置标签的src属性

		img.alt = '美女图';

		// 如果图片没有加载成功就就会返回美女图字符串

		//

		//console.log(img);

		//(2)追加图片

		container.appendChild(img);

		// 这个是找到container 标签然后在这个标签的中添加字标签

	}

	//在节点之前添加节点

	btn[1].onclick = function(){

		//创建图片节点（添加一张新图片，浏览器上没有的图片，就只能创建）

		var img = document.createElement('img');

		img.src = 'images/' + rand(1,60) +'.jpg';

		img.alt = '美女头像图';

		//firstElementChild（谷歌兼容）

		//firstChild（IE8兼容）

		var firstImg = container.firstElementChild ||　container.firstChild;

		//获取第一张图片

		//头部添加图片（在节点之前添加）

		container.insertBefore(img,firstImg);

		// 使用插入的方法共有俩个参数，一个是要插入的内容是什么，一个参数是要在什么节点之前，

	}	

	//替换节点

	btn[2].onclick = function(){

		//1.新节点

		var img = document.createElement('img');

		// 创建一个新的标签

		img.src = 'images/'+rand(1,60)+'.jpg';

		// 使用字符串拼接，然后赋值给一个变量

		img.alt = '加班中';

		// 如果图片加载错误，就提示支付串加班中

		//2.最后一个节点

		var lastImg = container.lastElementChild || container.lastChild;

		// 查找container标签下的最后一个标签，然后赋值到一个新的变量中

		//3.替换节点

		container.replaceChild(img,lastImg);

		// 找到container标签然后替换这个标签下的标签，共有俩个参数，一个是要替换的标签，一个是被替换的标签

	}

	//点击删除第三张图片

	btn[3].onclick = function(){

		//获取第三张图片

		var threeChild = container.children[2];//获取了所有的标签子节点

		//console.log(threeChild);

		//删除该图片

		container.removeChild(threeChild);

	}

	//点击一次随机出现一张(1-60张图片)

	//随机数函数

	function rand(m,n){

		// 定义一个函数，需要有俩个参数

		//随机数

		return Math.floor(Math.random()*(n-m+1)+m);

		// 返回向下取整的方式然后执行随机数的函数

	}

</script>

</html>

JavaScript 对图像进行（追加，插入，替换，删除）的更多相关文章

  1. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  2. JavaScript字符串插入、删除、替换函数

    JavaScript字符串插入.删除.替换函数 说明: 以下函数中前两个函数取出查找字符串的前一部分和后一部分,以用于其他函数.注意,调用一次 replaceString(mainStr,search ...

  3. Javascript:splice()方法实现对数组元素的插入、删除、替换及去重

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...

  4. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  5. 数组多功能splice()方法的插入，删除，替换

    多功能splice()插入.删除.替换 <script type="text/javascript"> var arr=['A','B','C','D','E','F' ...

  6. Swift字符串的插入、删除和替换－备

    对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字符串. insert(_:atIndex:). ...

  7. 《从零开始学Swift》学习笔记（Day 14）——字符串的插入、删除和替换

    原创文章,欢迎转载.转载请注明:关东升的博客 对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字 ...

  8. cb19a_c++_只适合string类型的操作_提取_追加_替换

    *cb19a_c++_只适合string类型的操作_提取_追加_替换三个substr重载函数-获取一个字符串的一部分六个append重载函数-追加字符十个replace重载函数-替换更换 重载函数越多 ...

  9. 二叉查找树的查找、插入和删除 - Java实现

    http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 作者: yangecnu(yangecnu's Blog on ...

随机推荐

  1. 20165230 学习基础和C语言基础调查

    20165230 学习基础和C语言基础调查 技能学习经验 我擅长弹钢琴.小时候我曾上过很多兴趣班,比如钢琴.跳舞.书法.绘画等等,唯一坚持至今的只有钢琴.仔细一算学习钢琴至今已有12年,不能说已经精通 ...

  2. OpenCV与Qt的环境搭建及Demo

    前言: 前段时间写了很多OpenCV的程序,虽然重点在算法上,但图像窗口只能靠cvNamedWindow,效果很不理想.遂希望用Qt配合OpenCV使用,为我的程序建立图形化界面.然而,依我对Open ...

  3. sklearn包中有哪些数据集你都知道吗？

    注册了博客园一晃有3个月了,同时接触机器学习也断断续续的算是有1个月了.今天就用机器学习神器sklearn包的相关内容作为我的开篇文章吧. 本文将对sklearn包中的数据集做一个系统介绍,并简单说一 ...

  4. Go实现海量日志收集系统(一)

    项目背景 每个系统都有日志,当系统出现问题时,需要通过日志解决问题 当系统机器比较少时,登陆到服务器上查看即可满足 当系统机器规模巨大,登陆到机器上查看几乎不现实 当然即使是机器规模不大,一个系统通常 ...

  5. RTC实时时间系统学习笔记(一)---------------UART串口

    临近研三了,自己倾向于要找数字IC方面的工作,苦于教研室的项目一直都是调板子调板子调板子,真正用到FPGA的很少,,本着"工欲善其事必先利其器"的原则,在网上搜寻如何自学FPGA, ...

  6. Spring Cloud简介以及版本选择

    什么是SpringCloud 官方的说法就是spring Cloud 给开发者提供一套按照一定套路快速开发 分布式系统 的工具. 具体点就是Spring boot实现的微服务架构开发工具.它为微服务架 ...

  7. java之简单工厂模式详解

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...

  8. SSH相关知识

    SSH(Secure Shell, 安全Shell协议)是一种加密的网络传输协议,经常用于安全的远程登录. SSH只是一种协议,可以有多种实现. OPENSSH是一种应用广泛的实现. sshd是dae ...

  9. java中的异常以及 try catch finally以及finally的执行顺序

    java中的 try.catch.finally及finally执行顺序详解: 1.首相简单介绍一下异常以及异常的运行情况: 在Java中异常的继承主要有两个: Error和Exception 这两个 ...

  10. Java基础学习笔记六 Java基础语法之类和ArrayList

    引用数据类型 引用数据类型分类,提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类.我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Scanner ...