jquery 隔行变色的二个实例代码

发布时间:2019-11-22编辑:脚本学堂
分享二个jquery实现的隔行变色代码,学习下jquery css样式操作的方法,有需要的朋友参考下。

例1,jquery实现隔行变色,效果图如下:
jquery 隔行变色 
代码:
 

复制代码 代码示例:
<title>jquery 隔行变色-http://www.jb200.com</title>
    <style type="text/css">
    ul li
    {
        list-style-type: none;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').click(function () {
                //                $('li:eq(0)').css('background-color', 'blue');//第一行的背景被染成蓝色
                $('li:first-child').css('background-color', 'blue');//每一个ul下的li里面的第一行被染成蓝色
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>脾气不能不发,宁可丢坏书本,不能憋坏身体!</li>
        <li>咱们还是小孩呢!不必这么装模作样吧!</li>
        <li>我以为夏天还早着呢!怪不得压岁钱都花光了。</li>
        <li>如果和女生比的话,男生中傻瓜好象比较多。</li>
    </ul>
    <ul>
        <li>小丸子:我去年写的愿望,三个月内就实现了。</li>
        <li>说"芝麻开门"也不行的!这个童话不知会让多少小孩子上当!</li>
        <li>太贵了,只有和妈妈一起,才可以吃。</li>
        <li>小玉:别这样抱它(流浪狗),传染出感情就糟了!</li>
    </ul>
    <ul>
        <li>妈妈澄丽:孩子他爸,演戏也不用这样吧?</li>
        <li>在有档次的餐厅吃饭,却尽说些没档次的话,如果盘子里的鱼听到,没死也得给气死了。</li>
        <li>小丸子:我想拆掉这个闹钟。当年爱迪生就经常这样呢。</li>
        <li>我纯真的心由于牛排饭而欢呼不已。</li>
    </ul>
    <ul>
        <li>如果光吃菜营养就好的话,还吃肉干什么?</li>
    </ul>
    <input id="Button1" type="button" value="点一点哦" />
</body>

例2,jquery 隔行变色,效果图如下:
Jquery 隔行变色

代码2:
 

复制代码 代码示例:

<head>
    <title>jquery 隔行变色-http://www.jb200.com</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
 function showinfo() {
            var table = document.getElementById("mytable");
            for (var i = 0; i < table.rows.length; i++) {
                if (i % 2 != 0) {

                    table.rows[i].style.background = 'blue';
                }
            }
        }
      </script>
</head>
<body onload="showinfo()">
 <table id="mytable">
        <tr id="tr1">
            <th>
                出游时间
            </th>
            <th>
                出游地
            </th>
            <th>
                出游方式
            </th>
            <th>
                预计花费
            </th>
        </tr>
        <tr>
            <td>
                元旦
            </td>
            <td>
                三亚
            </td>
            <td>
                飞机
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td>
                春节
            </td>
            <td>
                泰国
            </td>
            <td>
                飞机
            </td>
            <td>
                2500
            </td>
        </tr>
        <tr>
            <td>
                清明
            </td>
            <td>
                大唐芙蓉园
            </td>
            <td>
                火车
            </td>
            <td>
                1500
            </td>
        </tr>
        <tr>
            <td>
                五一
            </td>
            <td>
                颐和园
            </td>
            <td>
                火车
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                端午
            </td>
            <td>
                周庄
            </td>
            <td>
                火车
            </td>
            <td>
                1000
            </td>
        </tr>
        <tr>
            <td>
                十一
            </td>
            <td>
                满城
            </td>
            <td>
                汽车
            </td>
            <td>
                30
            </td>
        </tr>
    </table>
</body>