zoukankan      html  css  js  c++  java
  • 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>

    运行结果:



  • 相关阅读:
    前端代码规范
    AD 对联
    leaflet 入门笔记
    在Mac OS X上安装Git
    在Mac上开启C的新征程
    Python编程基础
    GitHub的使用(Git Shell)
    《网页设计心理学》Susan M.Weinschenk 小结精粹
    【问题】做图片验证码时乱码了,在header前加上ob_clean()就能神奇的显示?!
    --allow-file-access-from-files 命令的使用
  • 原文地址:https://www.cnblogs.com/james1207/p/3331290.html
Copyright © 2011-2022 走看看