jQuery-筛选

过滤

eq()

	获取子元素里面的其中某一个   根据索引来获取
    $("ul>li").eq(0));
    $("ul>li:first");
    $("ul>li:nth-child(1)");
    eq()  参数   index -index   -index  -1开始的
    $("ul>li").eq(-1)

first()

    获取第一个子元素
    console.log($("ul>li").first());

last

	获取最后一个子元素
    console.log($("ul>li").last());

hasClass

   	根据元素的类名称来进行过滤的   参数是class名称
    用来判断某个元素是否具有class名称   true/false
    console.log($("ul>li").eq(2).hasClass("box"));

filter

	过滤   没有过滤的条件   selector
    console.log($("ul>li").filter(".box"));
    filter   fn函数
    var dom=$("ul>li").filter(function (index,ele){
       console.log(index, ele);
       console.log("当前元素");
       找出具有box类的dom
       转化为jquery对象  $(ele)
       if($(ele).hasClass("box"))
       {
           console.log("找到了");
           return ".box";
           return $(ele);
       }
    });
    console.log(dom);

is()

	expr|obj|ele|fn   判断当前元素是什么
    is  返回值   true/false
    $("ul>li").filter(function (index,ele){
         console.log(index,ele);
       if($(ele).is("#li3"))
       {
           console.log("找到了");
       }
    });
    
	console.log($("ul>li").is($(".box")));

    fn 回调函数
    var ishas=$("ul>li").is(function (index,ele){
       console.log(index, ele);
       if($(ele).hasClass("box"))
       {
           console.log("找到了");
           return $(ele);
       }
    });
    console.log(ishas);

map

	将数组映射为一个新的集合
    jquery  对象集合
    console.log($("ul>li"));
    也可以把 map映射当元素的遍历来使用
    var newdom=$("ul>li").map(function (index,ele){
       console.log(index, ele);
       return $(ele).html();
    });
    console.log(newdom.get());//映射完成之后  转化为array
    console.log($("ul>li"));
    console.log($("ul>li").map(function (index,ele){
     return ele;
    }).get());
    get()  获取当前索引的对象  返回值是js对象
    console.log($("ul>li")[0]);
    console.log($("ul>li").get(0));
    get(index)  js对象  不同于eq(index)  返回的是jquery对象
    map映射两种使用 1，将一个集合映射为一个新的集合   2.map可以作为遍历来使用

has()

	过滤元素  把当前需要的过滤出来  不需要的去除   参数：可以是选择器   dom
    参数写成  .box  匹配不到元素(直接找的是匹配元素的同级)
    参数写成  .box  过滤的元素必须是匹配的元素子内容
    指 的是子父关系 保留的是父
    console.log($("ul>li").has(".child"));

not 方法 除过

    console.log($("ul>li").not(".box"));
    console.log($("ul>li").not($(".box")));
    fn回调函数
    console.log($("ul>li").not(function (index, ele) {
       console.log(index, ele);
       if ($(ele).is(".box")) {
           return ele;
       }
    }));

slice

    参数是start  end  类似数据的slice  截断
    console.log($("ul>li").slice(0, 2));
    console.log($("ul>li").filter(".box"));
    console.log($("ul>li").filter(function (index, ele) {
       if ($(ele).hasClass("box")) {
           //return $(ele);
           //return ele;
           //return "box";
           return ".box";
       }
       //return ".box";
    }));

查找

children

	获取子元素的  获取所有的子集元素(直接子集)
    children  参数expr  选择器   可以作为简单过滤
    console.log($(".menu").children(".box"));//$("ul>li");
    console.log($(".menu>li"));
    console.log($(".menu li"));

find

	查找
    console.log($("ul.menu>li"));
    console.log($("ul.menu li"));
    console.log($(".menu").find(".box"));
    console.log($(".menu").find($(".box")));
    console.log($(".menu").find($(".box").get(0)))；

next

	获取当前匹配元素的下一个   nextAll 获取当前匹配元素之后的所有元素
    console.log($(".menu").find(".box").next());
    next  nextoAll  方法的参数   expr  表达式
    console.log($(".menu").find(".box").next(".fli"));


    console.log($(".menu").find(".box").nextAll());
    next  nextoAll  方法的参数   expr  表达式
    console.log($(".menu").find(".box").nextAll(".fli"));

父级元素获取

    offsetParent()  该方法返回的父元素是定位的
    找到第一个被定位的父节点
    console.log($(".childmenu").offsetParent());

parent

    获取直接父元素   parents
    console.log($(".childmenu").parent());
    下面这个 expr  表达式  可以进行过滤
    console.log($(".childmenu").parents(".menu"));

prev([expr]) 之前的一个
prevAll([expr]) 之前的所有
prevUntil([e|e][,f])

    console.log($(".box").prev()); 同级元素前一个
    prevAll  同样可以使用参数进行过滤
    console.log($(".box").prevAll("p"));

siblings 同胞兄弟元素

    console.log($(".box").siblings());不带参数  指获取所有的同胞兄弟
    参数expr  表达式
    用来过滤元素使用
    console.log($(".box").siblings("p"));
    console.log($(".box").siblings(".fli"));
    console.log($(".box").siblings("#li2"));
    console.log($(".box").siblings(".menu>li:nth-of-type(1)")); 

串联

add()

	给jquery对象添加新的对象
    console.log($("ul>li"));
    console.log($("ul>li").add($("p")));
    console.log($("ul>li").add("p"));
    console.log($("ul>li").add(".p1"));
	console.log($("ul>li").eq(1).nextAll().addBack());

contents

	获取当前元素的所有节点  包含文本   childrenNodes
    console.log($("ul").contents());

end

	方法是回到上一次破坏性修改   上一次修改jquery对象
    console.log($("ul").find(".box"));
    console.log($("ul").find(".box").end());
    console.log($("ul").children(".box").end());
    console.log($("ul").find("li").slice(0, 3).end());