Day79向JavaScript进阶的第四天

最新推荐文章于 2024-07-17 09:19:37 发布

S.Y.X

最新推荐文章于 2024-07-17 09:19:37 发布

阅读量115

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/mmmmmmmmmmz/article/details/107652445

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

隔行变色

在这里插入图片描述

全选反选

在这里插入图片描述

tab栏切换

在这里插入图片描述

H5获取属性的方法

在这里插入图片描述

父节点

在这里插入图片描述

子节点的获取

在这里插入图片描述

子节点第一个子元素和最后一个子元素

在这里插入图片描述

新浪下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            display: block;
            height: 200px;
            width: 300px;
            margin: 200px auto;
            /* background-color: red; */
        }

        .nav li {
            width: 60px;
            float: left;
            /* background-color: rgb(233, 156, 156); */
            list-style: none;
        }

        .nav a {
            display: inline-block;
            width: 60px;
            height: 50px;
            text-decoration: none;
            line-height: 50px;
            text-align: center;
        }

        .body a {
            border: 1px solid #cccccc;
            border-top: none;
        }

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

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul class="body">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>

        </li>
        <li>
            <a href="">微博</a>
            <ul class="body">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>

        </li>
        <li>
            <a href="">微博</a>
            <ul class="body">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>

        </li>
        <li>
            <a href="">微博</a>
            <ul class="body">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>

        </li>
        <li>
            <a href="">微博</a>
            <ul class="body">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>

        </li>

    </ul>
    <script>
        //获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; //得到五个小li
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

兄弟节点

在这里插入图片描述

创建和添加节点

在这里插入图片描述

创建和添加和删除节点—案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .head {
            width: 500px;
            margin: 200px auto;
        }

        textarea {
            height: 100px;
            width: 200px;
            padding-top: 10px;
            padding-left: 10px;
            font-size: 14px;
        }

        ul {
            width: 280px;
        }
    </style>
</head>

<body>
    <div class="head">
        <textarea name="" id=""></textarea>
        <button class="submit">提交</button>
        <button class="delete">删除</button>
        <ul></ul>

    </div>
    <script>
        var sub = document.querySelector('.submit');
        var del = document.querySelector('.delete');
        var text = document.querySelector('textarea');

        var ul = document.querySelector('ul');
        sub.onclick = function () {
            if (text.value == '') {
                alert('您输入的内容不能为空！')
                return false;
            } else {
                var lili = document.createElement('li');
                lili.innerHTML = (text.value) + "<a href='javascript:;' style='float:right'>删除</a>";
                ul.appendChild(lili);
                // 删除元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
        del.onclick = function () {
            if (ul.children.length == 0) {
                alert('删除失败，您的留言板为空');
                return false;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

</html>