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

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

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

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

    =;
    =;
    =+;
    =-;
    =*;
    =/;
    =%;
    .();

像这样浏览器只解析出最后的结果？上面的怎么都没看到解析出来呢

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

老师，为啥ul采用事件委托时用 onclick，第三个效果就没法实现呢？

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

    <style>
        .div1{width: 200px;height: 200px;background-color: blue;}
        .div2{width: 100px;height: 100px;background-color: yellow;margin: 25px auto;}
    </style>
</head>
<body>
<div class="div1">div1
    <div class="div2">div2</div>
</div>
<script>
var div1=document.querySelector('.div1');
div1.attachEvent('onclick',function () {
    console.log('这是div1一次');

})
</script>

老师，我就是用IE浏览器的，为什么还报错呀，是因为版本的问题吗

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则-检索模式-1</title>
</head>
<body>
<script>
    //检索模式====表达式模式---元字符模式--量词模式
    //表达式模式--a][abc]--b][0-9]--c][m|n]
    var str="12abc12ABC";
    var str1='你好，佛可栏，回家吃饭了，';
    var newStr4=str.replace(/(ab)/gi,'go');
    var newStr1=str1.replace(/[佛][可][栏]/g,'张账务');
    var newStr2=str1.replace(/佛可栏/g,'张账务');
    var newStr3=str1.replace(/(佛可栏)/g,'张财务');
    console.log(newStr1);
    console.log(newStr2);
    console.log(newStr3);
    console.log(newStr4);
</script>
</body>
</html>

老师，这个同学这个newStr4，他的正则主体为什么加了括号还可以检索到，不是应该连小括号都检索吗

WEB前端全系列/第二阶段：JavaScript编程模块/算法与数据 424楼

  <div class="div1">div1
      <div id="div2">div2</div>
  </div>
  <span>这是span标签</span>
<script>
 var el=div1.firstChild;
 var i=1;
 while (el){
     console.log(i+'.'+el.nodeName);
     el=el.nextSibling;
     i++;
 }
</script>

老师，我弄div1的子节点怎么出不来呀，老师帮忙看一下吧，谢谢

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

我自己解决了,谢谢!!!原来是控制和页面输出的符号不一样

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

let alt="";

for (let i=1;i<=5 ; i++) {

let blank="";

for (let j=1;j<=5-i; j++) {

blank+=" ";

}

let stars="";

for (let m=1; m<=2*i-1; m++) {

stars+="*";

}

alt+=blank+stars+"\n";

}

console.log(alt);

document.write(alt+"<br/>");

</Script>

页面输出的效果出了br和n不一样,为什么第一距离页面输出和控制台的不一样呢

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

=;
(=;<=;++){=;
    (=;<=-;++){+=;
    }
    =;
    (=;<=*-;++){
        +=;
    }
    +=++;
}
.();
.()

爲什麽控制臺輸出和頁面輸出的格式不一樣呢？

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

1！+2！+3！+4！+5！求结果

老师我对这个题没有思路不知道该从哪下手，不懂阶乘

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有hover样式的导航栏</title>
</head>
<body>
        <script>
            // 创建ul并设置样式
            var ul=document.createElement('ul');
            ul.style.cssText='padding: 0; list-style: none;';

            // for循环创建li并设置属性，并设置hover样式
            var titleArr=['旅游','美食','军事','科技','数码'];
            for (var i=0; i<titleArr.length; i++) {
                var li=document.createElement('li');
                li.style.cssText='width: 80px; height: 40px; line-height: 40px;\
                background-color: skyblue; display:inline-block; text-align: center;';
                li.innerHTML=titleArr[i];
                ul.appendChild(li);
                li.onmouseenter=function () {
                    this.style.cssText='background-color: yellow;';
                }
                li.onmouseleave=function () {
                    this.style.cssText='background-color: skyblue;';
                }
            }
            document.body.appendChild(ul);
        </script>
</body>
</html>

鼠标不放上去时，是第一张图的效果，放上去之后就变成2、3图的效果

QQ截图20201211095739.png

QQ截图20201211095751.png

QQ截图20201211095725.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决浏览器事件绑定兼容性问题</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">div1
        <div class="div2">div2</div>
    </div>
<script>
    var div1=document.querySelector('.div1');
    var div2=document.querySelector('.div2');

    function func () {
        console.log('这是div');
    }
    // function func2 () {
    //     console.log('IE里的div');
    // }

    var cleanBug={
        add:function (ele,type,func) {
                if (ele.addEventListener) {
                    ele.addEventListener(type,func);
                }else {
                    ele.attachEvent('on'+type,func);
                }
            },
        remove:function (ele,type,func) {
                    if (ele.removeEventListener) {
                        ele.removeEventListener(type,func);
                    }else {
                        ele.detachEvent('on'+type,func);
                    }
                }    
            }

    cleanBug.add(div1,'click',func);
    // (div2,'click',func);
</script>    
</body>
</html>

老师，我问两个问题：

1、如果两个div是嵌套关系，我给外面的div敲击事件，里面的div点击它也会产生敲击事件？

2、我想给div1和div2各一个敲击事件且让他们打印的值不一样，代码该怎么修改？

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

<!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) 432楼

[23,12,43,25,45,66],求出最大值和最大值的下标

老师，求他的最大值下标为什么用indexOf呢，这不是查这个数第一次出现的位置吗，没有一样的数呀

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

<script>
  function baozi(mianfen,zhurou,dacong) {
      console.log(mianfen);
      console.log(zhurou);
      console.log(dacong);
      return '包子';
  }
  baozi('面粉','猪肉','大葱');
  console.log('包子');
</script>

老师，我看下面有人提问说怎么不是包子，您说是没有打印出来，我就写了，为啥不对呢，怎么结果是包子，面粉，猪肉，大葱呢，是我加的不对吗，返回值的意思不太懂

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

<!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>
    <div></div>
    <h2>恐怖分子</h2>
    <button>开枪</button>
    <script>
        
        var h2=document.querySelector('h2');
        document.querySelector('button').onclick=function () {
            h2.style.cssText='color:red;text-align:center;';
            h2.innerHTML='恐怖分子已被击杀！！！！去死吧';
        }

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

老师，如果<h2>标签里面本来就有文本，innerHTML是直接把文本给替换了，而不是在原来文本后面继续添加，我想在原来的文本后面添加，该怎么操作呢？

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

同学您好