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>

    运行结果:



  • 相关阅读:
    day01
    You need tcl 8.5 or newer in order to run the Redis test
    docker配置网络
    centos设置时间同步
    cacti 添加tomcat监控
    cacti 安装perl 和XML::Simple
    cacti 添加redis监控(远程服务器)
    cacti安装spine 解决WARNING: Result from CMD not valid. Partial Result: U错误
    cacti 添加mysql 监控 (远程服务器)
    centos 安装redis
  • 原文地址:https://www.cnblogs.com/james1207/p/3331290.html
Copyright © 2011-2022 走看看