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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠面板</title>
    <script src="libs/jquery.min.1.12.4.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 600px;
            margin: 100px auto;
            border: 1px solid powderblue;
        }

        .container ul {
            list-style: none;
        }

        .container ul li {
            border: 1px dotted white;
        }

        .container ul li h3 {
            position: relative;
            background: deepskyblue;
        }

        .container h3 span {
            position: absolute;
            right: 5px;
        }

        .container li .content {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li>
            <h3>习近平向上海合作组织民间友好论坛致贺信<span>＞</span></h3>
            <div class="content">
                习近平强调，我在去年11月提出举办上海合作组织民间友好论坛的倡议，得到各成员国热烈响应和积极支持。相信论坛将成为各方增进了解、深化友谊、加强合作的重要平台。
                习近平指出，希望各方秉持“上海精神”，坚守初心，同舟共济，守望相助，深化合作。要发挥民间外交优势，拓宽各国人民心灵沟通渠道，为上海合作组织发展作出积极贡献。
                上海合作组织民间友好论坛由中国人民对外友好协会、湖北省人民政府、上海合作组织睦邻友好合作委员会共同主办，当日在湖北省武汉市开幕，主题为“促进民间友好，传承‘上海精神’”。
            </div>
        </li>
        <li>
            <h3>习近平向纳米比亚总统根哥布致慰问电<span>＞</span></h3>
            <div class="content">
                近平在慰问电中表示，得知总统先生和根哥斯女士感染新冠病毒，我和夫人彭丽媛谨向你们表示最诚挚的慰问，祝你们早日康复。新冠肺炎疫情发生以来，中纳两国守望相助、携手抗疫，传统友谊得到深化。我高度重视中纳关系发展，愿同根哥布总统一道努力，推动两国全面战略合作伙伴关系不断迈上新台阶。
            </div>
        </li>
        <li>
            <h3>茁壮成长在欣欣向荣的国度<span>＞</span></h3>
            <div class="content">
                希望你们结合自身成长实际学好党史，以英雄模范人物为榜样，从小坚定听党话、跟党走的决心，刻苦学习，树立理想，砥砺品格，增长本领，努力实现德智体美劳全面发展。”在“六一”国际儿童节到来之际，习近平总书记给江苏省淮安市新安小学的少先队员们回信，对他们予以亲切勉励，并祝他们和全国小朋友们节日快乐。
            </div>
        </li>
    </ul>
</div>
<script>
    $("h3").click(function () {
        //is判断一个元素数据具有某个样式
        //：visible 判断一个元素是否显示
        if ($(this).siblings().is(":visible")) {
            //可见内容收起来
            $(this).siblings().slideUp();
            //变更箭头符号
            $(this).find("span").html("＞");
        } else {
            //不可见 展开内容
            $(this).parent().siblings().find(".content").slideUp();
            // 只展开自己
            $(this).siblings().slideDown();
            //改变符号
            $(this).parent().siblings().find(".content").html("＞")
            $(this).find("span").html("v")
        }
    })
</script>
</body>
</html>

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

老师，我在index.scss文件里通过 @import 引入 swiper.min.scss文件时，明明文件是存在的，为什么终端里始终都是显示找不到，是因为现在的sass不支持 ../这种格式引入文件了？

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

老师，在这个地方加于不加stop(true)都没有变化呢，为什么视频中老师加上了，是有什么用途吗

下面这个代码是没加stop(true)的

百叶窗.zip

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

老师我在练习size()这jq对象方法：

但是size的效果一直出不来，请问一下这是为什么？

<!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>jquery练习</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        .div1{
            background-color: red;
            width: 200px;
            height: 200px;
            border: 1px solid orange;
        }
        .div2{
            background-color: blue;
            width: 200px;
            height: 200px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
   <div class="div1"></div>
   <div class="div2"></div>
       <script>
            var divs = $('div');
            console.log(divs[0]);//获取divs里面的第一个元素
            console.log(divs.get(1));//获取divs里面的第二个元素
            console.log(divs.size);//输出的是undefined
            console.log(divs.size());//报错了
            console.log(divs.length);
       </script> 
</body>
</html>

报错原因我写了注释了奥，然后下面是我的运行效果图“

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

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 10px;
        }
        
        table tr td {
            width: 100px;
            height: 40px;
        }
    </style>

<body>
    <!-- <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> -->
    <table border="1" align="center" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

<script>
        //将表格中所有偶数的行背景颜色设置为 lightgreen
        $('tr:odd').css('background-color', 'lightgreen');

        var color = '';

        // 当鼠标移到tr上时
        $('tr').hover(function() {
            //鼠标移入
            // 设置背景属性
            color = $(this).css('background-color');

            // 设置背景属性值
            $(this).css('background-color', 'lightgray');
        }, function() {
            //鼠标移出
            // 设置背景属性值
            $(this).css('background-color', color);
            color = '';
        });
    </script>

老师，这个案例中的

var color = '';

的作用是不是可以理解为用来记忆（存储）background-color的相关属性值呀。对这里设置 var color='' 理解得不是很透彻感觉。

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

老师我的Jquery的操作方法怎么没有效果啊

<!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="jquery-1.12.3.min.js"></script>
    <style>
        .div1{
           width: 200px;
           height: 200px;
           background-color: red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <br>
    <div class="div2"></div>
    <script>
        //$(".div1").css("background-color","green");
        //$('div').css('background-color','red');
        //    $('div').click(function(){
        //    // $("div").css("background-color","green");
        //    $('div').css('background-color','red');
        // })

        $('div').click(function(){
        $('div').css('background-color','red');
    })
    </script>
</body>
</html>

下面是图：

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

老师，我们现在应该使用哪个版本的JQuery？

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

图1.png

图2.png

老师，我用图1的写法能无限次执行，为啥图2用bind或者on就只执行一次？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>show( ) hide( )</title>
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <style>
        *{margin: 0; padding: 0;}
        ul{width: 550px; margin: 100px auto; padding: 20px; text-align: center; list-style: none;}
        ul li{display: inline-block; width: 130px; color: lightcoral; text-align: left;}
        a{color: skyblue; margin-right: 5px;}
        span{cursor: pointer;}
        .btn{width:100px; margin: 15px auto; cursor: pointer; border: 1px solid orange; 
        color:#fff; background-color: lightseagreen;}
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#">apple</a><span>17000</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">sony</a><span>9870</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">samsung</a><span>12000</span></li>
            <li><a href="#">panasonic</a><span>7000</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">canon</a><span>6700</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">casio</a><span>5500</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">toshiba</a><span>10000</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li><a href="#">dell</a><span>22000</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <li class="lg"><a href="#">lg</a><span>11000</span></li>
            <div class="btn">显示热销</div>
        </ul>
        
    </div>
    <script>
        var $lg=$('.lg');
        var $btn=$('.btn');
        $btn.bind('click',function() {
            if($btn.html()=='显示热销') {
                $btn.html('显示全部商品');
                $lg.hide();
            } else {
                $btn.html('显示热销');
                $lg.show();
            }
        });
    </script>
</body>
</html>

老师，我这样行么，也能达到效果

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

老师，我按照视频老师里面添加的jquery，操作不出来，有没有新的呀

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

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>品牌案例</title>
    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        *{margin: 0 ;padding: 0}
        .container{
            width: 600px;border: 1px solid;  margin: 100px  auto;padding: 20px;
        }
        .container  ul{list-style: none;text-align: center;}
        .container  ul li{display: inline-block;width: 100px}
        .btn{width: 40%;height: 25px;line-height: 25px;text-align: center;border: 1px solid  pink;
            background-color: skyblue;margin: 5px auto; cursor: pointer;color: white;
        }
    </style>
</head>
<body>
<div  class="container">
    <ul>
        <li  class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li><a href="#">三星</a><span>30440</span></li>
        <li><a href="#">oppo</a><span>30440</span></li>
        <li><a href="#">索尼</a><span>30440</span></li>
        <li class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li><a href="#">苹果</a><span>30440</span></li>
        <li class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li><a href="#">华为</a><span>30440</span></li>
        <li class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li><a href="#">是的</a><span>30440</span></li>
        <li><a href="#">佳能</a><span>30440</span></li>
        <li class="jianeng"><a href="#">撒旦</a><span>30440</span></li>
        <li class="jianeng"><a href="#">佳能</a><span>30440</span></li>
        <li><a href="#">佳能</a><span>30440</span></li>
    </ul>
    <div  class="btn">显示精简品牌</div>
</div>
<script>
    $('.btn').bind({
        click:function () {
            $('.jianeng').hide();
            $(this).html('显示全部品牌');
        },
        click:function () {
            $('.jianeng').show();
            $(this).html('显示精简品牌');
        }
    })
    
    $('.btn').click(function () {
     $('.jianeng').hide();
     $(this).html('显示全部品牌');
});
$('.btn').click(function () {
    $('.jianeng').show();
    $(this).html('显示精简品牌');
});
</script>
</body>
</html>

为什么点击没有反应的,script两种方式我都试过了...

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

老师，我想问一下。视频中好几处说用json格式。最开始说json中键和值都用引号。后来做的时候又很多时候不加。

我想知道内个引号都是咋回事。

第一个图都没加引号，而且function加引号报错。第二个图加不加执行都对

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

老师我也是点两次鼠标才会触发效果这是为什么，谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.5.1.js"></script>
    <style>
 *{
            margin:0;
 padding:0;
 }
        a{
            text-decoration: none;
 }
        .box{
            margin: 100px auto;
 width: 400px;
 border: 1px solid black;
 }
        ul{
            list-style-type: none;
 text-align: center;
 }
        ul>li{
            display: inline;
 margin: 20px;
 }
        button{
            width: 200px;
 height: 35px;
 line-height: 35px;
 font-size: 20px;
 text-align: center;
 background-color: deepskyblue;
 border: 1px solid purple;
 margin: 10px 100px;
 cursor: pointer;
 }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="jianeng"><a href="#">佳能</a></li>
        <li><a href="#">苹果</a></li>
        <li class="jianeng"><a href="#">佳能</a></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">小米</a></li>
        <li class="jianeng"><a href="#">佳能</a></li>
        <li><a href="#">华为</a></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">小米</a></li>
        <li class="jianeng"><a href="#">佳能</a></li>
        <li><a href="#">华为</a></li>
        <li><a href="#">华为</a></li>
        <li><a href="#">魅族</a></li>
        <li class="jianeng"><a href="#">佳能</a></li>
    </ul>
    <button>显示精简商品</button>
    <script>
 var $jianeng=$(".jianeng");
 var $but=$("button");
 $but.click(function () {
//           检查$jianeng这个jq对象是否包括a这个类
 if($jianeng.hasClass("a")){
               $jianeng.hide().removeClass("a");
 $but.html("显示全部品牌");
 }else{
               $jianeng.show().addClass("a");
 $but.html("显示精简商品");
 }
       })
    </script>
</div>
</body>
</html>

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

老师建议下次录视频的时候把鼠标光标显示出来，不然看不到你点的哪里

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

老师上面评论介绍的方法只能实现敲击后一次循环，如何实现一直敲击一直切换的效果呢

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

同学您好