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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$()函数</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        div{
            width: 100px;height: 100px;margin-top: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div id="div2"></div>
<script>
    var $divs=$('.div');
    $divs.css('background-color','skyblue');
    console.log($divs);
    console.log($divs[0]);//获取jq中第一个js对象，通过中括号
    console.log($divs.get(1));//获取jq中第二个js对象，通过get(n)
    $divs[0].style.backgroundColor='red';
    console.log($divs.length);
    console.log($divs.length);
</script>
</body>
</html>

老师帮我看一下，怎么还在爆错哦

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

那为什么不更新一下新的视频用新的版本的jQuery

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

老师，你这个jQuery框架有吗？我按照视频的做他报错了

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

老师，我这个jQuery是3.5.1可以吗？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQ对象的常用方法show()和hide()</title>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;padding: 0;
        }
        .d1{
            width: 600px; border: 1px solid;margin:50px auto;padding: 20px;
        }
        .d1 ul{
            list-style: none;text-align: center;
        }
        .d1 ul li{
            display: inline-block;width: 200px;
        }
        .d2{
            width: 40%;height: 25px;line-height: 25px;text-align: center;border: 1px solid;background-color: aqua;margin: 10px auto;cursor: pointer;
        }
        /*div{
            width: 100px;height: 100px;border: 1px solid black;margin: 5px auto;
        }
        button{margin:0 auto;width: 100px;height: 30px;}*/
    </style>
</head>
<body>
<div class="d1">
    <ul>
        <li><a href="#">佳能</a>1234</li>
        <li class="jinxuan"><a href="#">华为</a>2345</li>
        <li><a href="#">小米</a>3456</li>
        <li class="jinxuan"><a href="#">苹果</a>4567</li>
        <li><a href="#">索尼</a>5678</li>
        <li class="jinxuan"><a href="#">OPPO</a>6789</li>
        <li><a href="#">vivo</a>7890</li>
        <li><a href="#">金立</a>8901</li>
        <li><a href="#">一加</a>9012</li>
        <li class="jinxuan"><a href="#">三星</a>0123</li>
    </ul>
    <div class="d2">
        显示精简品牌
    </div>
</div>

<!--<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<button>show()</button>
<button>hide()</button>
<button>show(2000)</button>
<button>hide(2000)</button>-->
<script>
    var $vi=$('.jinxuan');
    var $btn=$('.d2');
    $btn.click(function(){
        if($vi.hasClass('.jinxuan')){
            $vi.hide().removeClass(".jinxuan");
            $btn.html('显示全部品牌');
        }else{
            $vi.show().addClass(".jinxuan");
            $btn.html('显示精简品牌');
        }
    })

    /*var $d1=$('.d1');
    $d1.css("background-color","red");
    $('button:eq(0)').click(function () {
        $d1.show();
    });
    $('button:eq(1)').click(function () {
        $d1.hide();
    });
    $('button:eq(2)').click(function () {
        $d1.show(2000);
    });
    $('button:eq(3)').click(function () {
        $d1.hide(2000);
    })*/

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

把练习和操作都试了下应该是这样的吧

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加事件监听</title>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js">
    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            margin: 3px  auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div id="d3"></div>
<script>
    /*
    $()函数和jQuery()是等价的
    但$()函数不止jQuery框架使用，其他框架也适用
    事件监听==jq对象.事件名（回调函数）
    //单击事件
    $("div").click(function () {
        $("div").css("background-color","red");
    })
    //双击事件
    $("div").dblclick(function () {
        $("div").css("background-color","red");
    })
    */
    //鼠标进入
    $("div").mouseenter(function () {
        $("div").css("background-color","red");
    });
    //鼠标离开
    $("div").mouseleave(function () {
        $("div").css("background-color","blue");
    })
</script>
</body>
</html>

鼠标进入和离开这样应该没错吧

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jq中添加其他监听事件的方法</title>
  <script  src="js/jquery-1.12.3.min.js"></script>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid;margin-top: 10px}
  </style>
</head>
<body>
<div  class="div1"></div>
<div  class="div2"></div>
<script>
  /*
   jq中添加其他监听事件的方法
   (2)bind()方法（每个事件之间用空格隔开）
      a.给jq对象一次性添加多个事件监听，并且让多个事件共用一个回调函数
        语法：jq对象.bind('事件1  事件2...',回调函数);

        例子：
       var $div1=  $('.div1');
       var $div2=  $('.div2');
       var num=0;
       $div2.html(num);
       $div1.bind('mouseenter  mouseleave',function(){
       num++;
       $div2.html(num);//鼠标进入和移出div1时div2中的num加1 ；使用jq中自己的方法html 不是js中的innerhtml
       })
      b.bind还可以采用JSON形式的参数来给jq对象添加事件监听。
      说明：给jq对象一次性添加多个事件，并各自拥有不同的回调函数。
      语法：jq对象.bind(JSON参数格式);
      例子：
   var $div1=  $('.div1');
   $div1.bind({
   click:function(){console.log('单击事件');},
   dblclick:function(){console.log('双击事件');},
   mouseenter:function(){console.log('鼠标进入事件');},
   mouseleave:function(){console.log('鼠标离开事件');},
   })
   （3）one方法
   描述：通过one方法添加的事件监听是'一次性的'，只能执行一次。
   语法：jq对象.one('事件名',回调函数);
   */
