案例:隔行变色JQ版

实现效果如图::

html结构代码:

<ul id="ul1">
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li>我是第3个li标签</li>
    <li>我是第4个li标签</li>
    <li>我是第5个li标签</li>
    <li>我是第6个li标签</li>
    <li>我是第7个li标签</li>
    <li>我是第8个li标签</li>
    <li>我是第9个li标签</li>
    <li>我是第10个li标签</li>
</ul>

完整的JQuery:

   <script src="jquery-1.12.4.js"></script>
     <script>
            $ ( function () {
                //1.把奇数行li标签的背景色设置为天蓝色.
                $('li:odd').css('backgroundColor','skyblue');
                //2.把偶数行li标签的背景色设置为红色.
                $('li:even').css('backgroundColor','red');

                //3. 鼠标移入事件
                var bgColor=null;//先声明一个变量把颜色存起来
                $('li').mouseover(function (  ) {

                    // 3.1在鼠标移入到这个li标签时,没有改变颜色之前,把他之前的颜色给记录下来.
                  bgColor=$(this).css('backgroundColor');
                  $(this).css('backgroundColor','green')

                })
                //4. 鼠标移出事件
                $('li').mouseout(function (  ) {
                    $(this).css('backgroundColor',bgColor)
                })

            } )
        </script>