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

$("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>11111111111111111111111111111111li>  
            <li>22222222222222222222222222222222li>  
            <li>33333333333333333333333333333333li>  
            <li>44444444444444444444444444444444li>  
            <li>55555555555555555555555555555555li>  
            <li>66666666666666666666666666666666li>  
            <li>77777777777777777777777777777777li>  
        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>  

你可能感兴趣的:(JQ)