• jquery第六期:位置选择器


    <html>
    <head>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {    
    	alert($("tr:first").html());
    	alert($("tr:last").html())
       });
    </script>
    </head>
    <body>
    <table width="300" border="1" align="center" >
        <tr>
    	   <td>用户标识</td>
    	   <td>用户姓名</td>
    	   <td>用户年龄</td>
    	   <td>用户密码</td>
        </tr>
        <tr>
    	   <td>A</td>
    	   <td>张三</td>
    	   <td>12</td>
    	   <td>hehe1</td>
        </tr>
    	<tr>
    	   <td>B</td>
    	   <td>李四</td>
    	   <td>13</td>
    	   <td>hehe2</td>
        </tr>
    	<tr>
    	   <td>C</td>
    	   <td>王五</td>
    	   <td>14</td>
    	   <td>hehe3</td>
        </tr>
    	<tr>
    	   <td>D</td>
    	   <td>牛六</td>
    	   <td>15</td>
    	   <td>hehe4</td>
        </tr>
    </body>
    </html>

    tr:first 第一个与tr标签匹配 

    tr:last 最后一个与tr标签匹配

    运行结果,连续两个提示框:



    first-child:

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {    
    	$("tr:first-child").css("color","red");
       });
    </script>
    </head>
    <body>
    <table width="300" border="1" align="center" >
        <tr>
    	   <td>用户标识</td>
    	   <td>用户姓名</td>
    	   <td>用户年龄</td>
    	   <td>用户密码</td>
        </tr>
        <tr>
    	   <td>A</td>
    	   <td>张三</td>
    	   <td>12</td>
    	   <td>hehe1</td>
        </tr>
    	<tr>
    	   <td>B</td>
    	   <td>李四</td>
    	   <td>13</td>
    	   <td>hehe2</td>
        </tr>
    	<tr>
    	   <td>C</td>
    	   <td>王五</td>
    	   <td>14</td>
    	   <td>hehe3</td>
        </tr>
    	<tr>
    	   <td>D</td>
    	   <td>牛六</td>
    	   <td>15</td>
    	   <td>hehe4</td>
        </tr>
    </table>
     </body>
    </html>


    获取第一个匹配的tr

    运行结果:


    last-child:

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {    
    	$("tr:last-child").css("color","red");
       });
    </script>
    </head>
    <body>
    <table width="300" border="1" align="center" >
        <tr>
    	   <td>用户标识</td>
    	   <td>用户姓名</td>
    	   <td>用户年龄</td>
    	   <td>用户密码</td>
        </tr>
        <tr>
    	   <td>A</td>
    	   <td>张三</td>
    	   <td>12</td>
    	   <td>hehe1</td>
        </tr>
    	<tr>
    	   <td>B</td>
    	   <td>李四</td>
    	   <td>13</td>
    	   <td>hehe2</td>
        </tr>
    	<tr>
    	   <td>C</td>
    	   <td>王五</td>
    	   <td>14</td>
    	   <td>hehe3</td>
        </tr>
    	<tr>
    	   <td>D</td>
    	   <td>牛六</td>
    	   <td>15</td>
    	   <td>hehe4</td>
        </tr>
    </table>
    </body>
    </html>


    运行结果:


    nth-child(n):

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
       $(function()
       {    
    	$("tbody tr:nth-child(2)").css("color","red");
       });
    </script>
    </head>
    <body>
    <table width="300" border="1" align="center" >
        <tr>
    	   <td>用户标识</td>
    	   <td>用户姓名</td>
    	   <td>用户年龄</td>
    	   <td>用户密码</td>
        </tr>
    	<tbody>
        <tr>
    	   <td>A</td>
    	   <td>张三</td>
    	   <td>12</td>
    	   <td>hehe1</td>
        </tr>
    	<tr>
    	   <td>B</td>
    	   <td>李四</td>
    	   <td>13</td>
    	   <td>hehe2</td>
        </tr>
    	<tr>
    	   <td>C</td>
    	   <td>王五</td>
    	   <td>14</td>
    	   <td>hehe3</td>
        </tr>
    	<tr>
    	   <td>D</td>
    	   <td>牛六</td>
    	   <td>15</td>
    	   <td>hehe4</td>
        </tr>
    	</tbody>
    </table>
    </body>
    </html>

    运行结果:



  • 相关阅读:
    JavaBean
    J2EE的13个规范
    IntelliJ IDEA 常用快捷键列表及技巧大全
    服务端工程师入门与进阶 Java 版
    新兵训练营课程——环境与工具Java[转]
    asp.net 局域网中获取 client的机器名
    css 阻止元素中的文本。双击选中
    正则实践
    jq dom不存在时绑定事件
    正则预查
  • 原文地址:https://www.cnblogs.com/james1207/p/3331290.html
Copyright © 2020-2023  润新知