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

来源:互联网 发布:布丁淘宝客软件好用吗 编辑:程序博客网 时间:2024/06/05 08:18
$("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>



原创粉丝点击