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

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 134687个问题

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

function getData() {

//获取父级元素

var parentData = document.getElementsByClassName("content");

//获取所有的子元素

var allChild = document.getElementById("box1");

//获取屏幕的宽度

var scereenWidth = document.documentElement.clientWidth;

//获取一张图片宽度

var childwidth = allChild[0].offsetWidth;

//计算水平方向能摆放的个数

var rowNum = Math.floor(scereenWidth / childwidth);

console.log(rowNum);

}

getData();

老师控制台一直报错是怎么回事

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

<!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>
</head>
<body>
<div class="div1">
    <div class="div2">
        这是div2
    </div>
    <button>点我</button>
</div>
    <script>
        /*node方法
        1.appendChild()
        node1.appendChild(node2)  将节点2插入在node1最后面
        注意 js创建的节点对象之间没有文本对象
        2、hasChildNodes()  此方法返回一个布尔值  是否有子节点
        3、cloneNode（布尔值） 克隆节点，布尔值如果true 则克隆子节点 如果为flase 则不克隆子节点
          克隆节点不会克隆原节点的事件 但是会复制属性和内容   

        */
     var div1=document.querySelector('.div1');
     var div3=document.createElement('div');
     var div4=document.createElement('div');
     var but=document.querySelector('button');
     div3.innerHTML='lalal';
     div1.appendChild(div3);
     div1.appendChild(div4)
     console.log(div1.childNodes);
     var num=1;
     var str='这是第'+num+'克隆';
     but.onclick=function(){
        var clonebut=but.cloneNode(true);
       clonebut.innerHTML=str;
         div1.appendChild(clonebut);
      num+=1;
         console.log(num);
     }

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

老师这个事件里面的num累加怎恶保存到全局变量num

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据解析</title>
</head>
<body>
<form action="" method="get">
    姓名：<input type="text" name="userName"></br>
    年龄：<input type="text" name="age"></br>
    性别：<input type="text" name="sex"></br>
    <input type="submit">
</form>
<button>解析数据</button>
<script>
    var but=document.querySelector("button");
    function f(outInfo){
        var obj={};
        var infoStr=outInfo;
        var realInfo=infoStr.slice(1);
        var proArr= realInfo.split("&");
        for(var i=0;i < proArr.length;i++){
            var tempArr =proArr[i].split("=");
            obj[tempArr[0]]=tempArr[1];
        }
        return obj;
    }
    but.onclick=function () {
        var infoStr=f(document.location.search);
        console.log(infoStr);

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

这种应该没有什么吧

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

body>
    <div id="root">
        <button id="btu">
            <p id="text">内容</p>
        </button>
    </div>
    <script>
        var root=document.getElementById("root");
        var btu=document.getElementById("btu");
        var text=document.getElementById("text");
        root.onclick=function(){
            console.log("div");
        }
        btu.onclick=function(){
            console.log("btu");
        }
        text.onclick=function(){
            console.log("text");
        }
    </script>

老师，为啥第一段要打印div，不能打印root吗？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
</head>
<body>
<script>
    function Person(name,age,height,a) {
     this.userName=name;
     this.userAge=age;
     this.userHeight=height;
     this.userAbilitty=a;
    }
    var beixi=newPerson=("贾先生","18","60",function () {console.log("敲代码");})
    var shishi=newPerson=("刘诗诗","16","40",function () {console.log("2");})
    console.log(beixi);
    console.log(shishi);
</script>
</body>
</html>

老师我这个怎么是这样的怎么只出来最后一项内容呢？

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

老师好，控制提示框移动范围时，使用“if else”可以实现，但使用“switch”时没有效果。

应该是我的switch语句没写对（第35行代码），怎么写才正确？求指导，谢谢。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
<style>
    input{
        width: 300px;
        margin: 100px 600px 0px;
    }
    #tips{
        width: 30px;
        height: 25px;
        margin: 0px 750px;
        padding: 0;
        font-size: 18px;
        text-align: center;
        border: 1px solid aqua;
        position: absolute;
        display: none;
    }
</style>
</head>
<body>
    <input type="range" min="0" max="100" value="50">
    <div id="tips"></div>
<script>
    var input=document.querySelector('input');
    var tips=document.getElementById('tips');
    function move(){
        input.onmousemove=function () {
            var x=event.clientX;
            var Y=event.clientY;
            // 使用switch语句控制提示框移动范围????????????????????????????????????????
/*            switch (x) {
                case x<600:tips.style.left=-150+'px';
                    break;
                case x>900:tips.style.left=150+'px';
                    break;
                case x>=600&&x<=900:tips.style.left=(x-750)+'px';
                    break;
            }*/
            // 使用if语句控制提示框移动范围
            if (event.clientX>900){
                x = 900;
            }else if (event.clientX<600){
                x = 600;
            }else{
                tips.style.left=(x-750)+'px';
            }

            tips.innerHTML=input.value;

            // console.log('(x,y):('+x+','+'y'+')');
        }
    };
    input.onmousedown=function () {
        tips.style.display='block'
        move();
    };
    input.onmouseup=function () {
        tips.style.display='none'
        input.onmousemove=null;
    }
</script>
</body>
</html>

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

动态给一个div结构设置自定义属性（data-*），读到一个已存在自定义属性结构的div中的属性

老师我不理解这个题目是什么意思

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

老师基本数据类型中 js认为变量是不可变的，对变量的重新赋值其实是在内存中重新开辟了以块空间，变量名指向了新的空间吧

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

<!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');

  console.log(document.body.firstChild);//#text （body后面有回车）
  console.log(document.body.lastChild);//script
  console.log(span.firstChild.nodeValue);
  console.log(span.innerHTML);//也可以获取到span里面的文字内容，value不可以
  console.log(span.value);

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

老师您好，我想我问一下这个value是只能获取input那种在网页输入的值么

console.log(span.value);

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

老师，我这个怎么num怎么还是获取不到，按照视频的案例写的

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

老师，我这里没有attachEvent,请问这是怎么回事，
直接写上去运行拨错的。

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

一个是动态添加，一个是静态添加，动态添加是访问地址，静态添加是复制粘贴，老师不用回答，我这里是自己写点东西

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

从6分45秒开始，valid第二次进入function时不是应该也是true吗，那么if应该不执行呀。老师是不是口误了，到后面8分多钟完全绕来绕去没听懂。

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

老师，display: table-cell;是不是只对父元素的宽高设置为数值px的时候才起作用的？宽高为百分比的时候是不是不起作用？

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

同学您好