jQuery遍历-过滤

 我个人感觉jQuery中最大的好处就是选择Dom元素方面了。选择Dom中除了选择器、过滤,当然还有遍历了。

总结一下遍历中的过滤

目录

eq()

filter()

first()

last()

has()

is()

not()

map()

slice()


eq()

描述:减少匹配元素的集合为指定的索引的哪一个元素

索引值可以是负值,也可以是正值,

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    $(function(){
        $("p").eq(1)    //p1
        $("p").eq(-1)   //p3
    })
</script>

filter()

描述:筛选元素集合中匹配表达式,或通过传递函数测试的那些元素的集合。

参数可以是选择器、函数、元素、以及jQuery对象

<p>0</p>
<p class="box">1</p>
<p>2</p>
<p>3</p>
<script>
    $(function(){
        $("p").filter(":even");
        $("p").filter(".box");
        $("p").filter(function(){
            return $(this).html() == 3;
        })
    })
</script>

first()

描述:获取匹配元素集合中的第一个元素

不接受任何参数

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    $(function(){
        $("p").first();
    })
</script>

last()

描述:获取匹配元素集合中的最后一个元素

不接受任何参数

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    $(function(){
        $("p").last();
    })
</script>

has()

描述:筛选匹配集合元素中的有相匹配的选择器或Dom元素的后代元素

以子元素或选择器为匹配条件选择Dom元素

<ul>
    <li></li>
    <li><strong></strong></li>
    <li></li>
    <li></li>
</ul>
<script>
    $(function(){
        $("ul li").has("strong")    //选择子元素为strong元素的li元素
    })
</script>

is()

描述:判断当前匹配集合中的元素是否是一个选择器、Dom元素、或者jQuery对象

如果这些元素至少一个匹配给定的参数,那么返回true

<div>
    <p class="box"></p>
    <p></p>
</div>
<script>
    $(function(){
        $("div p").is(".box")    //true
        $("div p").is(function(){
            $(this).hasClass("box");
        })
    })
</script>

not()

描述:从匹配元素集合中移除指定的元素

<div>
    <p class="box"></p>
    <p></p>
</div>
<script>
    $(function(){
        $("div p").not(".box")
    })
</script>

map()

描述:通过一个函数匹配当前集合中的每个元素,产生一个新的jQuery对象

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div").map(function(){
            return $(this).html($(this).html + 1);
        })
    })
<script>

slice()

描述:根据指定的下标范围,过滤匹配的元素集合,并产生一个新的jQuery对象

接受两个参数:start:起始座标(从零开始)、终止座标。匹配规则包括首部但不包括尾部

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function(){
        $("div").slice(1,3);    //div1 div2
    })
</script>

主页传送门

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章