DOM操作练习(1)

作者: 天使投资 | 来源:发表于2018-05-29 20:22 被阅读0次

DOM操作练习(1)
DOM操作练习
DOM操作练习
会jquery 就能快速快速上手 vue？你仿佛在说笑
DOM操作练习(2)
简单DOM操作练习
11 js06 DOM
Linux安装软件
js高级知识点（第一天）
JavaScript-DOM操作

1.显示和隐藏盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>显示和隐藏盒子</title>
    <style>
    button {
        margin: 10px;
    }

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }
    </style>
</head>

<body>
    <button id="btn">隐藏</button>
    <div></div>
    <script>
    //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
    //步骤：
    //1.获取事件源和相关元素
    //2.绑定事件
    //3.书写事件驱动程序
    var btn = document.getElementById("btn");
    var div = document.getElementsByTagName("div")[0];

    btn.onclick = function() {
        if (this.innerHTML === "隐藏") {
            div.className = "hide";
            btn.innerHTML = "显示";


        } else {
            div.className = "show";
            btn.innerHTML = "隐藏";

        }
    }
    </script>
</body>

</html>

2.切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img id="icon" src="img/icon_01.png" alt="">
    <p></p>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var icon = document.getElementById("icon");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
        prev.onclick = function () {
            if (currentIndex === minIndex){ // 边界值
                currentIndex = maxIndex;
            }else { // 正常情况
                currentIndex --;
            }

            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };

        next.onclick = function () {
             if (currentIndex === maxIndex){ // 边界值
                 currentIndex = minIndex;
             }else { // 正常情况
                 currentIndex ++;
             }

             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");

            console.log(icon.src);
        };
    }
</script>
</body>
</html>

3.宠物相册

动物相册.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            margin: 50px;
        }

        #fj{
            list-style: none;
        }

        #fj li{
            float: left;
            margin-left: 10px;
        }

        #big_img{
            margin-left: 10px;
        }

        #des{
            margin: 10px;
            color: orangered;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!--大图描述-->
    <p id="des">蒲公英</p>
    <!--大图展示-->
    <img id="big_img" src="img/1.jpg" alt="" width="540">
    <!--小图列表-->
    <ul id="fj">
        <li>
            <a href="img/1.jpg" title="蒲公英">
                <img src="img/1.jpg" width="100" alt="蒲公英">
            </a>
        </li>
        <li>
            <a href="img/2.jpg" title="热气球">
                <img src="img/2.jpg" width="100" alt="热气球">
            </a>
        </li>
        <li>
            <a href="img/3.jpg" title="别致小屋">
                <img src="img/3.jpg" width="100" alt="别致小屋">
            </a>
        </li>
        <li>
            <a href="img/4.jpg" title="高山湖水">
                <img src="img/4.jpg" width="100" alt="高山湖水">
            </a>
        </li>
        <li>
            <a href="img/5.jpg" title="高速公路">
                <img src="img/5.jpg" width="100" alt="高速公路">
            </a>
        </li>
    </ul>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var ul = document.getElementById("fj");
        var aList = ul.getElementsByTagName("a");
        // console.log(aList[1]);

        var des = document.getElementById("des");
        var big_img = document.getElementById("big_img");

        // 2.绑定事件
        for(var i=0; i<aList.length; i++){
            aList[i].onclick = function () {

                big_img.src = this.href;
                des.innerHTML = this.title;

               /* console.log(this.href);
                console.log(this.title);*/
                return false;
            }
        }
    }
</script>
</body>
</html>

4.关闭小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: relative;
            display: inline-block;
        }

        #close{
            position: absolute;
            right: 18px;
            top:18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="icon" src="img/img1.jpg" alt="" width="258">
    <img id="close"  src="img/close.jpg" alt="" width="40">
</div>
<script type="text/html">
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var close = document.getElementById("close");

        // console.log(box, close);

        // 2. 给事件源绑定事件
        close.onclick = function () {
            box.style.display = "none";
        }
    }
</script>
<script>
    window.onload = function () {
        // 1. 获取标签
        var close = document.getElementById("close");

        // 2. 监听点击事件
        close.onclick = function () {
            this.parentNode.style.display = "none";
        }
    }
</script>
</body>
</html>

