div li隔行变色鼠标悬浮高亮显示 jquery控制css样式

最新推荐文章于 2024-07-24 13:52:34 发布

KingCruel

最新推荐文章于 2024-07-24 13:52:34 发布

阅读量1.3w

点赞数 1

分类专栏： JavaScript 文章标签： jquery控制css样式 table数据

本文链接：https://blog.csdn.net/kingcruel/article/details/10580557

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

$("table tr").eq(1).remove(); //删除第一行数据

$("#tbl1").find("tr").eq(0).remove(); //删除第一行数据，eq的下标是从0开始。

$("#tblContent tr:even").css("background-color", "#333"); //奇数行
$("#tblContent tr:odd").css("background-color", "blue");//偶数行

div li隔行变色

    <style type="text/css">
        .bcloer{background-color: Red;}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //$("#UL_id li:even").addClass("bcloer");         //方式一
            $("#UL_id li:even").attr("className", "bcloer");  //方式二
        })
    </script>
    <div>
        <ul id="UL_id">
            <li>单数</li>
            <li>双数</li>
            <li>双数</li>
            <li>单数</li>
            <li>双数</li>
            <li>双数</li>
        </ul>
    </div>

div li鼠标悬浮高亮显示

    <style type="text/css">
        .blue{background: #bcd4ec;}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#orderedlist li").hover(function () {
                $(this).addClass("blue");
            }, function () {
                $(this).removeClass("blue");
            });
        });
    </script>
    <div>
        <ul id="orderedlist">
            <li>11111111111111111111111111111111</li>
            <li>22222222222222222222222222222222</li>
            <li>33333333333333333333333333333333</li>
            <li>44444444444444444444444444444444</li>
            <li>55555555555555555555555555555555</li>
            <li>66666666666666666666666666666666</li>
            <li>77777777777777777777777777777777</li>
        </ul>
    </div>

div li隔行变色，鼠标悬浮高亮显示

    <style type="text/css">
        /*.hover的样式是必须得,具体样式效果自行设置*/
        .hover{ background-color:#222C35; color:#FFF;}
        .hover,.hover a{color:#FFF;}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            jQuery.hoverPlugin = {
                hover: function (hoverid) {
                    $(hoverid).hover(function () {
                        $(this).addClass("hover")
                    }, function () {
                        $(this).removeClass("hover")
                    })
                }
            };
            $.hoverPlugin.hover('#hoverul li');
            $.hoverPlugin.hover('#hoverdiv a')
        });
    </script>
    <div>
        <ul id="hoverul">
            <li>jquery图片左右来回循环飘动</li>
            <li>jquery图片左右来回循环飘动</li>
            <li>jquery图片左右来回循环飘动</li>
            <li>jquery图片左右来回循环飘动</li>
            <li><a href="#">jquery 特效</a></li>
            <li><a href="#">jquery 特效</a></li>
            <li><a href="#">jquery 特效</a></li>
            <li><a href="#">jquery 特效</a></li>
        </ul>
    </div>