学习前端第一天（js篇）

最新推荐文章于 2024-10-20 18:23:51 发布

ZERO_Wule

最新推荐文章于 2024-10-20 18:23:51 发布

阅读量179

点赞数 1

文章标签：学习

本文链接：https://blog.csdn.net/m0_52477051/article/details/126187563

版权

前端小白自学B站视频，今日练习了三个项目：

1、tab导航栏：

这个项目是模仿京东的商品介绍的功能，能够实现点击任意板块能够显示对应的功能板块。

主要使用了排他思想和自定义属性（setAttribute()）。通过for循环给每个li设定自定义索引值，然后再用一次循环将每个li元素的样式先全部清除，再把触发点击事件的元素添加class。通过自定义索引值，将触发点击事件的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
</style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class='item'>
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for( var i = 0; i< lis.length;i++){
            lis[i].setAttribute('index', i);
            lis[i].onclick = function(){
                for(var j = 0;j< lis.length;j++){
                    lis[j].className = ''
                }
                this.className = 'current'
                var index = this.getAttribute('index');
                for(var k = 0;k<items.length;k++){
                    items[k].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }

    </script>
</body>
</html>

2、仿新浪下拉菜单：

这个小项目主要使用了onmouseover、onmouseout和element.children。

通过querySelector()方法获取到class='nav'的元素，再使用element.children得到子类，然后绑定onmouseover、onmouseout事件，使得鼠标放在对应单元格的时候，对应的下拉栏显示（display = 'block'），如果鼠标移开，下拉栏就隐藏(display = 'none')。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <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;
        // children的第一个孩子是<a>，第二个孩子是<ul>
           /*  onmouseover,onmouseout */
        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';
            }
        }
        console.log(nav.nextSibling);
        
    </script>
</body>
</html>

3、简易添加留言：

这个小项目主要使用了createElement()、appendChild()和insertBefore()方法。

通过给提交按钮绑定点击事件，创建新节点即<li>。

Ps:往下排列(appendChild)、往上排列（insertBefore）；

insertBefore使用方法：insertBefore（ele,ele的父节点）。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <textarea name="" id=""></textarea>
    <button type="submit">发布</button>
    <ul>
       
    </ul>
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function(){
        if(text.value ==''){
            alert('不能输入空白字符');
        }
        else{
            var li = document.createElement('li')
            li.innerHTML = text.value;
            // 往下排列(appendChild):
            // ul.appendChild(li);
            // 往上排列（insertBefore）:
            ul.insertBefore(li,ul.children[0]);
        }
    }

    </script>
</body>
</html>

这就是本小白一下午练习的三个小项目~最近打算在学习js的同时开始学习Vue...

看了下几个月前写的Vue练习已经看不懂了...

2022.8.6 0.17