Jquery第三章 过滤选择器

第三章 过滤选择器

一.基本过滤器

写法	描述
$(‘p:first’)	选取页面元素内的第一个p元素
$(‘p:last’)	选取页面元素内的最后一个p元素
$(‘p:not(.select)’)	选取选择器不是select的p元素
$(‘p:even’)	选取索引是偶数的P元素(索引从0开始)
$(‘p:odd’)	选取索引是奇数的p元素(索引从0开始)
$(‘p:eq(index)’)	选取索引等于index的p元素(索引从0开始,索引支持负数)
$(‘p:gt(index)’)	选取索引>index的p元素(索引从0开始)
$(‘p:lt(index)’)	选取索引
$(‘:header’)	选取标题元素h1~h6
$(‘:animated’)	选取正在执行动画的元素
$(‘input:focus’)	选取当前被焦点的元素
jQuery为常用的过滤器提供了丰富的方法
eq(index)	获取是index索引值的元素(索引从0开始,负值从后开始)
first()	选取第一个元素
last()	选取最后一个元素
not(select)	选取不是该选择器的元素

用法：

第一个P
id="select">第二个P
第三个P
我是h3
我是h4
type="text" value="123">

二.内容过滤器

写法	描述
$(‘:contains(“百度”)’)	选取含有”百度”文本的元素
$(‘:empty’)	选取不包含子元素或空文本的元素
$(‘:has(select)’)	选取含有该select选择器的元素(必须是父元素上调用,返回的是父元素)
$(‘:parent’)	选取含有子元素或文本的元素
has()	jQuery提供了一个has()方法作用等同has过滤器
jQuery提供了parent相关方法,但与过滤器含义不等同
parent()	选择当前元素的父元素
parents()	选择当前元素的祖先元素(包括父元素)
parentsUntil()	选择当前元素的祖先元素,遇到指定元素则停止

用法：

href="http://www.baidu.com">百度


    我是第一个span
    id="show">我是第二个span


style="width:100px;height:100px;background:deeppink">
    
style="width:80px;height:50px;background:orangered">
        测试parents
    

 

三.可见性过滤器

写法	描述
$(‘:hidden’)	选取所有不可见元素
$(‘:visible’)	选取所有可见元素
hidden过滤器一般是包含样式为display:none。input表单类型为hidden 设置了visibility:hidden的元素,虽然其在物理上是不可见的,但却保留了物理空间,因此该算是可见元素

用法：

style="width:50px;height:50px;background:#ccc;visibility:hidden">我是一个div标签
style="height:50px;background:#ccc;display:none;">div
type="hidden" name="hidden">

我是一个小小p标签

四.子元素过滤器

（注意:子元素过滤器查找的该元素是作为第几个孩子元素,返回是该元素也就是孩子）

写法	描述
$(‘li:first-child’)	查找li作为第一个孩子的元素
$(‘li:last-child’)	获取li的父元素的最后一个子元素
$(‘li:only-child’)	获取只有一个子元素的元素
$(‘li:nth-child(even/odd/index)’)	获取li是偶数/奇数/索引的子元素(索引从1开始)

用法：

    
1aaa
    
2bbb
    
3ccc
    
4ddd
    
5eee

style="height:50px;background:#ccc;">
    我是唯一的孩子

五.其他方法

方法	写法	描述
is(s/o/e/f)	$(‘span’).is(‘.red’)	判断span标签的class名是否是red
hasClass(class)	$(‘span’).eq(2).hasClass(‘.red’)	判断页面中的第二个span是否拥有class名为red
slice(start,end)	$(‘span’).slice(0,2)	选定span的索引是0和1的
end()	$(‘span’).find(‘p’).end()	返回当前元素的上一个状态(这里的上一个状态可以是当前元素的父元素,也可以是当前元素的同级元素)
contents()	$(‘span’).contents()	获取span元素下的所有节点(元素节点、文本节点、属性节点)
filter(s/o/e/f)	$(‘span’).filter(‘.red,:first-child’)	过滤器:多种选择器的组合
s（是选择器）、o（是对象）、e（是索引）、f（是函数）

用法：

id="test">
    
0-1
    
id="red">1-2
    
2-3
    
title="blue" aaa="bbb">3-4
    
4-5


    
0-1
    
1-2

六.实例

class="nav">
    
class="clsHeader">
        
品牌分类
        src="img/girl.png" alt="girl">
    
    
class="clsContent">
        

            
href="#">佳能(1234)
            
href="#">索尼(1234)
            
href="#">三星(1234)
            
href="#">苹果(1234)
            
href="#">尼康(1234)
            
href="#">富士(1234)
            
href="#">理光(1234)
            
href="#">佳能(1234)
            
href="#">索尼(1234)
            
href="#">三星(1234)
            
href="#">卡西欧(1234)
            
href="#">其他
        
    
    
class="clsbottom">
        精简显示品牌
        src="img/cat.png" alt="cat">