会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132499个问题
JAVA 全系列/第五阶段:JavaWeb开发/Web实战案例 28366楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 28372楼
JAVA 全系列/第九阶段:Spring Boot实战/Spring Boot 28375楼

<!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基础知识(旧) 28377楼

<!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:

image.png

我想达到表格这个效果,使用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');

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

image.png

想问问老师,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基础知识(旧) 28380楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637