2.3.3 过滤选择器:

2.3.3  过滤选择器:

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素

过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头

按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤

1.基本过滤选择器 

选择器                    描述                        返回                       示例

:first                    选取第一个元素               单个元素                  $("div:first")选取所有<div>元素中第一个<div>元素 



node2:/var/www/html#cat a29.html 
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a29.js"></script> 

node2:/var/www/html#cat a29.js
$('div:first')
   .css("background","#bbffaa");
node2:/var/www/html#

:last              选取最后一个元素                单个元素          $("div:last")选取所有<div>元素中最后一个<div>元素 

node2:/var/www/html#cat a29.js
$('div:last')
   .css("background","#bbffaa");
   
:not(selector)    去除所有与给定选择器匹配的元素              集合元素           

$("input:not(.myClass)选取class不是myClass的<input>元素 

node2:/var/www/html#cat a30.html 
<input class="myClass">
<input class="myClass11">
<input class="myClass22">
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a30.js"></script>
node2:/var/www/html#

node2:/var/www/html#cat a30.html 
<input class="myClass">
<input class="myClass11">
<input class="myClass22">
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a30.js"></script>

node2:/var/www/html#cat a30.html 
<input class="myClass">
<input class="myClass11">
<input class="myClass22">
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a30.js"></script>
node2:/var/www/html#

node2:/var/www/html#cat a30.js
$("input:not(.myClass)")//class不是myClass的<input>元素
   .css("background","#bbffaa");
   
:even   选取索引是偶数的所有元素,索引从0开始        集合元素       

$("input:even") 选取索引是偶数的<input>元素 

node2:/var/www/html#cat a30.js
$("input:even")//class不是myClass的<input>元素
   .css("background","#bbffaa");
   
 0 2 被选中
 
 :odd 选取索引是奇数的所有元素,索引从0开始  集合元素        $("input:odd")选取索引是奇数的<input>元素
 
 node2:/var/www/html#cat a30.js
$("input:odd")//class不是myClass的<input>元素
   .css("background","#bbffaa");
   
  
 :eq(index)   选取索引等于index的元素(index从0开始)           单个元素    
 
 
 $("input:eq(1)")选取索引等于1的<input元素>
 

node2:/var/www/html#cat a30.js
 $("input:eq(1)")//class不是myClass的<input>元素
   .css("background","#bbffaa");
   
:gt(index)           选取索引大于index的元素(index从0开始) 集合元素

$("input":lt(1)"选取索引小于1的<input>元素(注:小于1,而不包含1)



node2:/var/www/html#cat a30.js
 $("input:lt(3)")//class不是myClass的<input>元素
   .css("background","#bbffaa");
   

:header          选取所有的标题元素,例如h1,h2,h3等等        集合元素  

$(":header") 选取网页中的所有的<h1>,<h2>,<h3>