java循环隔行变色_jQuery实现的隔行变色功能【案例】

摘要：这篇jQuery栏目下的“jQuery实现的隔行变色功能【案例】”，介绍的技术点是“jquery实现、jQuery、隔行变色、案例、变色、实现”，希望对大家开发技术学习和问题解决有帮助。

本文实例讲述了jQuery实现的隔行变色功能。分享给大家供大家参考，具体如下：

实现效果如图:

html结构代码:

• 我是第1个li标签
• 我是第2个li标签
• 我是第3个li标签
• 我是第4个li标签
• 我是第5个li标签
• 我是第6个li标签
• 我是第7个li标签
• 我是第8个li标签
• 我是第9个li标签
• 我是第10个li标签

JQuery代码:

$ ( 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)

})

} )

完整实例代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.jb51.net jQuery隔行变色

• 我是第1个li标签
• 我是第2个li标签
• 我是第3个li标签
• 我是第4个li标签
• 我是第5个li标签
• 我是第6个li标签
• 我是第7个li标签
• 我是第8个li标签
• 我是第9个li标签
• 我是第10个li标签

$ ( 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)

})

} )

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。