JavaScript 基础第九天（DOM第三天）
一、引言
我们昨天介绍了很多的概念以及大部分我们可以在工作中用到的事件，那么今天我们将运用这些知识做一些效果！
二、导入
今天的内容以实例为主。
三、重点内容
祝愿墙的简单构建：
首先我将介绍出本次实例中将运用的知识点，有兴趣的同学可以根据我所列出的知识点构建出页面。
① 克隆节点：clonNode();
var ul = document.getElementById("list");
var li = document.getElementById("li3");
console.log(li.cloneNode(false)); //如果是False的话，仅仅是相当于复制(克隆)了一个标签
console.log(li.cloneNode(true));// 将li标签原样克隆，包含里面的一切信息，包括子节点
console.log(ul.cloneNode(false));
console.log(ul.cloneNode(true));
// 参数为True的时候，是深度克隆，克隆当前对象的一切子节点
// 参数为false的时候，是浅克隆，只会克隆标签，不包含文本信息
② 向父元素的最后追加节点：appendChild();
<body>
<ul id="list">
<li>111111</li>
<li>222222</li>
<li id="li3">333333</li>
<li>444444</li>
</ul>
<script>
var ul = document.getElementById("list");
var li = document.getElementById("li3");
var newLI= li.cloneNode(true); // 是在内存当中重新克隆了一个一模一样的li3
ul.appendChild(newLI); // 将克隆的子节点追加到父级元素最后
</script>
</body>
③ 随机数的生成：
var x = parseInt(Math.random()*600); // 生成0--600的随机数
var y = parseInt(Math.random()*500); // 生成0--500的随机数
④ 层级的提升：
var zIndex = 0;
ctip.onclick = function () {
zIndex++;
this.style.zIndex = zIndex+"";//需要在外面定义一个zIndex控制层级的增加
}
以上内容结合我们前面两天的内容就可以做出一个简单的随机生成多个祝福的祝愿墙。希望大家可以尝试一下，后面我会附上代码，不过要是连尝试都不尝试一下直接就看代码那你永远也不会进步的。很多人都喜欢看看别人的代码说嗯，我会了。但是却从没自己想过怎么创建一个属于自己。
四、总结
我会附上源代码，不过希望看得人还是先自己尝试一下。
http://files.cnblogs.com/files/wjwcn/%E7%A5%9D%E6%84%BF%E5%A2%99.zip
JavaScript 基础第九天（DOM第三天）的更多相关文章
- 8.6 JavaScript之HTML的DOM（三）
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...
- 前端之JavaScript：JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
- javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
- JavaScript基础学习(九)—DOM
一.DOM概述 DOM(Document Object Model)文本对象模型. D: 文档,HTML文档或XML文档. O: 对象,document对象的属性和方法. ...
- JavaScript 基础(四) - HTML DOM Event
HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- JavaScript基础知识（DOM）
获取元素的方法 要操作谁,就要先获取谁: 获取元素 1.document.getElementById:通过ID名来获取元素 兼容性: 在IE8以下,会默认把name属性当做id来获取: docume ...
- JavaScript -基础- 函数与对象（三）数组对象
一.数组对象 1.创建方式 1)创建方式一 var arr=[1,2,3]; 2)创建方式二 var arr2=new Array(1,2,3); 注意: 数组中可以存储任何数据类型.方法类型(Jav ...
- JavaScript -基础- 函数与对象（三）正则、Match对象
一.正则对象 1.创建方法 1)方式一 var re_obj=new RegExp("\d+","g") 规则+模式(g 全局模式/i 不区分大小写/gi) r ...
- JavaScript -基础- 函数与对象（三）Date对象
一.Date对象 1.创建方法 var date_obj=new Date(); alert(date_obj.toLocaleString()) var date_obj=new Date(&quo ...
随机推荐
- 转载：shell脚本之sed使用----替换、变量、转义字符
sed替换的基本语法为:----s后面跟的是分隔符,原字符串可使用.*这种正则表达式进行整行替换 代码如下: sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式, ...
- 制作Nine-Patch图片的流程
1.找到draw9patch.bat文件,在Android sdk目录下的tools文件夹中. 2.双击打开draw9patch.bat文件,在导航栏点击File->Open 9-patch将图 ...
- 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib
为什么要CMake,这里我陈述自己的想法,作为一个刚使用opencv库的小白来说,有以下大概三点内容 1.由于在学习图像处理滤波器中,需要用到各种边缘保护滤波器(EPS)算法,但是这些算法在OpenC ...
- iOS8以后自动计算cell的高度
前提: 1.iOS系统>=8 2.cell中的每个控件布局固定,不含一些动态的模块,但是可以含有label的变化 可以采用tableView自动计算cell的高度 首先设置tableView的属 ...
- Xamarin Mono 环境搭建(使用Visual Studio 2013 开发android 和 ios )
本文主要介绍Xamarin结合VS2013来开发Android应用程序,主要会介绍Mono和Xamarin的关系,以及整个搭建环境的过程. 一.Mono和Xamarin介绍 1.Mono简介 Mono ...
- spring boot分布式技术，spring cloud，负载均衡，配置管理器
spring boot分布式的实现,使用spring cloud技术. 下边是我理解的spring cloud的核心技术: 1.配置服务器 2.注册发现服务器eureka(spring boot默认使 ...
- C#调用WebService获取天气信息
概述 本文使用C#开发Winform应用程序,通过调用<WebXml/>(URL:http://www.webxml.com.cn)的WebService服务WeatherWS来获取天气预 ...
- js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 代码如下: .abc { background: red; } test div var div = document.getEl ...
- 关于读取txt文件中文乱码问题
在处理文件的过程中,读取txt文件出现中文乱码.这种情况是由于编码字符不一致导致. public static string ReadFile(string path, string fileName ...
- Python 变量范围
1.本地变量,全局变量 Python 中有2种变量作用范围本地变量,全局变量. 变量搜索路径是:本地变量->全局变量 它们简而言之就是本地变量的值只在本地作用范围有效.而全局变量的作用范围是全局 ...