jQuery学习筛选

最新推荐文章于 2022-08-21 17:46:10 发布

Alex十年

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量157

点赞数

分类专栏： jQuery知识总结

jQuery知识总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

筛选和选择器都是用来找人的，且两者有相通的地方。
一、过滤

eq()   first()    last()    not()    slice()从哪里开始到哪里结束，但是区间是前闭后开

<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
<h1>00004</h1>
<h1>00005</h1>
<script>
    //选择器的写法
    //  $("h1:first").css({'color':'blue'});//00001为蓝色
    //筛选的写法
   // $('h1').first().css({'color':'blue'});
    //选择器的写法
    //  $("h1:not(:first)").css({'color':'blue'});//除了00001，其他均为蓝色
    //筛选写法,除了第三个，其余均为黄色，特别注意not里面的写法，而且注意加单引号
    $('h1').not($('h1').eq(2)).css({'color':'yellow'});
    //此时，显示为蓝色的是02，03,04，如果只写一个数，则表示从这个开始，一直到结束。
    $('h1').slice(1,4).css({'color':'blue'});
</script>
</body>

二、查找（和选择器的用法相同）

children()    find()后代查找    next()后面一个兄弟    nextall()后面所有兄弟   parent()   prev()   prevall()前面所有兄弟    siblings()前后所有兄弟，不包括自己

<body>
<div id="div1">
    <h1>cccccccc</h1>
    <h1>cccccccc</h1>
    <div id="div2">
        <h1>aaaaaaaaaa</h1>
        <h1>bbbbbbbbbbb</h1>
    </div>
</div>


<script>
    //找到div下面的所有的h1
    $('#div1').find('h1').css({'color':'red'});
</script>
</body>

三、串联

add()   andSelf()

<body>
<h1>00001</h1>
<h1>00002</h1>
<hr>
<p>00004</p>
<p>00005</p>
<script>
    //使用选择器来写
   // $('h1,p').css({'color':'red'});
    //使用串联来写
    $('h1').add('p').css({'color':'red'});
</script>
</body>

<body>
<div>
    <h1>00001</h1>
    <h1>00002</h1>
</div>
<p>ccccccccc</p>
<script>
    //通过div找到下一个人，即p标签，然后再回头带上自己addself
    $('div').next().andSelf().css({'color':'red'});
</script>
</body>

在基础选择器中没有办法使用this又不能使用+号进行连接，比如$(this > h1)这种写法是错误的，因为this是对象，不是字符串
此时需要使用筛选来实现

<body>
<div id="div1">
    <h1>cccccccc</h1>
    <h1>cccccccc</h1>
    <div id="div2">
        <h1>aaaaaaaaaa</h1>
        <h1>bbbbbbbbbbb</h1>
    </div>
</div>
<script>
    //当点击背景颜色区域时，ccccc会变成红色
    $('#div1').click(function () {
        $(this).children('h1').css({'color':'red'});
    });
</script>
</body>