有效沟通问答-【官方】百战程序员_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="code.jquery.com_jquery-3.7.0.min.js"></script>
</head>

<body>
    <ul class="topnav">
        <li>Item 1</li>
        <li>
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>

    <script>
        var li = $(".topnav li");
        console.log(li);
        li.html("我是修改之后的内容");
    </script>
</body>

</html>

控制台显示有获取到所有内容，但是修改内容只能修改子代，不能修改孙代，不太理解这一点是因为什么

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-1.12.3.min.js"></script>
  <style>
    table tr td{
      width: 60px;
      height: 30px;
    }
/*    table tr:nth-child(2n+1) td:nth-child(2n+1){
      background-color: black;
    }
    table tr:nth-child(2n) td:nth-child(2n){
      background-color: black;
    }*/
  </style>
</head>
<body>
<table border="1px" align="center" cellspacing="0">
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><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><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
  // $('tr:odd td:odd').css('background-color','black');
  //在jquery里面可以通过css里面的写法来获取
   $('tr:nth-child(2n+1) td:nth-child(2n+1),tr:nth-child(2n) td:nth-child(2n)').css('background-color','black');
/*   $('tr:eq(0) td:odd').css('background-color','black');
   $('tr:eq(2) td:odd').css('background-color','black');
   $('tr:eq(4) td:odd').css('background-color','black');
   $('tr:eq(1) td:even').css('background-color','black');
   $('tr:eq(3) td:even').css('background-color','black');
   $('tr:eq(5) td:even').css('background-color','black');*/
   var color='';
   $('tr td').hover(function () {
     color=$(this).css('background-color');
     $(this).css('background-color','red');
   },function(){
     //鼠标移出
     $(this).css('background-color',color)});
/*  $('tr td').click(function () {
    color=$(this).css('background-color');
    $(this).css('background-color','red')});*/
  var p=$('tr td')[0];
  console.log(p)
  p.onclick=function () {
    console.log('4')
  }
</script>
</body>
</html>

老师，您好

我的问题是我想把jq对象转化js对象，

 var p=$('tr td')[0];

老师，我能把一个jq对象集合转换成js么；或者说在js里面可以对对象进行批量操作么？

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

<!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基础 3楼

<!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应用（旧） 4楼

老师，已经解决了

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

不用classname，用classlist.add（）不就不覆盖原class了吗？

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

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

<!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基础知识（旧） 7楼

老师，您的时间设置有问题，还是我的电脑没有播放完啊

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

老师，我不知道怎么解决这个问题，就是鼠标移入后li背景已经变化了，但是我想要改变对应的a标签的字体，但我这么设置把所有a获取了，然后一但移上去就全变了，咋整呀..求助

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="jquery-1.12.3.min.js"></script>
<style>
    ul{list-style: none;}
    li{float:left;width:120px;height:30px;text-align: center;
        line-height: 30px;margin:0 10px;background-color:lightgreen;}
    a{text-decoration: none;color:#333;display: block;font-size: 16px;}
</style>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">购物车</a></li>
    <li><a href="#">社团介绍</a></li>
    <li><a href="#">加入我们</a></li>
</ul>
</body>
</html>
<script>
    var color = "";
    $("li").hover(function(){
        color = $(this).css("background-color");
        console.log(color);
        $(this).css("background-color","blue");
        $("a").css("color","#f00");
    },function(){
        $(this).css("background-color",color);
    })
</script>

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

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

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

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

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

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

<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基础 13楼

<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基础知识（旧） 14楼

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

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

同学您好