/*  var $div1=  $('.div1');
  $div1.one('click',function(){
    console.log('单击事件');
  })*/
  var $div1=  $('.div1');
  $div1.bind({
    "click":function(){console.log('单击事件');},
    dblclick:function(){console.log('双击事件');},
    mouseenter:function(){console.log('鼠标进入事件');},
    mouseleave:function(){console.log('鼠标离开事件');},
  })
</script>
</body>
</html>

老师，您好

 例子：
   var $div1=  $('.div1');
   $div1.bind({
   click:function(){console.log('单击事件');},
   dblclick:function(){console.log('双击事件');},
   mouseenter:function(){console.log('鼠标进入事件');},
   mouseleave:function(){console.log('鼠标离开事件');},
   })

老师这里采用的JSON格式的参数，为什么不需要像css的JSON格式一样每一个键和值都加上上双引号呢

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

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

<!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></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
  // $('tr:odd td:odd').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');
</script>
</body>
</html>

老师，您好

问题1：

我想达到表格这个效果，使用css代码

/*    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;
    }*/

或者js代码

   $('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');

都可以，老师使用css和js达到效果，有什么不同的使用条件么

问题二：

  // $('tr:odd td:odd').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');

老师我之前想使用后代元素来达到效果，就是我注释的第一行，效果是这样的，并不能达到想要的效果

想问问老师，js是想实现这个效果，代码能不能更简洁一点，我的这个太麻烦了，当表格更大的话，很不方便操作

   $('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');

谢谢老师！

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.8.3.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        div{ width: 400px;border: 3px solid skyblue;margin: 100px auto;padding: 20px;}
        li{
            width: 100px;display: inline;
        }
        ul{text-align: center;list-style: none;}
button{width: 40%; background-color: aquamarine;height: 40px;line-height: 40px;text-align: center;margin: 5px auto;}
    </style> 
</head>
<body>
   <div class="con">
       <ul>
           <li class="hide">1</li>
           <li>2</li>
           <li>2</li> 
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li class="hide">1</li>
           <li>2</li>
           <li class="hide">1</li>
           <li class="hide">1</li>
           <li>2</li> 
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li> 
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li><li>2</li> 
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
       </ul>
       <button>显示2</button>
   </div>
   <script>
       $('button').toggle(function(){
           $('.hide').hide(200);
           $('button').html('显示1和2');

       },function(){
        $('.hide').show(200);
           $('button').html('显示2');
       })
   </script>
</body>
</html>

老师为什么隐藏后再显示的跟隐藏前显示的布局不一样

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.8.3.js">

    </script>
    <style>
        div{width: 200px;height: 50px;background-color: red;margin-top: 20px;}
    </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
   <script>
       $('.div1').click(function(){
           $('.div2').css('background-color','blue');
        
       })
       $('.div3').on('click',function(){
           $('.div1').off('click');
           console.log('1111')
       })
   </script>
</body>
</html>

老师我点div3的时候为啥div2不会变回红色，是不要要重新设置他的背景色

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

老师，最后这个品牌案例，怎么用点击事件实现呢

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery自己发明的【伪类】</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        table tr td{
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
<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>
</table>
<script>
    $('tr:odd').css('background-color','lightgreen');
    //定义color，记录原来的颜色
    var color = '';
    $('tr').hover(
        //鼠标移入
        function () {
            color=$(this).css('background-color');
            $(this).css('background-color','lightgray');
    },
        //鼠标移出
        function () {
            $(this).css('background-color',color);
    });
</script>
</body>
</html>

老师，这部分代码不太懂，hover是鼠标悬停时，里面加两个function(){}，为什么第二个function表示的就是鼠标移出时触发呢？

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

老师有低版本的jQuery吗？111111

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性和方法</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        div{
            width: 100px;height: 100px;background-color: red;
            border: 1px solid yellow;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div id="div2"></div>
<script>
    var $divs=$('div');
    $divs.css('background-color','blue');
    console.log($divs);
    console.log($divs[0]);
    console.log($divs[0]);
    console.log($divs.size());
    console.log($divs.length);
</script>
</body>
</html>

老师麻烦给看看哪里错了？谢谢老师

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

同学您好