有效沟通问答-【官方】百战程序员_IT在线教育培训机构

html,
body, 
div, 
span,
applet, 
object, 
iframe,
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre,
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code,
del, 
dfn, 
em, 
img, 
ins, 
kbd, 
q, 
s, 
samp,
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var,
b, 
u, 
i, 
center,
dl, 
dt, 
dd, 
ol, 
ul, 
li,
fieldset, 
form, 
label, 
legend,
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td,
article, 
aside, 
canvas, 
details, 
embed, 
figure, 
figcaption, 
footer, 
header, 
hgroup, 
menu, 
nav, 
output, 
ruby, 
section, 
summary,
time, 
mark, 
audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
menu, 
nav, 
section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

index.css

 a {
            text-decoration: none;
            color: #000;
        }
        
        body {
            margin: 80px;
        }
        
        .tab {
            border: 1px solid #ddd;
            width: 498px;
            height: 130px;
        }
        /* 头部区域 */
        
        .tab_header {
            height: 38px;
            background-color: #253e3e;
            position: relative;
            color: #fff;
            font-weight: 700;
        }
        
        .tab_header ul {
            width: 501px;
            position: absolute;
            /* 设置竖线合并 */
            left: -1;
        }
        
        .tab_header ul li {
            float: left;
            width: 98px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            padding: 0px 1px;
        }
        
        .tab_header ul li:hover {
            cursor: pointer;
            /* background-color: #f40; */
            transition: all .3s;
        }
        /* 内容区域 */
        
        .tab_body ul {
            margin-top: 10px;
        }
        
        .tab_body ul li {
            float: left;
            width: 220px;
            margin: 10px;
        }
        
        .tab_body ul li a:hover {
            color: red;
        }
        
        .tab_body .dom {
            display: none;
        }

index.html

 <div class="tab">
        <!--头部-->
        <div class="tab_header">
            <ul>
                <li>公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>

        <!--身体部分-->
        <div class="tab_body">
            <div class="dom" style="display: block;">
                <ul>
                    <li>
                        <a href="javascript;">数据七夕：金牛爱送玫瑰</a>
                    </li>
                    <li>
                        <a href="javascript;">阿里打造“互联网监管”</a>
                    </li>
                    <li>
                        <a href="javascript;">10万家店60万新品</a>
                    </li>
                    <li>
                        <a href="javascript;">全球最大网上时装周</a>
                    </li>
                </ul>
            </div>

            <div class="dom">
                <ul>
                    <li>
                        <a href="javascript;">“全额返现”要管控啦</a>
                    </li>
                    <li>
                        <a href="javascript;">淘宝新规发布汇总（7月）</a>
                    </li>
                    <li>
                        <a href="javascript;">炒信规则调整意见反馈</a>
                    </li>
                    <li>
                        <a href="javascript;">质量相关规则近期变更</a>
                    </li>
                </ul>
            </div>

            <div class="dom">
                <ul>
                    <li>
                        <a href="javascript;">阿里建商家全链路服务</a>
                    </li>
                    <li>
                        <a href="javascript;">个性化消费时代来临</a>
                    </li>
                    <li>
                        <a href="javascript;">跨境贸易是中小企业机</a>
                    </li>
                    <li>
                        <a href="javascript;">美妆行业虚假信息管控</a>
                    </li>
                </ul>
            </div>

            <div class="dom">
                <ul>
                    <li>
                        <a href="javascript;">接次文件，毁了一家店</a>
                    </li>
                    <li>
                        <a href="javascript;">账号安全神器</a>
                    </li>
                    <li>
                        <a href="javascript;">最新版微信上线</a>
                    </li>
                    <li>
                        <a href="javascript;">信用卡中的小套路</a>
                    </li>
                </ul>
            </div>

            <div class="dom">
                <ul>
                    <li>
                        <a href="#">公益图书--我们来啦</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

index.js

