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

<!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-3.6.3.min.js"></script>
`
</head>
<body>
   
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

<script>

    $("ul").on("click","li",function(e){
        console.log(e.currentTarget)
    })
</script>
</body>
</html>

为什么输出的不是绑定事件的ul元素

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

$(window).scrollTop()和$(document).scrollTop()有区别吗

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

讲的有问题吧，$(window).height()是浏览器可视窗口高度，而$(window).scrollTop()很大程度上取决于你设置的html页面的css总高度

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

刚刚去试了一下，发现页面特别长的时候，几乎没滚动多少就到底了，判断网页到底应该不止用这两个值吧

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

3_淡入淡出轮播图（二）.zip

老师，我这里的小圆点的下标怎么获取呢

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

老师，我这里的点击小圆点的下标字母获取呢

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

老师，加入这里的菜单触发频率很高，那这里是加一个节流操作还是防抖操作啊

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

<style>

div {

width: 400px;

height: 400px;

background-color: red;

}

</style>

</head>

<body>

var div = document.getElementsByTagName("div")[0];

function donghua(delay){

var val = 1;

var timer = setInterval(function () {

val -= 0.05;

if (val < 0) {

clearInterval(timer)

}

else {

div.style.opacity = val;

}

}, delay)

}

var result = donghua(60);

result();

</script>

老师帮我看看这段代码，为啥说result is not a function呢，为了把val变成局部变量我把代码放在donghua函数里了，可以执行，但是会报错

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

JQuery.zip

为什么我点击小圆点的时候，照片切换不对呢？

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

老师这个怎么解决啊

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

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

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

<li>

<li>child item1</li>

<li>child item2</li>

</ul>

</li>

<span>Hello</span>

</ul>

$(".first").find()

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

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

<!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（旧） 13楼

老师为啥我方案一我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应用（旧） 14楼

老师为啥用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基础知识（旧） 15楼

同学您好