• 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

  • 相关阅读:
    大一励志的我,现在已经大三了
    Jenkins+K8s实现持续集成
    Jenkins搭建自动化测试环境
    软件开发式样书 6
    软件开发式样书 5
    软件开发式样书 4
    软件开发式样书 3
    软件开发式样书 2
    软件开发式样书 1
    Git学习笔记
  • 原文地址:https://www.cnblogs.com/wjwcn/p/5751470.html
Copyright © 2020-2023  润新知