// 获取元素 -- 利用事件委托
        const lis = document.querySelectorAll('.tab_header li');
        const content = document.querySelectorAll(".tab_body .dom");

        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', onClick(i));

            function onClick(i) {
                return () => {
                    for (let j = 0; j < content.length; j++) {
                        content[j].style.display = 'none';
                        // lis[j].style.backgroundColor = '#253e3e';
                        // lis[j].style.color = '#fff';

                    }
                    content[i].style.display = 'block';
                    lis[i].style.backgroundColor = '#f40';
                }
            }
        }

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 196楼

这个数据类型是不是还有其他的？

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 197楼

/^[a-zA-Z0-9_\$]{1,}$/

这个是什么意思啊，没太懂

WEB前端全系列/第二阶段：JavaScript编程模块/正则对象 198楼

<script>
			function info(){
				console.log('我是XXX');
				console.log('我会唱歌');
				function func(){
					console.log('开始表演');
				}
				return func;
			}
			var  r=info();
			r();
		</script>

问题1：我不太懂返回值，renturn返回给调用者，返回到哪里呀，就是说我怎么知道他返回了，然后return这句话的意义是什么。

问题2 ：

var  r=info();
r();

是把上面的函数又重新写成另一个函数r(); 我可以这样理解吗？但是不懂原理

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 199楼

function getname(){
            var username = "itbaizhan";
            function getInnerName(){
                return username;
            };
            return getInnerName
        };
        var result = getname();
        var uname = result();
        console.log(uname);
        
        
        
        function add(){
            var name1 = "hello"
            return name1
        }
        console.log(add());

老师在学到闭包的特点时，若果需要读取内部的变量为什么一定要是在添加一个函数呢，完全可以第一个函数时直接return出来就可以读到内部函数，为什么要这么麻烦呢，意义在哪呢

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 200楼

是不是换老师怎么讲的这么详细我喜欢好评

WEB前端全系列/第二阶段：JavaScript编程模块/字符串与数组 201楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沈番薯大傻逼</title>
</head>
<body>
    <script>
      setInterval( function() {
           var doTitle=document.title;
             var arr1=doTitle.split('');
            //   console.log(arr1);
              arr1.push(arr1.shift());
              var str=arr1.join('');
              document.title=str;
              },500)
              

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

老师，为啥标题不会自己转

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 202楼

 function getstr(length){
            var JHGHGKJ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
            var str='';
            for(var i=0;i<length;i++){
            var yang=Math.floor(Math.random()*JHGHGKJ.length);
            str+=JHGHGKJ.substring(yang,yang+1);
            }
            console.log(str);
        }
        getstr(6);

str+=JHGHGKJ.substring(yang,yang+1);

这个老师讲的我还是不太明白？

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 203楼

老师，这个tostring()方法讲解在哪里

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 204楼

我64位的操作系统，为什么返回win32

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 205楼

老师，var为什么是局部变量，这个的话，是两个script内都可以作用了。

<script>
 var a=1;
 console.log(a);
  </script>
  <script>
 var b=1;
 console.log(b);
  console.log(a);
  </script>

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 206楼

为什么我的效果是有不过不是动态的得手动刷新

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 207楼

去掉自执行函数后，js报错，发现i是5了。这是为什么？

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 208楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html事件</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: paleturquoise;
        }
        .div2 {
            margin: 25px auto;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1" onclick="text1()">div1
        <div class="div2" onclick="text3(); text2()">div2</div>
    </div>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('.div2');
    function text1() {
        console.log('这是第一个函数');
    }
    function text2() {
        div2.setAttribute('onclick',null);
        console.log('这是第二个函数');
    }
    function text3() {
        div2.setAttribute('onclick',null);
        console.log('这是第三个函数');
    }
    // div2.setAttribute('onclick',null);
</script>
</body>
</html>

问题一：我在函数里面写了事件移除的代码，为啥点击div2还是执行了代码？

问题二，既然我们要删除事件了，为啥代码不写在外面呢？就像最后一行注释的代码。

QQ截图20201208222729.png

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 209楼

为什么点提交按钮没有打印出“提交呢”

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 210楼

同学您好