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. Cesium home键定位的位置

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);//home定位到中国范围

  2. Hibernate 一对一关联映射,mappedBy参数解析

    在最近java,SSH框架的学习中遇到了这样的一个问题,在Hibernate的开发中一对一关联映射的单向关联,主表会在次表新增一列次表的主键如下图,但是在双向关联中次表不会在表中创建主表的主键一列,这 ...

  3. 源码实现 --> atoi函数实现

    atoi函数实现 atoi()函数的功能是将一个字符串转换为一个整型数值. 例如“12345”,转换之后的数值为12345,“-0123”转换之后为-123. #include <stdio.h ...

  4. poj3358 Period of an Infinite Binary Expansion

    Period of an Infinite Binary Expansion 题目大意:给你一个分数,求这个分数二进制表示下从第几位开始循环,并求出最小循环节长度. 注释:int范围内. 想法:这题说 ...

  5. sql的优化30条

    1. 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2. 应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使 ...

  6. python爬虫遇到状态码304,705

    304状态码是什么? 如果客户端发送了一个带条件的GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个304状态码.简单的表达就是:客户端已经 ...

  7. 赛博杯-HMI流水灯-stack

    stack(ret2libc) 分析 首先checksec一下,发现没开栈保护,可能是栈溢出. [*] '/root/Desktop/bin/pwn/stack_/stack' Arch: i386- ...

  8. 20162323周楠《Java程序设计与数据结构》第六周总结

    学号 2016-2017-2 <程序设计与数据结构>第六周学习总结 教材学习内容总结 继承:从已有类派生一个新类,是面向对象程序设计的一个特点 在Java中只支持单继承,不支持多继承 继承 ...

  9. 学号:201621123032 《Java程序设计》第3周学习总结

    1:本周学习总结 1. 写出你认为本周学习中比较重要的知识点关键词. 类,对象,封装,继承,方法. 2. 用思维导图或者Onenote或其他工具将这些关键词组织起来 2:书面作业 2.1:以面向对象方 ...

  10. oc中protocol、category和继承的区别

    OC中protocol.category和继承的区别以前还是有点迷糊,面试的时候说的有点混乱,现在结合一些资料总结一下. 利用继承,多态是一个很好的保持"对扩展开放.对更改封闭"( ...