06-jQuery过滤选择器-基本&可见过滤

jQeury过滤选择器-基本&可见过滤

作者：曾庆林

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。

过滤选择器分类：

• 基本过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 属性过滤选择器
• 子元素过滤选择器
• 表单对象属性过滤选择器

基本过滤选择器

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的 , …
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的div元素

内容过滤选择器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has(p)”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

可见性过滤选择器

选择器	描述	返回值	示例
:hidden	选择所有不可见元素	集合元素	$(“:hidden”)选择所有不可见元素，包括：, 和 等，如果只选择元素，则可以使用 $(“input:hidden”)
:visible	选择所有可见元素	集合元素	$(“div:visible”)选取所有可见的div元素

案例-tab切换 可见过滤

思路

单击第几个，显示第几个，以前显示的隐藏  

html结构

            

                
li1
                
li2
                
li3
            
            
内容1
            
内容2
            
内容3

css 部分

* {
    margin: 0;
        padding: 0;
}
            
body {
    padding: 50px;
}

ul {
    list-style: none;
}

.tabs .tab-title {
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaa;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    margin-right: 15px;
    position: relative;
    z-index: 10;
}

.tabs .active{border-bottom-color:#fff; color: #F80;}
.tabs .tab-content {
    clear: both;
    border: 1px solid #aaa;
    padding: 25px;
    width: 450px;
    height: 300px;
    display: none;
    position: relative;
    top: -1px;
    z-index: 0;
}
#tab2 .tab-content{width: 800px;}

js写法

//[1] 单击第几个，显示第几个，以前显示的隐藏
$(function(){
    $(".tab-title").click(function(){
        //以前显示的现在隐藏
        $(".tab-content:visible").hide();
        // 求出是第几个
        var num=$(".tab-title").index($(this));
        $(".tab-content:eq("+num+")").show();
        //之前有.active li 去掉active
        //当前li 添加actvie
        $(".active").removeClass("active");
        $(this).addClass("active");
    
    })
})

完整的示例

    
        
        
        
    

    
        

            

                
li1
                
li2
                
li3
            
            
内容1
            
内容2
            
内容3