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

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

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

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

时间排序推荐排序

老师为什么引入这个会有这样的提醒

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用 16楼

<li>

<li>child item1</li>

<li>child item2</li>

</ul>

</li>

<span>Hello</span>

</ul>

$(".first").find()

寻找后代元素一定要加参数嘛不加参数没有找到，打印的length为0 这是为什么呢麻烦老师讲解一下

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础 17楼

<!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>
    <link rel="stylesheet" href="../../Swiper动画插件/swiper-bundle.min.css">
    <style>
        .swiper-container {
    width: 600px;
    height: 300px;
   
   
}


img{
    width: 100%;
}
    </style>
</head>
<body>
    <!-- 存放内容  -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="imges/0.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="imges/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="imges/2.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
       
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
       
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>




    <script src="../../Swiper动画插件/swiper-bundle.min.js"></script>

    <script>
        var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
   
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
   
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
   
 
   
})        
    </script>
</body>
</html>

老师为啥我轮播图图片是平铺的不是重叠的要我自己改样式吗

WEB前端全系列/第三阶段：jQuery编程模块/Swiper（旧） 18楼

老师为啥我方案一我click事件绑定在li标签的为啥离开了li标签存内容的div就会向上收起

<!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>
    <link rel="stylesheet" href="../Css/初始化.css">
    <script src="../libs/jquery.min.1.12.4.js"></script>
    <style>
        .container {
            width: 800px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .container ul{
            list-style: none;
        }
        .container ul li{
            border-bottom: 1px dotted black;
        }
        .container ul li h3{
            position: relative;
            background-color: skyblue;
        }
        .container ul li h3 span{
            position: absolute;
            right: 6px;
        }
        .count{
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <h3>看！2021中国经济新气象<span>></span></h3>
                <div class="count">
                    2021年，是党和国家历史上具有里程碑意义的一年！
                    这一年，我国经济发展保持全球领先地位，国家战略科技力量加快发展，产业链韧性和优势得到提升，改革开放向纵深推进，民生保障有力有效，生态文明建设持续推进。
                    这一年，我们从容应对百年变局和世纪疫情，奋力完成改革发展艰巨任务，实现“十四五”良好开局。
                </div>
            </li>
            <li>
                <h3>拜登“吃不了亏的把戏”，被识破了<span>></span></h3>
                <div class="count">
                    　据塔斯社莫斯科12月8日报道，普京和拜登7日举行视频双边会谈。
                    双方确认两国在网络安全和战略稳定问题上取得进展，但就乌克兰问题的讨论谈不上具有建设性。俄罗斯国际事务理事会主任安德烈·科尔图诺夫在访谈中表达了上述观点。
                </div>
            </li>
            <li>
                <h3>最严“防沉迷”实施百天：未成年人卸载退游，租号产业受挫<span>></span></h3>
                <div class="count">
                    　网友称之为“史上最严防沉迷”政策的实施，让亚楠有些沮丧。这项由国家新闻出版署发布，
                    防止未成年人沉迷网络游戏的通知，明确要求了自2021年9月1日起，所有网络游戏企业仅能在周五、周六、周日和法定节假日的晚8时至晚9时向未成年人提供1小时的服务。
                </div>
            </li>
            <li>
                <h3>以前啃老如今啃小：萌娃网红沦为父母赚钱机器<span>></span></h3>
                <div class="count">
                    在短视频行业，这样的网红萌娃账号并不在少数，其中大部分是记录日常生活或做育儿科普
                    ，少数剑走偏锋，比如无节制喂食、引导孩子说成人“毒鸡汤”等。近期，据央视新闻报道，小红书中还出现了对未成年人隐私部位拍摄的短视频。
                </div>
            </li>
        </ul>
    </div>
    <script>
        //方案一
        // $lis=$('.container ul li');
        // $lis.click(function(){
         
        //     $(this).find('.count').fadeIn();
        //     console.log($(this).height());
        // });
        // $lis.mouseout(function(){
        //    $(this).find('.count').fadeOut()
        // });

        //方案二
        $lis=$('.container ul li');
        $lis.click(function(){
            console.log(1111);
            if($(this).find('.count').is(':visible')){          
                $(this).find('.count').slideUp();
                $(this).siblings().find('.count').slideUp();
                $(this).find('span').html('>');
            }else{
                $(this).siblings().find('.count').slideUp();
                $(this).find('.count').slideDown();
               
                $(this).find('span').html('<');
            }
        })
       
    </script>
</body>

</html>

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用（旧） 19楼

老师为啥用css属性做到背景颜色切换但是用addClass划入的时候可以背景黄色滑出的时候不会变色？

<!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>
    <script src="libs/jquery.min.1.12.4.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
           border: 2px solid pink;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
    </style>

</head>
<body>
  <div></div>

    <script>
$('div').hover(
    function(){
        console.log('进去');
        // $('div').addClass('yellow')
        $('div').css('background','yellow')

    },
    function(){
        console.log('画出');
        // $('div').addClass('red')
        $('div').css('background','red')
    }
)
    </script>
</body>
</html>

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础知识（旧） 20楼

老师为啥我事件没有效果也没有报错

<!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>
    <script src="libs/jquery.min.1.12.4.js"></script>
    <style>
        .heightLight{
            background-color: aqua;
        }
    </style>
</head>
<body>
             <p class="lal p1">拉拉啦啦啦啦</p>
             <p class="lal">oooooooooooo</p>
             <input type="text" value="120378794@qq.com">
             <button>移除</button>
             <img src="" alt="">
    <script>
        /*      操作Dom属性
        1.addClass() 给标签添加样式名 不覆盖原有的
        2.removeClass()  给标签删除样式名 
        3.hasClass()  确定任何一个匹配元素是否有被分配给定的（样式）类。 判断某个元素是否有某个属性
        4.toggleClass(className，swtich)  判断一个元素是否又样式，有则删除className，没有则添加className,  swtich布尔值，表示是否移除类,ture不删除
        5.html()  获取元素内容   html('拉拉')将元素内容设置成拉拉
        6.val（）获取元素的值  val（'xx'）设置元素的值
        7.attr()   获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性
        8.removeAtt 为匹配的元素集合中的每个元素中移除一个属性（attribute）
        */

    //   $('p').addClass(function(index){
    //       return "class0"
    //   })
    //   $('p').click=function(){
    //       $(this).toggleClass()
    //   }
    var flag=false;
     $('p').toggleClass('p1')
    console.log( $('input').val());
    $('input').val('16607041879')
    console.log( $('input').val());
    $('img').attr({
        src:'i9.jpg',
        title:'lalalal'

    })
        $('button').click=function(){
       
         
       
        flag=!flag;
       if(flag){
        $('button').text('恢复')
        $('img').removeAttr('src')
       }else{
        $('button').html('移除')
        $('img').attr({
            src: 'i9.jpg',
        })
       }
    }



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

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础知识（旧） 21楼

为什么是get(0):里面的数学代表的什么

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础知识（旧） 22楼

<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
    <script src="./js/libs/jquery.min.1.12.4.js"></script>
</head>
<body>
    <p id="test">hello</p>
    <button id="btn">按钮</button>
    <script>
        var btn=document.getElementById("btn");
        var text=document.getElementById("text");
        btn.onclick=function(){
            text.innerHTML="新的内容"
        }
    </script>
</body>
</html>

老师，这个哪里不对吗？

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础知识（旧） 23楼

<!DOCTYPE html>

<head>

<title>jQuery简介</title>

</head>

<body>

<p id="text">Hello</p>

//var btn=document.getElementById("bth");

//var text=document.getElementById("text");

//btn.onclick=function(){

// text.innerHTML="新的内容"

//}

$("#btn").click(function(){

$("#text").html("修改成新的内容")

})

</script>

</body>

</html>

点击修改，Hello不改变

WEB前端全系列/第三阶段：jQuery编程模块/jQuery基础知识（旧） 24楼

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>百叶窗</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .containor{            width: 800px;            height: 300px;            margin: 80px auto;            position: relative;            border: 1px solid red;            overflow: hidden;        }        .containor ul{            list-style: none;        }        .containor ul li{            position: absolute;        }        .cover{            width: 100%;            height: 300px;            background: rgba(0,0,0,0.5);            position: absolute;        }        .li1{            left: 160px;        }        .li2{            left: 320px;        }        .li3{            left: 480px;        }        .li4{            left: 640px;        }    </style></head><body><div class="containor">    <ul>        <li class="li0"><div class="cover"></div><img src="img/0(1).jpg" alt=""></li>        <li class="li1"><div class="cover"></div><img src="img/1.jpg" alt=""></li>        <li class="li2"><div class="cover"></div><img src="img/2.jpg" alt=""></li>        <li class="li3"><div class="cover"></div><img src="img/3.jpg" alt=""></li>        <li class="li4"><div class="cover"></div><img src="img/4.jpg" alt=""></li>    </ul></div><script>    var $lis=$(".containor ul li");    $lis.mouseenter(function () {         $(this).find(".cover").stop(true).fadeOut()    }).mouseleave(function () {        $lis.stop(true);        $(this).find(".cover").stop(true).fadeIn()        $lis.eq(1).animate({"left":160},500)        $lis.eq(2).animate({"left":320},500)        $lis.eq(3).animate({"left":480},500)        $lis.eq(4).animate({"left":640},500)    })    $(".li0").mouseenter(function () {        $lis.stop(true);        $lis.eq(1).animate({"left":560},500)        $lis.eq(2).animate({"left":620},500)        $lis.eq(3).animate({"left":680},500)        $lis.eq(4).animate({"left":740},500)    })    $(".li1").mouseenter(function () {        $lis.stop(true);        $lis.eq(1).animate({"left":60},500)        $lis.eq(2).animate({"left":620},500)        $lis.eq(3).animate({"left":680},500)        $lis.eq(4).animate({"left":740},500)    })    $(".li2").mouseenter(function () {        $lis.stop(true);        $lis.eq(1).animate({"left":60},500)        $lis.eq(2).animate({"left":120},500)        $lis.eq(3).animate({"left":680},500)        $lis.eq(4).animate({"left":740},500)    })    $(".li3").mouseenter(function () {        $lis.stop(true);        $lis.eq(1).animate({"left":60},500)        $lis.eq(2).animate({"left":120},500)        $lis.eq(3).animate({"left":180},500)        $lis.eq(4).animate({"left":740},500)    })    $(".li4").mouseenter(function () {        $lis.stop(true);        $lis.eq(1).animate({"left":60},500)        $lis.eq(2).animate({"left":120},500)        $lis.eq(3).animate({"left":180},500)        $lis.eq(4).animate({"left":240},500)    })</script></body></html>为什么我鼠标一上去没有效果

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用（旧） 25楼

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播图</title>    <style>        *{            margin: 0;            padding: 0;        }        .box{            width: 560px;            height: 300px;            border: 5px solid grey;            margin: 100px auto;            position: relative;            overflow: hidden;        }        .m_unit{            width: 10000px;            height: 300px;            position: absolute;            top: 0;            left: 0;        }        .m_unit ul{            overflow: hidden;        }        .m_unit ul li{            list-style: none;            width: 560px;            height: 300px;            display: none;            position: absolute;            top: 0px;            left: 0px;        }        .m_unit ul li.current{            display: block;        }        .btn span{            width: 55px;            height: 55px;            border: 2px solid grey;            position: absolute;            top: 50%;            margin-top: -27.5px;            border-radius: 10px;            font-weight: bolder;            font-size: xx-large;            text-align: center;        }        .btn .right{            right: 0;        }        .cirle ul li{            list-style: none;            width: 22px;            height: 22px;            float: left;            background: orange;            margin-right: 10px;            border-radius: 50%;        }        .cirle ul{            overflow: hidden;        }        .cirle{            position: absolute;            bottom: 10px;            right: 10px;        }        .cirle ul li.current{            background: red;        }    </style></head><body><div class="box">    <div class="m_unit">        <ul>            <li class="current"><a href=""><img src="img/0(1).jpg" alt=""></a></li>            <li><a href=""><img src="img/1.jpg" alt=""></a></li>            <li><a href=""><img src="img/2.jpg" alt=""></a></li>            <li><a href=""><img src="img/3.jpg" alt=""></a></li>            <li><a href=""><img src="img/4.jpg" alt=""></a></li>        </ul>    </div>    <div class="btn">        <span class="left" id="leftbtn"><</span>        <span class="right" id="rightbtn">></span>    </div>    <div class="cirle" id="cirle">        <ul>            <li class="current"></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div></div><script>    //标识    var idx=0;    var $lis=$(".m_unit ul li");    $("#leftbtn").click(function () {        $lis.eq(idx).fadeOut(300);        idx--;        if(idx<0){            idx=$lis.length-1;        }        $lis.eq(idx).fadeIn(300);        changeCircle()    })    $("#rightbtn").click(function () {        $lis.eq(idx).fadeOut(300);        idx++;        if(idx>$lis.length-1){            idx=0;        }        $lis.eq(idx).fadeIn(300);        changeCircle()    })    //指示器变化    function changeCircle() {        $("#cirle ul li").eq(idx).css("background",'red').siblings().css('background','orange');    }</script></body></html>我的这个为什么实现不了点击按钮轮播

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用（旧） 26楼

好的好的，理解起来的确太绕了，我现在明白了，谢谢老师

WEB前端全系列/第三阶段：jQuery编程模块/源码与扩展（旧） 27楼

我问错地方了，这个是上一节JQuery源码解析的内容。

WEB前端全系列/第三阶段：jQuery编程模块/源码与扩展（旧） 28楼

14 轮播图练习.rar

老师，帮忙看下这个轮播图实现，在图片循环的过程中明显出现了白色，点击按钮时图片转换也出现了白色。fadeOut和fadeIn好像没有起到淡入淡出的作用

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用（旧） 29楼

老师，已经解决了

WEB前端全系列/第三阶段：jQuery编程模块/jQuery应用（旧） 30楼

同学您好