5.二维码显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #e_coder{
            width: 50px;
            height: 50px;

            background: url("images/e_coder_normal.png") no-repeat;

            position: fixed;
            top: 40%;
            left: 0;

            cursor: pointer;
        }

        #e_app{
            position: absolute;
            left: 50px;
            top: -50px;

            /*隐藏*/
            display: none;
        }
    </style>
</head>
<body>
    <div id="e_coder">
        <div id="e_app">
            <img src="images/e_coder.jpg" alt="公众号" width="150">
        </div>
    </div>

<script>
    window.onload = function () {
        // 1.获取相应的标签
        var e_coder = document.getElementById("e_coder");
        var e_app = document.getElementById("e_app");
        
        // 2.监听鼠标进入
        e_coder.onmouseover = function () {
            // 2.1 改变背景图片
            this.style.background = 'url("images/e_coder_selected.png") no-repeat';
            // 2.2 显示二维码
            e_app.style.display = "block";
        };

        // 3. 监听鼠标的离开
        e_coder.onmouseout = function () {
            // 3.1 改变背景图片
            this.style.background = 'url("images/e_coder_normal.png") no-repeat';
            // 3.2 隐藏二维码
            e_app.style.display = "none";
        }
    }
</script>
</body>
</html>

6. 图标切换

图标切换.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box{
            border: 1px solid #cccccc;

            width: 360px;
            height: 70px;

            padding-top: 360px;
            margin: 100px auto;

            background: url("images/01big.jpg") no-repeat;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;

            cursor: pointer;
        }
    </style>
</head>
<body>
   <div id="box">
       <ul>
           <li><img src="images/01.jpg" alt=""></li>
           <li><img src="images/02.jpg" alt=""></li>
           <li><img src="images/03.jpg" alt=""></li>
           <li><img src="images/04.jpg" alt=""></li>
           <li><img src="images/05.jpg" alt=""></li>
       </ul>
   </div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var allLi = box.getElementsByTagName("li");

        // 2. 监听鼠标的进入
        for(var i=0; i<allLi.length; i++){
            var sLi = allLi[i];
            sLi.index = i+1;
            sLi.onmouseover = function () {
                console.log(this.index);
                box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
            }
        }
    }
</script>
</body>
</html>

7.百度换肤

百度换肤.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;

            vertical-align: top;
        }

        body{
            background: url("images/1.jpg") no-repeat;
            background-size:cover;
        }

        #box{
            background-color: rgba(255, 255, 255, .5);
        }

        #box ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
        }


        #box ul li img{
            width: 180px;
            height: 120px;

            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
    </div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var allLis = box.getElementsByTagName("li");

        // 2. 遍历监听
        for(var i=0; i<allLis.length; i++){
            // 2.1 取到当个li
            var sLi = allLis[i];
            sLi.index = i+1;
            // 2.2 绑定事件
            sLi.onclick = function () {
                document.body.style.background = 'url("images/'+ this.index +'.jpg") no-repeat';
            }
        }
    }
</script>
</body>
</html>

DOM操作练习(1)
1.显示和隐藏盒子。 2.切换图片 3.宠物相册 4.关闭小广告 5.二维码显示和隐藏 6. 图标切换 7.百度换肤
DOM操作练习
题目1： dom对象的innerText和innerHTML有什么区别？ innerText是一个可写属性，返回元...
DOM操作练习
dom对象的innerText和innerHTML有什么区别？ innerHTML属性在读模式下，innerHTM...
会jquery 就能快速快速上手 vue？你仿佛在说笑
vue和jquery 操作DOM的区别 jquery 操作Dom 的思维：获取Dom元素步骤： 1、在dom中输...
DOM操作练习(2)
1.transform的运用 2.表单验证 3.上传图片格式验证 4.发表评论 5.九宫格布局
简单DOM操作练习
2019-4-28 更新, 给大家一点提示完成如下所示的“辣鸡记事本” 要求: 输入框：当在输入框内按下回车...
11 js06 DOM
DOM、DOM结构树、dom元素系列操作： 1、DOM：文档对象模型(Document Object Model ...
Linux安装软件
1020node.js学习看手册练习DOM操作或者可以看书《JavaScript DOM编程第二版》 Linux...
js高级知识点（第一天）
1、javascript包含：ECMAScript（语法规范）、Dom（操作dom元素的api）、Bom（操作浏览...
JavaScript-DOM操作
JavaScript-DOM操作 1.DOM DOM(document object model),文档对象模型。...