jQuery 筛选（过滤、查找、串联）——0715

一、过滤

    //获取第n个元素  参数为正数，从前往后找；参数为负数，从后往前找
    console.log($("ul>li").eq(0));   //从0算起
    console.log($("ul>li").eq(-1));  //从-1算起
    console.log($("ul>li").first());
    console.log($("ul>li").last());
    
    //根据类名称过滤,返回true false
    console.log($("ul>li").hasClass("li4"));
    console.log($("ul>li").is(".li4"));
    //参数写成函数的形式
    console.log($("ul>li").is(function (index) {
        if ($(this).hasClass("li4")) {
            return true;
        }
    }));
    //结合each() 遍历来使用
    $("ul>li").each(function(index){
        if($(this).hasClass("li4")){
            console.log(this);    //输出dom元素
        }
    });

    //根据类名称过滤 返回一个dom对象的集合
    console.log($("ul>li").filter(".li4"));  //参数为类名称
    console.log($("ul>li").filter($(".li4")));   //参数为jQuery对象
    //参数写成函数
    console.log($("ul>li").filter(function (index) {
        if ($(this).is(".li4")) {
            return $(this);
        }
    }));
    
    //map  将一组元素转换成其他数组  类似于数组的映射
    console.log($("ul>li").map(function (index, obj) {
        console.log(obj);   //obj是原生的js对象
        return $(obj).text();
    }));
    
    //保留包含特定后代的元素
    console.log($("ul>li").has(".sp"));
    
    //除过与指定表达式匹配的元素
    console.log($("ul>li").not(".li4"));
    console.log($("ul>li").not($("ul>li").has(".sp")));
    console.log($("ul>li").not(function (index, obj) {
        if ($(obj).is(".li4")) {
            return obj;
        }
    }));
    
    //选取一个匹配的子集 参数是索引
    console.log($("ul>li").slice(0, 2));

二、查找

    //children() 不带参，获取元素的所有子集
    console.log($("ul>li").children());
    console.log($("ul>li").children(".sps"));
    
    //直接父级
    console.log($("li:first").parent());
    
    //所有父级元素
    console.log($("li:first").parents());
    console.log($("li:first").parents("body"));
    
    //与指定表达式匹配的后代元素
    console.log($("ul").find(".li4"));

    //接下来的一个
    console.log($(".li4").next());
    console.log($(".li4").nextAll());
    //上一个
    console.log($(".li4").prev());
    console.log($(".li4").prevAll());

    console.log($("ul>li:nth-child(3)").nextUntil(".li4", "p"));  //从第三个li开始寻找P标签  直到li4出现
    //如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中.相当于nextAll()
    console.log($("ul>li:nth-child(3)").nextUntil());
    console.log($("ul>li:nth-child(3)").nextAll());

    //返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
    console.log($(".li4").offsetParent());
    
    //筛选同胞兄弟元素
    console.log($(".li4").siblings());
    //可以带参数
    console.log($(".li4").siblings(".li6"));

三、串联

    //用于连接分别与两个表达式匹配的元素结果集
    console.log($(".li6").add(".li3"));
    console.log($(".li6").add("<span>aaaa</span>"));
    
    //用于连接分别与两个表达式匹配的元素结果集(不带参数，相当于nextAll匹配的集合中包含了当前元素)
    console.log($(".li6").nextAll().addBack());
    
    //找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
    //不带参数，匹配所有子节点
    console.log($(".li6").contents(".sp1"));
    
    //回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
    console.log($(".li6").find(".sp1").end());   //匹配到的是li6

使用end() 方法时注意：
如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数–‘add’, ‘andSelf’, ‘children’, ‘filter’, ‘find’, ‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’, ‘parents’, ‘prev’, ‘prevAll’, ‘siblings’ and ‘slice’–再加上 Manipulation 中的 ‘clone’。