jQuery基本筛选选择器（一）

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_33811539

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量81

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/bob1900/blog/731599

版权

2019独角兽企业重金招聘Python工程师标准>>>

代码一

<h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>

###1、:first，筛选第一个元素 $(".div:first")选择了代码一中

<div class="div">
       <p>div:first</p>
       <p>:even</p>
</div>

2、:last，筛选最后一个元素

$(".div:last")选择了代码一中

        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>

3、:even，筛选索引值为偶数的元素，索引从0开始计数

$(".div:even")选择了代码一中

        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>

        <div class="div">
            <p>:even</p>
        </div>

        <div class="div">
            <p>:even</p>
        </div>

即在class属性为“div”的元素中，索引为0/2/4，实际位置是1/3/5的元素

4、:odd，筛选索引值为奇数的元素，索引从0开始计数

$(".div:odd")选择了代码一中

        <div class="div">
            <p>:odd</p>
        </div>
       
        <div class="div">
            <p>:odd</p>
        </div>
        
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>

即在class属性为“div”的元素中，索引为1/3/5，实际位置是2/4/6的元素

代码二

    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(2)</p>
        </div>
        <div class="aaron">
            <p>:lt(2)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>

5、:eq(index)，在给定的集合中选择索引值为index的元素

$(".aaron:eq(2)")选择了代码二中的

        <div class="aaron">
            <p>:eq(2)</p>
        </div>

###6、:gt(index)，在给定的集合中选择索引值大于index的元素 $(".aaron:gt(3)")选择了代码二中的

        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>

###7、:lt(index)，在给定的集合中选择索引值小于index的元素 $(".aaron:lt(2)")选择了代码二中的

        <div class="aaron">
            <p>:lt(2)</p>
        </div>
        <div class="aaron">
            <p>:lt(2)</p>
        </div>

转载于:https://my.oschina.net/bob1900/blog/731599