zoukankan      html  css  js  c++  java
  • JQuery[05] 过滤器

    :first 选取第一个元素

    $("span:first") 选择第一个span元素

    :last 选取最后一个元素

    同first

    :not 选择不满足选择器条件的元素

    $("input:not(.css)") 选择class属性不是css的input元素

    -

    :even

    :odd

    -

    选取索引是奇数、偶数的元素

    $("input:even") 选择索引是奇数的input元素

    -

    :eq

    :gt

    :lt

    选取索引等于(eq)大于(gt)小于(lt)的元素

    $("input:gt(2)") 选择索引大于2的input元素

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>基本的过滤器</title>
    5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    6 <script type="text/javascript">
    7 $(function () {
    8 //设置表格属性
    9 $("#tb1 tr").height("30px");
    10 $("#tb1 td").width("40px").each(function (item) { //设置单元格内容
    11 $(this).text(item);
    12 }).mousemove(function () {
    13 var myindex = $(this).text();
    14 var eq = $("#tb1 td:eq(" + myindex + ")").text();
    15 var lt = $("#tb1 td:lt(" + myindex + ")").text();
    16 var gt = $("#tb1 td:gt(" + myindex + ")").text();
    17 $("#tips").text("eq:" + eq + "\nlt:" + lt + "\ngt:" + gt);
    18 });
    19
    20 //设置交错背景色
    21 $("#tb1 tr:odd").css("background-color", "rgb(128,128,128)");
    22 $("#tb1 tr:even").css("background-color", "green");
    23 });
    24 </script>
    25 </head>
    26 <body>
    27 <table id="tb1" border="0" style="margin:0 auto;">
    28 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    29 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    30 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    31 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    32 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    33 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    34 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    35 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    36 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    37 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    38 </table>
    39
    40 <pre id="tips"></pre>
    41 </body>
    42 </html>

      

    My New Blog : http://blog.fdlife.info/ The more you know, the less you believe.
  • 相关阅读:
    Laravel 如何在blade文件中使用Vue组件
    历史上的今天mysql数据库包含详情分类以及图片
    【问题】多重继承时,super函数只初始化继承的第一个类,不初始化第二个类。
    pretty-errors:美化python异常输出以使其清晰易读
    python 安装pyinstaller
    python制作ico图标
    Unofficial Windows Binaries for Python Extension Packages
    【转载】wav文件格式分析与详解
    C语言结构体定义位域,从bit0开始,依次到最高bit位
    IP切换脚本
  • 原文地址:https://www.cnblogs.com/ForDream/p/2130814.html
Copyright © 2011-2022 走看看