筛选
//过滤
//eq(index|-index)
first() //过滤出第一个元素
//last()
//hasClass(class)
//filter(expr|obj|ele|fn)
//is(expr|obj|ele|fn)
//map(callback)
//has(expr|ele)
//not(expr|ele|fn)
//slice(start,[end])
//主要用于找子元素
//$(“ul>li”);
// console.log($("ul>li").eq(0));
// console.log($("ul>li").eq(-1));
// console.log($("ul>li:first"));
// console.log($("ul>li").first());
// console.log($("ul>li").last());
// console.log($("ul>li").hasClass("ctn"));
// console.log($("ul>li").filter(".ctn"));
eq根据索引来获取,当里面参数为-1时表示从后往前第一个
//first() 获取第一个子元素
last 获取最后一个子元素
hasClass 是根据元素的类名称来进行过滤的 ;
用来判断某个元素是否具有class名称 true/false
console.log($("ul>li").eq(2).hasClass("box"));
判断第二个元素是否有class类"box"
console.log($("ul>li").filter(".box"));
//filter 过滤 没有过滤的条件 selector
$("ul>li").filter(function (index,ele){
console.log(index,ele);
if($(ele).is("#li3"))
{
console.log("找到");
}
});
is() expr|obj|ele|fn 判断当前元素是什么
is 的返回值是 true/false,存在为true 反之false
console.log($("ul>li").is($(".box")));
is 的返回值是 true/false,存在为true 反之false
var newdom=$("ul>li").map(function (index,ele){
console.log(index, ele);
return $(ele).html();
});
map 将数组映射为一个新的集合,也可以把 map映射当元素的遍历来使用
map映射两种使用 ,1,将一个集合映射为一个新的集合 2.map可以作为遍历来使用
console.log($("ul>li")[0]);
console.log($("ul>li").get(0));
get() 获取当前索引的对象 返回值是js对象, 不同于eq(index) 返回的是jquery对象
console.log($("ul>li").has(".child"));
has() 过滤元素 把当前需要的过滤出来 不需要的去除 参数:可以是选择器 dom
参数写成 .box 匹配不到元素(直接找的是匹配元素的同级)
参数写成 .box 过滤的元素必须是匹配的元素子内容,指 的是子父关系 保留的是父
console.log($("ul>li").not(".box"));
console.log($("ul>li").not($(".box")));
not 方法 除过他其他都有
console.log($("ul>li").slice(0, 2));
slice 参数是start end 类似数据的slice 截断
查找、
//查找
//children([expr])
//closest(e|o|e)1.7*
//find(e|o|e) expr jquery对象 ele
//next([expr])
//nextAll([expr])
//nextUntil([e|e][,f]) 类似nextAll 方法
//offsetParent()
//parent([expr])
//parents([expr])
//parentsUntil([e|e][,f])
//prev([expr])
//prevAll([expr])
//prevUntil([e|e][,f]) //
//siblings([expr])
类似原生js里面的dom子父节点操作
console.log($(".menu").children(".box"));//$("ul>li");
console.log($(".menu>li")); 和这个一样
children 获取子元素的 获取所有的子集元素(直接子集),可以作为选择器
//console.log($(".menu").find(".box")); //expr
//console.log($(".menu").find($(".box"))); //jquery对象
//console.log($(".menu").find($(".box").get(0))); //ele
find用来查找
console.log($(".menu").find(".box").next());
console.log($(".menu").find(".box").nextAll());
next 获取当前匹配元素的下一个 nextAll 获取当前匹配元素之后的所有元素
/console.log($(".childmenu").offsetParent());
offsetParent() 获取父元素,该方法返回的父元素是定位的
console.log($(".childmenu").parent());
console.log($(".childmenu").parents(".menu"));
parent 获取直接父元素,可以进行过滤
/console.log($(".box").prev());
prev获取当前匹配元素之前的元素,同级元素前一个
console.log($(".box").prevAll("p"));
prevAll获取当前匹配元素之前的元素,同级元素前面所有的
console.log($(".box").siblings());
console.log($(".box").siblings("p"));
siblings 同胞兄弟元素,不带参数 指获取所有的同胞兄弟,用来过滤元素使用。
串联
//串联
//add(e|e|h|o[,c])1.9*
//addBack()1.9+
//contents()
//end()
console.log($("ul>li").add($("p")));
console.log($("ul>li").add("p"));
console.log($("ul>li").add(".p1"));
add() 给jquery对象添加新的对象
console.log($("ul").contents());
contents 获取当前元素的所有节点 包含文本 childrenNodes
console.log($("ul").find(".box"));
console.log($("ul").end());
end 方法是回到上一次破坏性修改 上一次修改jquery对象