jQuery实现的隔行变色功能[案例]

本文给出了一个例子来描述jQuery实现的隔行变色功能。分享给大家参考，如下：

实现效果如图3360所示

Html结构代码：

Ul id=' ul1' liI是第一个li标签/li liI是第二个li标签/li liI是第三个li标签/li liI是第四个li标签/li liI是第五个li标签/li liI是第六个li标签/li liI是第七个li标签/li liI是第八个Li标签/Li liI是第九个Li标签/Li liI是第十个

script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(function(){//1。将奇数li标签的背景颜色设置为天蓝色。$ ('li3360odd ')。CSS(。//2.将偶数li标签的背景颜色设置为红色。$ ('li:even ')。CSS('背景色'，'红色')；//3.鼠标输入事件var bgColor=null//首先声明一个变量来保存color $ ('li ')。mouseover (function () {//3.1当鼠标移动到这个Li标签时，在改变颜色之前，记录下他之前的颜色。bgcolor=$ (this)。CSS('背景色')；$(这个)。CSS ('backgroundcolor '，' green')})//4。鼠标移出事件$(“Li”)。Mouseout(函数(){$ (this))。CSS ('backgroundcolor '，bgcolor)})})/脚本完整的实例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8/将奇数li标签的背景颜色设置为天蓝色。$ ('li:odd ')。CSS ('backgroundcolor '，' sky blue ')；//2.将偶数li标签的背景颜色设置为红色。$ ('li:even ')。CSS('背景色'，'红色')；//3.鼠标输入事件var bgColor=null//首先声明一个变量来保存color $ ('li ')。mouseover (function () {//3.1当鼠标移动到这个Li标签时，在改变颜色之前，记录下他之前的颜色。bgcolor=$ (this)。CSS('背景色')；$(这个)。CSS ('backgroundcolor '，' green')})//4。鼠标移出事件$(“Li”)。Mouseout(函数(){$ (this))。CSS ('backgroundcolor '，BgColor) })} )/script/body/html感兴趣的朋友也可以使用线上的HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上面代码的运行效果。

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

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