jquery之筛选

1.过滤

eq(index|-index)
eq与nth-child
eq索引从0开始，若为负数，代表倒序从最后一个开始
nth-child找的也是同级的某个元素，但是索引从1开始

console.log($("ul>li").eq(1));
console.log($("ul>li").eq(-1));
console.log($("ul>li:nth-child(1)"));

first() 获取第一个元素
last()

console.log($("ul>li").first());
console.log($("ul>li").last());

hasClass(class) 返回值是布尔类型

console.log($("ul>li").hasClass("myli"));  //返回true   false

filter(expr|obj|ele|fn)
参数写名称时要加 .或者 #

console.log($("ul>li").filter(".myli"));
//相当于遍历
console.log($("ul>li").filter(function (index, html) {
     console.log(index, html);
     //console.log($(this));
     //hasClass是jquery的方法
     //ele  是jquery dom 还是js dom？   是js对象
     //如果要使用该方法   将ele  js对象转化为jquery对象   $(ele)
     if ($(html).hasClass("myli")) {
         //return $(html)
         return ".myli"    //.myli   即选择器，直接就是jquery
     }
}));

is(expr|obj|ele|fn) 返回值是布尔类型

console.log($("ul>li").is(".myli"));
console.log($("ul>li").is($(".myli")));
 $("ul>li").filter(function (index,ele) {
     console.log(index, ele);
     if($(ele).is(".myli")){
         console.log("找到了");
     }
 })
 console.log($("ul>li").is(function (index, ele) {
     console.log(index, ele);
     if ($(ele).hasClass("myli")) {
         console.log("找到了");
         return $(ele)
     }
}));

map(callback)

console.log($("ul>li").map(function (index, ele) {
     console.log(index, ele);
     //return $(ele).html();
     return ele;               //ele是一个是一个js对象，map映射后变为一个jquery对象
}).get());                     //返回的是一个jquery 对象,加get()后变为dom对象（即数组）

 //下面两者等效    get(）返回的是js对象    不同于eq()它返回的是jquery对象
console.log($("ul>li")[0]);
console.log($("ul>li").get(0));

has(expr|ele) 存在父子关系，找子代的某个元素

 //has()   父子关系中，保留父元素
 console.log($("ul").has(".myli"));

not(expr|ele|fn)

//not    除去指定元素后所保留的
console.log($("ul>li").not(".myli"));
console.log($("ul>li").not($(".myli")));
console.log($("ul>li").not(function (index, ele) {
     console.log(index, ele);
     if ($(ele).is(".myli")) {
         return ele;  //除去myli的其他li
     }
 }));

slice(start,[end])
参数start end

console.log($("ul>li").slice(1, 3));
console.log($("ul>li").filter(".myli"));//选出含有myli的那个
console.log($("ul>li").filter(function (index, ele) {
	console.log(index, ele);
	if ($(ele).hasClass("myli")) {
    return $(ele);
	//return ele;
	//return "myli";
	//return ".myli";
}
}));

2.查找

children([expr]) 存在父子关系 直接子元素（不跨辈）

console.log($(".menu").children());  //相当于ul>li
console.log($(".menu>li"));
console.log($(".menu li"));
console.log($(".menu").children(".li3"));

find(e|o|e) expr jquery对象 ele 存在父子关系

console.log($(".menu").find(".li3"));
console.log($(".menu").find(".myli"));
console.log($(".menu").find($(".li3")));
console.log($(".menu").find($(".li3").get(0)));

next([expr]) 当前元素的下一个（紧挨着的那个同级元素）

console.log($(".menu").find(".li3").next());
console.log($(".menu").find(".li3").next(".lichild"));

nextAll([expr]) 当前元素的后面所有同级元素

console.log($(".menu").find(".li3").nextAll());
console.log($(".menu").find(".li3").nextAll(".lichild"));

offsetParent() 获取最近一级含有position的父级元素

console.log($(".li3").offsetParent());

parent([expr]) 只找父元素
parents 找所有祖先元素（包括body html等祖先元素）

console.log($(".myli").parent());
console.log($(".myli").parents());
console.log($(".myli").parents(".menu"));

prev([expr])
prevAll([expr])
prev prevAll与next nextAll相对

console.log($(".li3").prev());
console.log($(".li3").prevAll());
console.log($(".li3").prevAll("p"));

siblings([expr]) 所有兄弟元素（同级元素）

console.log($(".li3").siblings());
console.log($(".li3").siblings("p"));

3.串联

add(e|e|h|o[,c])1.9*
addBack()1.9+
contents()
end()

console.log($("p").add($("span")));
contents  获取当前元素的所有子节点 （包括回车）
console.log($(".myp").contents());
//end   回到上一次破坏性修改
console.log($("ul").find("li").slice(0, 2).end());

来源：CSDN

作者：柚子～

链接：https://blog.csdn.net/weixin_45454695/article/details/104363721