jQuery的过滤与查找

作者: 孙子衡 | 来源:发表于2018-09-18 19:28 被阅读0次

jQuery的过滤与查找
【小结】jQuery查找与过滤相关方法
Jquery获取上级、同级、下级元素
四、jQuery选择器之查找与过滤
jQuery学习总结之DOM操作篇
ajax
jQuery相关复习
jQuser有选择器
jQuery 基础
jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤操作</title>
    <style>
        .my-list{
            width: 600px;
            list-style: none;
        }
        .my-list li{
            margin-bottom: 10px;
            padding: 20px;
            border: 20px dashed orange;
        }
    </style>
</head>
<body>

<h1>jQuery</h1>
<hr>

<ul class="my-list">
    <li>张奶奶</li>
    <li>李奶奶</li>
    <li class="item">刘奶奶</li>
    <li>马奶奶 <span class="item">item span</span></li>
    <li>牛奶奶</li>
</ul>

<script src="jquery-3.3.1.js"></script>

<script>
    $(document).ready(function () {

        $('.my-list li').first().css('color','yellow');
        $('.my-list li').last().css('color','red');
        $('.my-list li').eq(1).css('color','blue');
        $('.my-list li').not('.item').css('border','3px solid red');
         // filter()  选中这个元素
        $('.my-list li').filter('.item').css('color','green');

        // 从2截取 一直到最后
        $('.my-list li').slice(2).css('color','purple');
        // 截取1和3 内的 不包括1 和 3
        $('.my-list li').slice(1,3).css('color','purple');

        //has 子元素有item的 li  才符合条件
        $('.my-list li').has('.item').css("border", "5px solid purple");
    })


  // 包含有子元素的div的li
   // $('li').has('div').css('color','red');
    // 符合条件的才行 e而且 filter必须作用在li上
   // $('li').filter('.dd').css('color','red');
    //filter()方法与has()方法中的参数，都是过滤条件。不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。
    $('li').find('span').css('color','red');

    //find（）：在当前选中元素的上下文中寻找符合条件的后代，返回的是子元素

</script>
</body>
</html>