使用jquery实现表单点击进入、移出变色效果(三)
2016-01-07 16:26
603 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("tr:eq(0)").css({backgroundColor:"black",color:"#FFF"});
//hover是jQuery中的一个复合事件、
//当鼠标进入选中的元素时,会执行第一个处理函数
//当鼠标离开选中的元素时,会执行第二个处理函数
$("tr:gt(0)").hover(
//处理鼠标进入事件
function(){
$(this).css("backgroundColor","#CCC");
},
//处理鼠标离开事件
function(){
$(this).css("backgroundColor","#FFF");
}
);
})
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>张三</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>70</td>
</tr>
<tr>
<td>赵六</td>
<td>95</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("tr:eq(0)").css({backgroundColor:"black",color:"#FFF"});
//hover是jQuery中的一个复合事件、
//当鼠标进入选中的元素时,会执行第一个处理函数
//当鼠标离开选中的元素时,会执行第二个处理函数
$("tr:gt(0)").hover(
//处理鼠标进入事件
function(){
$(this).css("backgroundColor","#CCC");
},
//处理鼠标离开事件
function(){
$(this).css("backgroundColor","#FFF");
}
);
})
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>张三</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>70</td>
</tr>
<tr>
<td>赵六</td>
<td>95</td>
</tr>
</table>
</body>
</html>
相关文章推荐
- 实例讲解jquery与json的结合
- 使用jquery实现表单点击进入、移出变色效果(二)
- jquery的animate设置样式overflow:hidden的解决方法
- 基于jquery实现表格无刷新分页
- 使用jquery实现表单点击进入、移出变色效果(一)
- jQuery版本冲突问题解决与分析
- jQuery全屏滚动插件fullPage.js
- jquery属性选择器使用事例
- jQuery的$.browser的版本兼容问题
- jquery选择器的使用事例
- 使用jquery现实图片切换效果
- 鼠标聚焦到TextBox输入框时,按回车键刷新页面原因及解决方法
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- 12 个非常实用的 jQuery 代码片段
- 每个程序员都会的 35 个 jQuery 小技巧
- jquery live hover事件的替代写法
- 前端程序员应该知道的 15 个 jQuery 小技巧
- 基于jQuery选择器的整理集合
- Jquery-数组删除元素
- DOM对象与jquery对象有什么不同