JQuery案例01-隔行换色功能+鼠标悬停变色

发踩季

于 2024-01-23 22:45:02 发布

阅读量399

点赞数 8

分类专栏： JQuery 文章标签： jquery css3 css html5 前端

本文链接：https://blog.csdn.net/hjjjinbncc/article/details/135787781

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.功能演示

2.HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隔行换色功能</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>产地</th>
          <th>厂商</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

3.CSS代码

       table{
            border: 0;  
            /* 当设置为collapse时，相邻单元格的边框会合并为一条，使表格看起来更加紧凑和整洁 */
            border-collapse: collapse;
        }
        td{
            font: bold 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }
        th{
          /* 前面12px是定义字体大小，后面17px是定义行高，行高属性在字体属性后面用/分隔。 */
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }
        .even{
            background-color: #ffc;
        }
        .odd{
            background-color: #cef;
        } 
       .light{
            background:#00A1DA;
        }

4.jQuery代码

引用jQuery在线链接

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

代码部分

 // 添加class
        $("tbody tr:even").addClass("even");
        $("tbody tr:odd").addClass("odd");
        // .hover 当鼠标移到到该标签会显示功能或者样式的事件
        $("tbody tr").hover(
            function () {
                $(this).addClass("light")
            },
            function () {
               $(this).removeClass("light")
            }
        );

5.整体代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隔行换色功能</title>
    <!-- 引用jquery的在线链接 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        table{
            border: 0;  
            /* 当设置为collapse时，相邻单元格的边框会合并为一条，使表格看起来更加紧凑和整洁 */
            border-collapse: collapse;
        }
        td{
            font: bold 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }
        th{
          /* 前面12px是定义字体大小，后面17px是定义行高，行高属性在字体属性后面用/分隔。 */
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }
        .even{
            background-color: #ffc;
        }
        .odd{
            background-color: #cef;
        } 
       .light{
            background:#00A1DA;
        }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>产地</th>
          <th>厂商</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
        <tr>
          <td>爱美电视机</td>
          <td>福州</td>
          <td>爱美电子</td>
        </tr>
      </tbody>
    </table>
  </body>
  <script>
        // 添加class
        $("tbody tr:even").addClass("even");
        $("tbody tr:odd").addClass("odd");
        // .hover 当鼠标移到到该标签会显示功能或者样式的事件
        $("tbody tr").hover(
            function () {
                $(this).addClass("light")
            },
            function () {
               $(this).removeClass("light")
            }
        );
  </script>
</html>