JQuery操作类样式练习

最新推荐文章于 2025-08-02 06:00:00 发布

原创最新推荐文章于 2025-08-02 06:00:00 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery操作类样式练习

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一种利用jQuery库来增强HTML表格视觉效果和交互性的方法。通过选择器，可以实现字体大小调整、背景颜色变化、单击事件响应及鼠标悬停效果，提升用户体验。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <table id="table1" border="1">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>88</td>
            <td>张三</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>李四</td>
            <td>98</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>65</td>
            <td>王五</td>
            <td>65</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>78</td>
            <td>赵六</td>
            <td>78</td>
        </tr>
        <tr>
            <td>田七</td>
            <td>78</td>
            <td>田七</td>
            <td>78</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>84</td>
            <td>平均分</td>
            <td>84</td>
        </tr>
    </table>
    <input type="button" value="按钮" id="btn1" />
    <script type="text/javascript">
        $(function () {
            $("tr:first").css({ "fontSize": "38px" });
            $("tr:last").css({ "color": "red" });
            $("tr:gt(0):lt(3)").css({ "fontSize": "20px" });
            $("tr:odd").css({ "backgroundColor": "red" });
            //注册单击事件
            $("#btn1").click(function () {
                $("tr:even").css({ "backgroundColor": "yellow" });
                $("tr:odd").css({ "backgroundColor": "red" });
                $("tr:gt(0):lt(3)").css({ "fontWeight": "bolder" });
            });
            //鼠标悬浮
            $("tr").mouseover(function () {
                $(this).css({ "backgroundColor": "red" }).siblings().css({ "backgroundColor": "white" });
            });
            $("tr").click(function () {
                //初始化
                $("td").css({ "backgroundColor": "white" });
                $("td:even", $(this)).css({ "backgroundColor": "red" });
                $("td:odd", $(this)).css({ "backgroundColor": "yellow" });
            });
        });
    </script>
</body>
</html>