jQuery的筛选器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li name="li5">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
    // 什么是jQuery的筛选器
    // 在通过选择器,获取到标签对象的基础上,再来进行筛选,选择出符合条件的标签对象
    // 筛选器一定是在选择器的基础上使用
    // 为了链式编程方便

    // 筛选器的执行结果,也一定是一个伪数组

    // 获取ul中,所有子级li标签
    $('ul>li');

    // li标签伪数组中,第一个标签对象,也是伪数组
    console.log( $('ul>li').first() );

    // li标签伪数组中,最后一个标签对象,也是伪数组
    console.log( $('ul>li').last() );

    // li标签伪数组中,按照索引下标获取
    console.log( $('ul>li').eq(2) );

    // 当前标签的上一个兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).prev() 索引是2的第三个标签的上一个兄弟标签,也就是索引是1的第二个标签
    console.log( $('ul>li').eq(2).prev() );

    // 当前标签的下一个兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).next() 索引是2的第三个标签的下一个兄弟标签,也就是索引是3的第四个标签
    console.log( $('ul>li').eq(2).next() );


    // 当前标签之前的所有兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).prevAll() 索引是2之前的所有标签
    console.log( $('ul>li').eq(2).prevAll() );

    // 当前标签之后的所有兄弟标签
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).nextAll() 索引是2之后的所有标签
    console.log( $('ul>li').eq(2).nextAll() );

    // 当前标签的所有兄弟标签,不管前后
    // $('ul>li').eq(2) 索引是2的第三个标签
    // $('ul>li').eq(2).siblings() 除索引是2的所有兄弟标签
    console.log( $('ul>li').eq(2).siblings() );

    // 当前标签的直接父级标签
    console.log( $('ul>li').eq(2).parent() );

    // 当前标签的所有父级标签
    console.log( $('ul>li').eq(2).parents() );

    // 根据条件来查找jQuery,标签伪数组中符合的标签
    // $('ul').find(条件)
    // 在ul标签中,find定义的条件来查询
    // 在爹中,按照条件找儿子
    console.log( $('ul').find('[name="li5"]') );

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值