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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div  class="div1">div1
    <div  id="div2">div2</div>
</div>
<span>这是span标签</span>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('#div2');
    var span=document.querySelector('span');
    /*
    1.textContent
    描述：返回当前节点和它的所有后代节点的文本内容。
     var result=document.getElementById('divA').textContent// This is some text
     console.log(result);
     2.nodeValue
     描述：nodeValue属性一般只用于Text节点
     console.log(span.firstChild.nodeValue);
     span.firstChild.nodeValue='新的span值';
     3.childNodes属性
     描述：childNodes属性返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点
     例子：
     var childList=div1.childNodes;
     console.log(childList);
     console.log(childList.length);
     console.log(childList instanceof  Array);
     console.log(childList[1]);
     4.firstChild/ lastChild
     描述：返回第一个\最后一个子节点，如果不存在返回null
     console.log(div1.firstChild);
     console.log(div1.lastChild);
     */
        console.log(document.body.firstChild);
        console.log(document.body.lastChild);
</script>
</body>
</html>

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

在第一种方法中，array和arr[i]有什么关系？为什么打印array是arry[i]的结果呢？没搞懂这个过程

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

没搞懂Object本身和实例的概念

感觉好抽象

WEB前端全系列/第二阶段：JavaScript编程模块/函数与对象 199楼

老师你好，关于如下代码的跨域传输遇到了一个问题，希望老师点播一下，谢谢！

<script>
        //page.html的
        var num = 10;
        window.name = 'var num=[1,2,3];';
    </script>

 <button>跨域传输</button>

<script>
        //如果想要获取一个页面内的信息，那么必须先加载
        var but = document.querySelector('button');

        but.onclick = function() {
            var iframe = document.createElement('iframe');
            iframe.src = 'page.html'; //加载保存了信息的页面
            iframe.style.display = 'none';
            document.body.appendChild(iframe);

            //当iframe加载完毕，意味着window.name的内容已经被赋予完毕
            iframe.onload = function(eve) {
                var iframeWindowName = eve.target.contentWindow.name;
                //console.log(iframeWindowName);
                eval(iframeWindowName); //将字符串解析成代码
                console.log(num);
            }
        }
    </script>

此时当我点击“跨域传输”按钮后则出现了如下情况：

WEB前端全系列/第二阶段：JavaScript编程模块/面向对象编程 200楼

啊？为什么给box设置浮动也能浮动啊？不应该给boximg吗

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

为什么我的vscode写cssText没用

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

老师你好，在做这个tab栏的时候，有一部分逻辑一直实现不了：

我想实现的是，当点击“规则”时显示其对应的内容，并且当鼠标移到“规则”对应的内容上时，“规则”的背景颜色为淘宝红，那么当点击“论坛”时，前面的“规则”所对应的背景颜色应该恢复为默认颜色，而不是淘宝红，就这里一直实现不了这个逻辑，想请老师指点一下：

源码：

reset.css

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模型 203楼

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

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

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

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

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

<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 206楼

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模型 207楼

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

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

<!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模型 209楼

 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 210楼

同学您好