zoukankan      html  css  js  c++  java
  • JQuery--过滤选择器

    常用的过滤选择器有:

    上例子:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .red{
     8             background-color: #6e8cd5;
     9         }
    10     </style>
    11     <script src="lib/jquery-1.12.2.js"></script>
    12     <script>
    13         $(function () {
    14             // 索引值为奇数
    15             $('button').eq(0).click(function () {
    16                  $('li:odd').toggleClass('red');
    17             });
    18             // 索引值为偶数
    19             $('button').eq(1).click(function () {
    20                 $('li:even').toggleClass('red');
    21             });
    22             // 索引值等于2
    23             $('button').eq(2).click(function () {
    24                 $('li:eq(2)').toggleClass('red');
    25             });
    26             // 选中所有li排除最后一个
    27             $('button').eq(3).click(function () {
    28                 $('li:not(:last)').toggleClass('red');
    29             });
    30         });
    31     </script>
    32 </head>
    33 <body>
    34 <button>索引值为奇数</button>
    35 <button>索引值为偶数</button>
    36 <button>索引值等于2</button>
    37 <button>选中所有li排除最后一个</button>
    38 <ul>
    39     <li>0001</li>
    40     <li>0002</li>
    41     <li>0003</li>
    42     <li>0004</li>
    43     <li>0005</li>
    44     <li>0006</li>
    45     <li>0007</li>
    46     <li>0008</li>
    47     <li>0009</li>
    48     <li>0010</li>
    49     <li>0011</li>
    50     <li>0012</li>
    51     <li>0013</li>
    52     <li>0014</li>
    53     <li>0015</li>
    54     <li>0016</li>
    55     <li>0017</li>
    56     <li>0018</li>
    57     <li>0019</li>
    58     <li>0020</li>
    59 </ul>
    60 </body>
    61 </html>
  • 相关阅读:
    Mysql 完整性约束
    Mysql 多表查询
    Mysql 数据表记录操作
    Mysql 数据库表操作
    Mysql 数据库操作
    sql语句规范
    Python IO模型
    csu-2018年11月月赛Round2-div1题解
    csu-2018年11月月赛Round2-div2题解
    Github新手使用学习详解
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7774544.html
Copyright © 2011-2022 走看看