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>

    运行结果:



  • 相关阅读:
    spring-注解配置-junit整合测试-aop
    安装springsource-tool-suite插件成功之后找不到spring的处理办法
    spring-搭建-概念-配置详解-属性注入
    JSP-案例-商品增删改
    struts2-自定义拦截器-struts2标签
    struts2-OGNL表达式-OGNL与Struts2的结合
    struts2-result-servletAPI-获得参数-参数封装
    struts2-环境搭建-访问流程-配置详解-常量配置-类详解
    Hibernate-一对多|多对一-多对多
    Hibernate-HQL-Criteria-查询优化
  • 原文地址:https://www.cnblogs.com/james1207/p/3331290.html
Copyright © 2011-2022 走看看