• jQuery过滤选择器 通过过滤条件选取需要的元素


    jQuery过滤选择器包括 简单过滤选择器、内容过滤选择器、属性过滤选择器、子元素过滤选择器、表单域属性过滤选择器、可见性过滤选择器。

    1.简单过滤选择器

      (1):first 选择器。选择第一个匹配元素。 $("td:first").css("border","2px solid blue");

      (2):last 选择器。选择最后一个匹配元素。 $("td:last").css("border","2px solid blue");

      (3):odd 选择器。选择所有基数元素。 $("td:odd").css("border","2px solid blue");

      (4):even 选择器。选择所有偶数元素。 $("td:even").css("border","2px solid blue");

      (5):eq(index) 选择器。从匹配的集合中选择索引等于给定值的元素。 $(td:eq(0))".css("border","2px solid blue");

      (6):gt(index) 选择器。索引大于给定值的所有元素。

      (7):lt(index) 选择器。索引小于给定值的所有元素。

      (8):not(selector...) 选择器。去除某些选择器后的所有元素。 $("td:not(:first,:last)").css(...);

      (9):header 选择器。选择所有诸如 h1,h2,h3 之类的标题元素。 $(":header")

      (10):animated 选择器。选择所有正在执行动画效果的元素。 $(td:animated);

    实例:效果图和代码如下:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
     6     <title>表单域选择器应用示例</title>
     7     <script language="javascript" type="text/javascript">
     8         $(document).ready(function() {
     9         $(":header").css("color", "#999");//设置表格的标题字体颜色
    10         $("tr:first").css("background", "#FCF");//设置表格第一行的背景色
    11         $("td:last").css("background", "#000");//设置表格中最后一个单元格的颜色
    12         $("td:odd").css("background", "yellow");//设置索引为奇数的单元格的背景色为黄色
    13         $("td:even").html("偶数");//给索引为偶数的单元格添加文本
    14         $("td:eq(1)").css("border", "1px solid red");//设置索引为1的单元格的边框
    15         $("td:gt(6)").css("border", "1px solid blue");//设置索引大于6的单元格的边框
    16         $("td:lt(6)").css("color", "blue");//设置索引小于6的单元格的字体颜色
    17         $("td:not(:first,:last)").css("color", "red");//设置除了第一个和最后一个之外的单元格的字体颜色
    18     });
    19     </script>
    20 </head>
    21 <body>
    22     <h3 align="center">简单过滤选择器应用示例</h3>
    23     <table width="480" height="160" border="1">
    24           <tr>
    25             <td>&nbsp;</td>
    26             <td>&nbsp;</td>
    27             <td>&nbsp;</td>
    28             <td>&nbsp;</td>
    29             <td>&nbsp;</td>
    30           </tr>
    31           <tr>
    32             <td>&nbsp;</td>
    33             <td>&nbsp;</td>
    34             <td>&nbsp;</td>
    35             <td>&nbsp;</td>
    36             <td>&nbsp;</td>
    37           </tr>
    38           <tr>
    39             <td>&nbsp;</td>
    40             <td>&nbsp;</td>
    41             <td>&nbsp;</td>
    42             <td>&nbsp;</td>
    43             <td>&nbsp;</td>
    44           </tr>
    45     </table>
    46 </body>
    47 </html>

    2.内容过滤选择器

    (1):contains() 选择器。 $("p:contains('你好')").css(...); //为p标签中包含“你好”的段落设置样式。

    (2):has()选择器。 $(div:has(p)).css(...); //为 div 包含 p 子元素设置样式。

    (3):empty 选择器。 $("td:empty").css(..); // 为空单元格设置样式。

    (4):parent 选择器。功能与 empty 选择器相反。 $("td:parent").css(...); //为内容不空的单元格设置样式。

    3.属性过滤选择器

    (1)包含属性选择器。 $("div[id]") 选择所有包含 id 属性的 div 元素。

    (2)属性等于选择器。 $("input[name=username]").attr("value","lihui"); //input 的name属性为username的文本框值设置为 lihui。

    (3)属性包含选择器。 $("input[name*='news']").val("name 中包含 news 的元素");

    (4)属性包含单词选择器。 $("input[name~='news']").val("name 中包含 news 单词的元素");

    (5)属性不等于选择器。 $("input[name!='username']")

    (6)属性开始选择器。 $("input[value^='lih']")  value值以 lih 开头的 input 元素

    (7)属性结尾选择器。 $("input[value$=hui]") value值为 hui 结尾的 input 元素

    (8)复合属性选择器。 $("input[id][name^='li']").val("符合条件"); //为包含id属性且name属性以 li 开头的文本框赋值为“符合条件”。

    4.子元素过滤选择器

    (1):first-child

    (2):last-child

    (3):nth-child(index/even/odd/equation)

    (4):only-child

    实例:效果和代码如下:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
     6     <title>子元素选择器应用示例</title>
     7     <script language="javascript" type="text/javascript">
     8         $(document).ready(function() {
     9             $("ul li:first-child").css("text-decoration", "underline").css("color","blue");
    10             $("ul li:last-child").css("text-decoration", "underline").css("color","red");
    11             $("ul li:nth(1)").css("text-decoration", "bold").css("color","#CC44CC");
    12             $("ul li:only-child").css("text-decoration", "underline").css("color","#55CCFF");
    13         });
    14     </script>
    15 </head>
    16 <body bgcolor="#DDDDDD">
    17     <h3 align="center">子元素过滤选择器应用示例</h3>
    18     <ul>
    19         <li>中国</li>
    20         <li>美国</li>
    21         <li>英国</li>
    22     </ul>
    23     <ul>
    24         <li>1111</li>
    25         <li>2222</li>
    26         <li>3333</li>
    27     </ul>
    28     <ul>
    29         <li>only child</li>
    30     </ul>
    31 </body>
    32 </html>

    5.表单域属性过滤选择器

    (1):checked  可以是 input(单选按钮或复选框), :radio(单选按钮), :checkbox(复选框)。

    (2):enabled 用于所有可用的表单域

    (3):disabled 用于所有被禁用的表单域

    (4):selected 用于选择从列表框选择所有选中的 option 元素。

    实例:效果及代码如下:

     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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>表单域属性过滤选择器应用示例</title>
     6 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
     7 <script language="javascript" type="text/javascript">
     8   $(document).ready(function(){
     9      $("input:checked").css("border","1px solid red");
    10      $("input:disabled").css("background","#FCF");
    11      $("input:enabled").val("可用文本框");
    12      $("select option:selected").length();//获取下拉框中被选中的个数
    13      })
    14 </script>
    15 </head>
    16 
    17 <body>
    18 <h3 align="center">表单域属性过滤选择器应用示例</h3>
    19 <table width="602" height="81" border="1">
    20   <tr>
    21     <td width="118">复选框:</td>
    22     <td width="443"><input type="checkbox" checked="checked" />被选中的复选框
    23     <input type="checkbox" checked="checked" />被选中的复选框
    24     <input type="checkbox" />没有被选中的复选框
    25     </td>
    26   </tr>
    27   <tr>
    28     <td>可用文本框:</td>
    29     <td><input type="text"/></td>
    30   </tr>
    31   <tr>
    32     <td>不可用文本框:</td>
    33     <td><input type="text" disabled="disabled" /></td>
    34   </tr>
    35    <tr>
    36     <td>下拉列表</td>
    37     <td>
    38     <select name="test" >
    39      <option>浙江</option>
    40      <option>湖南</option>
    41      <option selected="selected">北京</option>
    42      <option selected="selected">天津</option>
    43      <option>广州</option> 
    44      <option>湖北</option>
    45   </select>
    46   </td>
    47   </tr>
    48 </table>
    49 
    50 </body>
    51 </html>

    6.可见性过滤选择器

    (1):hidden 用于选择所有不可见元素

      $("selector:hidden")

    (2):visible 用于选择所有可见元素

      $("selector:visible")

  • 相关阅读:
    MySQL图形化管理工具之Navicat安装以及激活
    切换路由时取消全部或者部分axios请求,并将一些从不需要取消的加入白名单
    使用node-static运行vue打包文件dist
    elementUI使用本地变量进行验证,监测不到本地变量的变化 的问题
    vue-cli3打包时webpack优化
    实现两个对象的深度合并
    第一章:操作系统概述
    IDEA 2020.1 安装教程
    常用DOS命令
    Listener:监听器
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2578132.html
Copyright © 2020-2023  润新知