jQuery基础过滤

当我们需要快速选择所需要的元素的时候，那么就应该用选择器和过滤来选择了，本篇文章总结一下基础过滤

目录

:animated Selector

:eq(index) Selector

:even Selector

:odd Selector

:first Selector

:last Selector

:focus Selector

:header Selector

:gt(index) Selector

:lt(index) Seletor

:not() Selector

---

:animated Selector

描述：选择所有正在执行动画的元素

语法：$(":animated")或者jQuery(":animated")

<div class="move"></div>
<button id="btn">run</button>
<script>
    $(function(){
        var animate = function(){
             $(".move").slideToggle(1000,animate);    //让这个div不停的运动
        }
        $("#btn").click(function(){
            console.log($(":animated"))    //div
        })
    })
    
</script>

:eq(index) Selector

描述：在匹配的集合中选择索引值为index的元素

语法：（1）$("选择器:eq(index)"):index，要匹配元素的索引值（从0开始计数）

           （2）$("选择器:eq(-index)"):index，要匹配元素的索引值（从最后一行还是计数）

<div>
    <div></div>
    <div class="box"></div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("div div:eq(0)")    //div
        $("div div:eq(-1)") //div.box
    })
</script>

:even Selector

描述：选择集合中索引值为偶数的元素，从0开始计数，

语法：$("选择器:even")或者jQuery("选择器:even")

注意：这里是索引是从0开始的所以选择的元素是第一个，第三个，第五个

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div:even")// div0  div2
    })
</script>

:odd Selector

描述：选择集合中索引值为奇数的元素，从0开始计数。

语法：$("选择器:odd")或者jQuery("选择器:odd")

注意：和上面的even相同，索引值是从0开始的，选择的元素为第二个，第四个，第六个

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div:odd")    //div1 div3
    })
</script>

:first Selector

描述：选择匹配集合中的第一个元素

语法：$("选择器:first")或者jQuery("选择器:first")

<div>0</div>
<div>1</div>
<script>
    $(function(){
        $("div:first")    //div0
    })
</script>

:last Selector

描述：选择匹配集合中最后一个元素

语法：$("选择器:last")或者jQuery("选择器:last")

<div>0</div>
<div>1</div>
<script>
    $(function(){
        $("div:last")    //div1
    })
</script>

:focus Selector

描述：选择当前获取焦点的元素

语法：$("选择器:focus")或者jQuery("选择器:focus")

<input type="text"/>
<script>
    $(function(){
        $("input").click(function(){
            $(":focus")    //input
        })
    })
</script>

:header Selector

描述：选择所有标签元素  像h1,h2,h3....

语法：$("选择器:header")或者jQuery("选择器:header")

<div class="box">
    <h1></h1>
</div>
<script>
    $(function(){
        $(".box *:header") //h1
    })
</script>

:gt(index) Selector

描述：选择给定集合中所有大于（没有等于）给定index的元素

语法：$("选择器:gt(index)")、$("选择器:gt(-index)")

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div:gt(2)")        //div3
    })
</script>

:lt(index) Seletor

描述：选择给定集合中所有索引值小于（没有等于）给定index的元素

语法：$("选择器:lt(index)")、$("选择器:lt(index)")

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div:lt(2)")    //div0 div1
    })
</script>

:not() Selector

描述：选择所有元素除去不匹配给定选择器的元素

语法：$("选择器:not(selector)")或者jQuery("选择器:not(selector)")

<div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("div *:not(p)")    //span
    })
</script>

主页传送门