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

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

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

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

老师，你在视频里面说的那个表格在哪个地方下载

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

老师我也是点两次鼠标才会触发效果这是为什么，谢谢！
<!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基础知识（旧） 62楼

14 轮播图练习.rar

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

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

老师高版本的jQuery如何实现toggle（）效果。。

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

老师这个怎么解决啊

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

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

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

<!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="./js/jquery-3.7.1.min.js"></script>
</head>

<body>
    <input type="text" name="name">
    <span>手机号</span>

    <script>
        var colorreg = $("span");
        colorreg.css("color","red");
        var input = $("input");
        var phoneReg = /^1(3|4|5|6|7|8|9)[0-9]{9}$/;

        input.oninput = function () {
            if (phoneReg.test(input.value)) {
                colorreg.css("color","green");
            }
        }

    </script>
</body>

</html>

为什么实现不了？哪里错了

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

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

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

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

同学您好