JQuery 过滤器


过滤器(Filter)一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。

子元素过滤器

与 子过滤器(Child Selector) 区分下。

:nth-child(index) – 选取每个父元素下的 第 index 个子元素(index从1开始)

$("div.one :nth-child(2)") – 选取每个 class 为 one 的 div 元素下的第2个子元素

:nth-child(even) – 选取每个父元素下的 偶数元素

:nth-child(odd) – 选取每个父元素下的 奇数元素

:nth-child(equation) – 选取每个父元素下的 符合表达式的元素

nth-child(3n) / nth-child(3n + 1) – 选取每个父元素下的索引值是 3 的倍数的元素 / 选取每个父元素下的索引值是 3n + 1 的元素

:first-child – 选取每个父元素的第一个子元素

$("div.one :first-child") – 选取每个 class 为 one 的 div 元素下的第1个子元素

:last-child – 选取每个父元素的最后一个子元素

$("div :last-child") – 选取每个 div 元素下的最后1个子元素

:only-child – 如果某个元素是它父元素中唯一的子元素,那么将被匹配

$("div :only-child") – 如果 div 元素下仅仅只有一个子元素,那么选中这个子元素

基本过滤器

:first – 选取第一个元素

$(“div:first”) – 选取第一个 div 元素

:last – 选取最后一个元素

$(“div:last”) – 选取最后一个 div 元素

:not(selector) – 去除所有与给定选择器匹配的元素

$(“div:not(#one)”) – 去掉 div 元素中的 id 为 one 的元素

:even – 选取索引时为偶数的所有元素,索引从0开始

$(“div:even”) – 选取索引 div 时为偶数的元素

:odd – 选取索引时为奇数的所有元素,索引从0开始

$(“div:odd”) – 选取索引 div 时为奇数的元素

:eq(index) – 选取索引等于 index 的元素,索引从0开始

$(“div:eq(7)”) – 在 div 中选取索引等于 7 的元素

:gt(index) – 选取索引大于 index 的元素,索引从0开始

$(“div:gt(3)”) – 在 div 中选取索引大于 3 的元素

:lt(index) – 选取索引小于 index 的元素,索引从0开始

$(“div:lt(5)”) – 在 div 中选取索引小于 5 的元素

:header – 选取所有的标题元素,如:h1/h2 等

$(“:header”) – 选取所有的标题元素

:animated – 选取当前正在执行动画的所有元素

$(“:animated”) – 选取当前正在执行动画的所有元素

内容过滤器

:contains(text) – 选取含有文本内容为 text 的元素

$(“div:contains(‘jquery’)”) – 在 div 中选取含有文本内容为 jquery 的元素

:empty – 选取不包含子元素或文本的空元素

$(“div:empty”) – 在 div 中选取不包含子元素或文本的空元素

:has(selector) – 选取含有选择器所匹配的元素的元素

$(“div:has(.one)”) – 在 div 中选取 class 为 one 的元素

:parent – 选取含有子元素或文本的元素

$(“div:parent”) – 在 div 中选取含有子元素或文本的元素

可见性过滤器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

  • hidden 包含样式属性
  • display 为 none 的元素
  • 文本隐藏域 (<input type=“hidden”>)
  • visible:hidden 之类的元素

:hidden – 选取所有不可见的元素
$(“div:hidden”) – 在 div 中选取所有不可见的元素
:visible – 选取所有可见的元素
$(“div:visible”) – 在 div 中选取所有可见的元素

属性过滤器

点我查看

举个“栗子”

子元素选择器例子

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

子元素过滤器例子

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>子元素过滤选择器</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //选取每个class为one的div元素下的第2个子元素
                $("#btn1").click(function(){
                    /**选取子元素, 需要在选择器前添加一个空格. */
                    $("div.one :nth-child(2)").css("background", "#ffbbaa");
                });
                //选取每个class为one的div父元素下的第一个子元素
                $("#btn2").click(function(){
                    $("div.one :first-child").css("background", "#ffbbaa");
                });
                //选取每个class为one的div父元素下的最后一个子元素
                $("#btn3").click(function(){
                    $("div.one :last-child").css("background", "#ffbbaa");
                });
                //如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
                $("#btn4").click(function(){
                    $("div.one :only-child").css("background", "#ffbbaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
        <br/>
        <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
        <br/>
        <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
        <br/>
        <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>
        <br /><br />
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

基本过滤器例子

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>基本过滤选择器</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
                anmateIt();
                $("#btn1").click(function(){
                    $("div:first").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    $("div:last").css("background", "#ffbbaa");
                });
                $("#btn3").click(function(){
                    $("div:not(.one)").css("background", "#ffbbaa");
                });
                $("#btn4").click(function(){
                    $("div:even").css("background", "#ffbbaa");
                });
                $("#btn5").click(function(){
                    $("div:odd").css("background", "#ffbbaa");
                });
                $("#btn6").click(function(){
                    $("div:gt(3)").css("background", "#ffbbaa");
                });
                $("#btn7").click(function(){
                    $("div:eq(3)").css("background", "#ffbbaa");
                });
                $("#btn8").click(function(){
                    $("div:lt(3)").css("background", "#ffbbaa");
                });
                $("#btn9").click(function(){
                    $(":header").css("background", "#ffbbaa");
                });
                $("#btn10").click(function(){
                    $(":animated").css("background", "#ffbbaa");
                });
                $("#btn11").click(function(){
                    $("#two").nextAll("span:first").css("background", "#ffbbaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选择第一个 div 元素" id="btn1" />
        <input type="button" value="选择最后一个 div 元素" id="btn2" />
        <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
        <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
        <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
        <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
        <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
        <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
        <input type="button" value="选择所有的标题元素" id="btn9" />
        <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
        <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />
        <h3>基本过滤选择器.</h3>
        <br /><br />
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素 111^^</span>
        <span id="span">^^span元素 222^^</span>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

内容过滤器

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //选择 含有文本 'di' 的 div 元素
                $("#btn1").click(function(){
                    $("div:contains('di')").css("background", "#ffbbaa");
                });
                //选择不包含子元素(或者文本元素) 的 div 空元素
                $("#btn2").click(function(){
                    $("div:empty").css("background", "#ffbbaa");
                });
                //选择含有 class 为 mini 元素的 div 元素
                $("#btn3").click(function(){
                    $("div:has(.mini)").css("background", "#ffbbaa");
                });
                //选择含有子元素(或者文本元素)的div元素
                $("#btn4").click(function(){
                    $("div:parent").css("background", "#ffbbaa");
                    //$("div:not(:empty)").css("background", "#ffbbaa");两种写法都可以
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
        <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
        <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
        <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
        <br /><br />
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

可见性过滤器

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>可见性过滤选择器</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("div:visible").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    //alert($("div:hidden").length);
                    //show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位
                    //jQuery 的很多方法支持方法的连缀,
                    //即一个方法的返回值调用该方法的 jQuery 对象: 可以继续调用该对象的其他方法.
                    $("div:hidden").show(2000).css("background", "#ffbbaa");
                });
                $("#btn3").click(function(){
                    //val() 方法可以返回某一个表单元素的 value 属性值.
                    //alert($("input:hidden").val());两种方法都可
                    alert($("input:hidden").attr("value"));
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="选取所有可见的  div 元素" id="btn1">
        <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
        <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
        <br /><br />
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div
            <input type="hidden" value="input的value值" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

<< JQuery 层级选择器、子选择器 JQuery 表单选择器 >>


没有账号? 忘记密码?

社交账号快速登录