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

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<form action="" method="get">
  <input type="text" name="userName"/>
  <input id="in" type="submit"/>
</form>
<button  id="but">获取发送信息</button>
<script>
  
  document.getElementById("but").onclick=function(){
    console.log(document.location.search);
  }



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

老师，现在这个js代码是点击

<button  id="but">获取发送信息</button>

这个id=‘but’的button从而在控制台看到文本框的信息，

老师为什么不能把下面的onclick功能放到id=’in‘的那个submit上呢，就是点击一次就可以把文本框的信息输入到控制台中

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
         var arr=['首页','游戏','直播','视频'];
        var ul=document.querySelector('ul');
        var li=document.querySelectorAll('li');
        for(var i=0;i<arr.length;i++){

          li[i].innerHTML=arr[i];

        }
        ul.onclick=function(){
            li.style.cssText='background-color:red';
        }
    </script>
</body>
</html>

老师哪里写错了吗

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义右键菜单案例</title>
    <style>
        ul{width: 200px;background: #f8f8f8;border: 1px solid #cccc;list-style: none;padding: 0;display: none;position: absolute;}
        ul li{height: 30px;line-height: 30px;font-size: 14px;padding-left: 10px;cursor: pointer;}
        ul li:hover{background-color: teal;}
    </style>
</head>
<body>
    <textarea cols="30" rows="10"></textarea>
    <ul>
        <li>你是谁?</li>
        <li>你确定要离开本页面吗？</li>
        <li>选中的内容跳转到百度搜索</li>
        <li>输入的内容跳转到百度搜索</li>
    </ul>
    <script>
        //系统右键菜单禁用事件【contextmenu】
        document.oncontextmenu = function (eve) {
            return false;   //return false表示事件禁用
        };
        //鼠标右键点击任意位置显示右键菜单
        var ul = document.querySelector('ul');
        document.onmouseup = function(eve){
            //eve.button可以判断用的是鼠标的哪一个按钮
            //左键是0，滚轮是1，右键是2
            //console.log(eve.button);
            if(eve.button == 2){
                //设置鼠标点击的位置
                //记住记住记住，必须给‘px’
                ul.style.left = eve.clientX + 'px';
                ul.style.top = eve.clientY + 'px';
                ul.style.display = 'block';
            }else{
                ul.style.display = 'none';
            }
        }
        //采用事件委托，点击每一个选项时触发的事件
        ul.onclick = function(eve){
            if(eve.target.innerHTML == '你是谁?'){
                alert('我是我')
            }else if(eve.target.innerHTML == '你确定要离开本页面吗？'){
                //判断点击的是确定还是取消
                if(confirm(eve.target.innerHTML == '你确定要离开本页面吗？')){
                    window.close();
                }
            }else if(eve.target.innerHTML == '选中的内容跳转到百度搜索'){
                var result = document.getSelection().toString();//getSelection()获取选中的内容,然后转成字符串就可以搜索了
                window.open('http://www.baidu.com/s?wd=' + result);
            }else{
                var result1 = prompt('搜索什么');
                window.open('http://wwww.baidu.com/s?wd=' + result1);
            }
        }
    </script>
</body>
</html>

老师，我的第三个只能跳到百度，不能直接选中搜索

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

老师，想请您帮我看看如下代码，为什么我这样做，在浏览器页面没有任何输出？

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .center {
            width: 1201px;
            margin: 0 auto;
        }
        
        .box {
            height: 80px;
            margin-top: 40px;
            background-color: skyblue;
        }
    </style>

  <div class="box center"></div>

<script>
    window.onload = function() {
        //得到元素
        var box = document.querySelector('.box');

        var arr = ["手机", "手表", "箱包", "皮具", "零食"];

        //创建ul元素并设置相关样式
        var ul = document.createElement('ul');
        var ul_style = document.createAttribute('style');
        ul_style.value = "list-style: none;overflow: hidden;";
        ul.setAttributeNode(ul_style);

        //动态地添加相关元素和属性及样式
        for (var i = 0; i < arr.length; i++) {

            //创建li元素并设置相关样式
            var li = document.createElement('li');
            var li_style = document.createAttribute('style');
            li_style.value = "float: left;width:100px;height: 40px;line-height: 40px;\
    text-align: center;";
            li.setAttributeNode(li_style);

            //创建a元素并设置相关样式
            var a = document.createElement('a');
            var a_style = document.createAttribute('style');
            a_style.value = "color: #fff;font-size: 16px;text-decoration: none;";
            a.setAttributeNode(a_style);

            //给每个a标签添加相应的文字
            a.innerHTML = arr[i];

            //将相关元素依次“传”到页面
            li.appendChild(a);
            ul.appendChild(li);
            ul.appendChild(box);
        }
        document.body.appendChild(box);
    }
</script>

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

老师这报的是啥错误，还有这句是啥意思

eve.target.contentWindow.name

<!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>
    <button>跨域获取</button>
    <script>
        /* Window.name 属性可以在不同的页面（或者不同域名）加载后依旧存在，并且可以支持非常长的name值
        ，跨域传输
        */
    var btn=document.querySelector('button');
    btn.onclick=function(){
        var iframe=document.createElement('iframe');
        iframe.src='page.html';//保存加载了保存了信息的页面
        iframe.style.display='none';
        document.body.append(iframe);
        // 当加载完成Iframe 表示可以使用page的window.name信息
        iframe.onload=function(eve){
            var IframWindownName=eve.target.contentWindow.name;
            eval(IframWindownName);//解析page的winodw.name内容，
            console.log(num);
        }
    }
    </script>
</body>
</html>

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

为什么这样打印出的result是四个函数，不是执行后的数组呢

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

case后面的表达式不可以用且或非逻辑运算符吗？为什么

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

老师，ppt当中有个“var a；在这个例子当中a表示一个变量，a是变量的变量名”，请问var是什么?为什么老师在第三节课中提到var是变量？谢谢老师

WEB前端全系列/第二阶段：JavaScript编程模块/JavaScript基础与变量 68楼

这里showTop后面没什么没有括号，showTop（）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 20px;
            height: 20px;
            border: 1px solid  black;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="50">
<div></div>
<script>
    var input=document.querySelector("input");
    var div=document.querySelector("div");
    input.onmounsemove=function () {
        console.log("(x,y):("+event.clientX+","+event.clientY+")");
    }
</script>
</body>
</html>

本视频6分57秒，我的代码和老师一摸一样但是出不来效果，“event”这个单词显示有删除线，不知道是什么意思，是因为这个显示不出效果吗？怎样才能没有删除线

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

老师，这个实操要添加的是什么？js第六章的实操2

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:30px;
            height:15px;
            border: 1px solid black;
            line-height: 15px;
            align:center;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="0"/>  <!--value是当前值-->
<div></div>
<script>
    var div=document.querySelector("div");
    var input=document.querySelector("input");
    var flag=false;
    input.onmousemove=function(){
        div.innerHTML=input.value;
        if(flag) {
            //console.log("(x,y)的值为（" + event.clientX + "," + event.clientY + ")");

            if (event.clientX > 134) {event.clientX = 134;}
            if (event.clientX < 14) {event.clientX = 14;}
            div.style.left = event.clientX + 'px';//style对象的属性值都是字符串，单位包括在字符串中。所以这里用连接符，连接一个字符，使其变成字符串。
            div.style.display = 'block';
        }
    }
    input.onmousedown=function(){//鼠标按下时触发
        flag=true;
        div.style.display='none';
    }
    input.onmouseup=function(){//鼠标抬起时触发
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

我这个绝对定位，距离左边距离的这个功能不能实现。div到第一个位置停止了，但我的程序出来效果图div还可以继续移动

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

最后一句不明白，+num1+是表示的什么意思

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

这个练习题，不应该是documen.body么？document.documentElement是可以窗口的

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

<div>
<div  class="div1">div1</div>
<div  id="div2">div2</div>
</div>
<button  id="but">点我</button>

<body>

<script>
    var but=document.getElementById('dut');
    var div=document.querySelector('div');
    var div1=document.querySelector('.div1');
    var div2=document.getElementById('div2');
            but.onclick=function () {
            if (div.hasChildNodes()){
                div.removeChild(div.firstChild);
            }else {
                alert('已经没有了');
            }
        }

</script>

老师，这个地方为什么后报错呢？是浏览器不兼容吗？

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

同学您好