前面两个案例已经用到链式编程。链式编程中.调用方法,操作的是上一步方法返回的元素集合。 案例:表格tr鼠标悬浮高亮效果,给tr绑定hover事件,修改tr背景色。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication1.WebForm12" %>
<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script type="text/javascript">
$(function () {
$('tr').mouseover(function () {
$(this).css('background-color', 'orange').siblings().css('background-color', 'white');
});
});
</script>
</head>
<body>
<table style="width: 100%;">
<tr>
<td> 1</td>
<td> 樊胜美</td>
<td> 顺德</td>
</tr>
<tr>
<td> 2</td>
<td> 安迪</td>
<td> 广州</td>
</tr>
<tr>
<td> 3</td>
<td> 小蚯蚓</td>
<td> 上海</td>
</tr>
<tr>
<td> 4</td>
<td> 关关</td>
<td> 哈尔滨</td>
</tr>
<tr>
<td> 5</td>
<td> 曲筱绡</td>
<td> 北京</td>
</tr>
</table>
</body>
</html>
Code language: HTML, XML (xml)
说明: $(this).css('background-color', 'orange') 设置当前行背景橙色,返回当前tr对象; 链式继续调用.siblings()获取其他同行tr,把兄弟行背景重置白色。
Previous: 练习一下-完成菜单选择功能
Next: 简单选择器