zoukankan      html  css  js  c++  java
  • jQuery 8 基本过滤器

    有以下几种(前面的冒号不能少哦):

    1. :first  选择第一个元素.  $("div:first"):选择第一个div。
    2. :last  选择最后一个元素. $("div:last"):选择最后一个div.
    3. :not  选择不满足条件的元素。$("input:not(.myclass)"):选择样式名不是myclass的input.
    4. :even(:odd) 选择索引是奇数或偶数的元素. $("input:even"):选择索引是奇数的input.
    5. :eq(索引号)  等于,是Equal缩写. $("input:eq(1)"):选择索引为1的input元素
    6. :gt(索引号)  大于,是great than的缩写.  $("input:gt(0)"):选择索引大于0的input元素
    7. :lt(索引号)   小于,是little than的缩写.   $("input:lt(1)"):选择索引小于1的input元素
    8. :header 选择所有h1~h6的元素。 $(":header"):选择所有的 h1~h6元素
    9. :animated  选择所有正在执行的动画元素。 $("div:animated") 选择正在执行动画的div元素

    实例1:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="JScript/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("div:last").css("background", "Red");
                alert($("input:not(.myclass)").val());
            });
        </script>
        <style type="text/css">
          .myclass{background:Green;}
        </style>
    </head>
    <body>
    <div>
      aaa
    </div>
    <div>
      bbb
    </div>
    <input type="button" value="我是按钮"/>
    <input type="text" class="myclass"/>
    </body>
    </html>

    实例2

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#table1 td").html("我是表格").mouseover(function () {
                    $(this).html("<font color=yellow>我是表格</font>").siblings().html("<font color=red>我是表格</font>");
                })
    
                $("td:last").html("fafdafaf");
                $(":header").html("<font color='yellow'>我来了</font>");
            });
        </script>
    </head>
    <body>
    <h1>我的太阳</h1>
    <h2>我的太阳</h2>
    <h3>我的太阳</h3>
    <table id="table1" border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </body>
    </html>

     实例3

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#table1 tr:first").css("background", "yellow"); //第一行变色
            $("#table1 tr:gt(0):lt(3)").css("color", "blue"); //除表头外前三行变色
            $("#table1 tr:gt(0):odd").css("background", "green"); //队表头外偶数变色
            $("#table1 tr td:last").css("color","red");//最后一个单元格字体显红色
    
        });
    </script>
    </head>
    <body>
    <table id="table1" border="1" cellspacing="0" cellpadding="0" width="15%">
        <tr>
            <th>名称</th>
            <th>成绩</th>        
        </tr>    
    
        <tr>
            <td >TOM</td>
            <td align="right">100</td>        
        </tr>
    
        <tr>
            <td>JIM</td>
            <td align="right">99</td>        
        </tr>
    
        <tr>
            <td>Lilu</td>
            <td align="right">98</td>        
        </tr>
    
        <tr>
            <td>WanKe</td>
            <td align="right">97</td>        
        </tr>
    
        <tr>
            <td>Xuwei</td>
            <td align="right">96</td>        
        </tr>
    
        <tr>
            <td>Jams</td>
            <td align="right">95</td>        
        </tr>
        <tr>
            <td>平均成绩</td>
            <td align="right">98</td>        
        </tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    IBM X3650 M4服务器安装centos找不到硬盘的解决方法
    页面头部title、description、keywords标签的优化
    SEO优化之Title 和 Meta 标签
    WPA字典锦集
    PIN码计算锦集
    神经网络入门 第6章 识别手写字体
    神经网络入门 第5章 实现多层神经网络BP算法
    神经网络入门 第4章 神经网络可以模拟任意函数
    神经网络入门 第3章 S函数
    神经网络入门 第2章 编写第一个神经元
  • 原文地址:https://www.cnblogs.com/yagzh2000/p/3098862.html
Copyright © 2011-2022 走看看