首页 > 其他分享> > jQuery大法--选择器实验

jQuery大法--选择器实验

2019-08-14 19:37:36 作者：互联网

实验示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验</title>
    <style>
        table{
            border: 0;
            border-collapse: collapse;
        }
        td{
            font:normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }
        th{
            font:bold 12px/17px Arial;
            text-align: left;
            padding:4px;
            border-bottom: 1px solid yellow;
        }
        .odd{
            background: orange;
        }
        .even{
            background: orangered;
        }
        .light{
            background: blue;
        }
    </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>
<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
       $("tbody tr:even").addClass("odd");
       $('tbody tr:odd').addClass("even");
       $("tbody tr").hover(
           function () {$(this).addClass("light");},
           function () {$(this).removeClass("light");}
       );
    });
</script>
</body>
</html>

实验结果：

本期实验结束，欢迎大家关注。

标签：jQuery,even,大法,function,border,tr,tbody,odd,选择器
来源： https://blog.csdn.net/qq_36789311/article/details/99600361