了解一下jQuery的链式编程

前面两个案例已经用到链式编程。链式编程中.调用方法,操作的是上一步方法返回的元素集合。 案例:表格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>&nbsp;1</td>
            <td>&nbsp;樊胜美</td>
            <td>&nbsp;顺德</td>
        </tr>
        <tr>
            <td>&nbsp;2</td>
            <td>&nbsp;安迪</td>
            <td>&nbsp;广州</td>
        </tr>
        <tr>
            <td>&nbsp;3</td>
            <td>&nbsp;小蚯蚓</td>
            <td>&nbsp;上海</td>
        </tr>
        <tr>
            <td>&nbsp;4</td>
            <td>&nbsp;关关</td>
            <td>&nbsp;哈尔滨</td>
        </tr>
        <tr>
            <td>&nbsp;5</td>
            <td>&nbsp;曲筱绡</td>
            <td>&nbsp;北京</td>
        </tr>
    </table>
</body>
</html>
Code language: HTML, XML (xml)

说明: $(this).css('background-color', 'orange') 设置当前行背景橙色,返回当前tr对象; 链式继续调用.siblings()获取其他同行tr,把兄弟行背景重置白色。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注