首页 > 代码库 > 过滤选择器——简单过滤选择器

过滤选择器——简单过滤选择器

2024-07-26 11:11:16   227人阅读

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头；

简单过滤选择器是选择器中使用最广泛的一种，其详细说明如下表所示。

 
选择器功能返回值
first() 或 :first获取第一个元素单个元素
last() 或 :last获取最后一个元素单个元素
:not(selector)获取除给定选择器外的所有元素元素集合
:even获取所有索引值为偶数的元素，索引号从0开始元素集合
:odd获取所有索引值为奇数的元素，索引号从0开始元素集合
:eq(index)获取指定索引值的元素，索引号从0开始单个元素
:gt(index)获取所有大于给定索引值的元素，索引号从0开始元素集合
:lt(index)获取所有小于给定索引值的元素，索引号从0开始元素集合
:header获取所有标题类型的元素，如h1,h2......元素集合
:animated获取正在执行动画效果的元素元素集合

Demo如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9     body{font-size:12px;text-align:center}10     div{width:241px;height:93px;border:solid 1px #eee}11     h1{font-size:13px}12     ul{list-style-type:none;padding:0px}13     .DefClass .NotClass{height:23px;width:60px;14             line-height:23px;float:left;15             border-top:solid 1px #eee;border-bottom:solid 1px #eee}16     .GetFocus{width:58px;border:solid 1px #666;17             background-color:#eee}18             19     #spnMove{width:238px;height:23px;line-height:23px;}20 </style>21 <script type="text/javascript">22     $(function(){    // 增加第一个元素的类别23     //    $("li:first").addClass("GetFocus");24     })25     26     $(function(){    // 增加最后一个元素的类别27     //    $("li:last").addClass("GetFocus");28     })29     30     $(function(){    // 增加去除所有与给定选择器匹配的元素类别31     //    $("li:not(.NotClass)").addClass("GetFocus");32     })33     34     $(function(){    // 增加所有索引值为偶数的元素类编，从0开始计数35     //    $("li:even").addClass("GetFocus");36     })37     38     $(function(){    // 增加所有索引值为奇数的元素类别，从0开始计数39     //    $("li:odd").addClass("GetFocus");40     })41     42     $(function(){    // 增加一个给定索引值得元素类别，从0开始计数43     //    $("li:eq(1)").addClass("GetFocus");44     })45     46     $(function(){    // 增加所有大于给定索引值得元素类别，从0开始计数47     //    $("li:gt(1)").addClass("GetFocus");    48     })49     50     $(function(){    // 增加所有小于给定索引值的元素类别，从0开始计数。51     //    $("li:lt(4)").addClass("GetFocus");52     })53     54     $(function(){    // 增加标题类元素类别    55     //    $("div h1").css("width","238");    56     //    $(":header").addClass("GetFocus");57     })58     59     $(function(){60         animateIt();    // 增加动画效果元素类别61         $("#spnMove:animated").addClass("GetFocus");62     })63     64     function animateIt(){    // 动画效果65         $("#spnMove").slideToggle("slow",animateIt);66     }67 </script>68 </head>69 <body>70     <div>71         <h1>基本过滤选择器</h1>72         <ul>73             <li class="DefClass">Item 0</li>74             <li class="DefClass">Item 1</li>75             <li class="NotClass">Item 2</li>76             <li class="DefClass">Itme 3</lis>77         </ul>78         <span id="spnMove">Span Move</span>79     </div>80 </body>81 </html>
Demo

 

过滤选择器——简单过滤选择器


联系
我们