jquery常用筛选方法

Posted 2021-03-09

1、jquery过滤方法
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>第一个</li>
    <li>第二个</li>
    <li class="box" id="li3"><span class="child">第三个</span></li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

eq() 获取子元素里面的其中某一个，根据索引来获取。 -index -1开始的

console.log($("ul>li:first"));
    console.log($("ul>li:eq(0)"));
    console.log($("ul>li:nth-child(1)"));
    console.log($("ul>li").eq(0));//上面四个等价均是第一个li
    console.log($("ul>li").eq(-1));
    console.log($("ul>li:last"));

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

console.log($("ul>li").filter(".box"));
console.log($("ul>li").filter($(".box")));

is() expr|obj|ele|fn 判断当前元素是什么 返回值 true/false

console.log($("ul>li").is(".box"));
console.log($("ul>li").is($(".box")));

map映射两种使用
第一种将一个集合映射为一个新的集合 带返回值
第二种 不写返回值 map可以作为遍历来使用
必须有回调函数 参数为index，ele
jquery 对象集合转为数组 需要get()
get(index) js对象 不同于eq(index) 返回的是jquery对象

console.log($("ul>li")[0]);
console.log($("ul>li").get(0));

has（）过滤元素 把当前需要的过滤出来 不需要的去除 参数可以是selecto dom
参数写成.box都匹配不到元素（直接找的匹配元素的同级）
参数写成.box 过滤的元素必须是匹配的元素子内容
console.log($("ul>li").has(".child"));
not（） 除过 回调函数参数index ele
console.log($("ul>li").not(".box"));
console.log($("ul>li").not($(".box")));
slice（）参数是start end 类似数据的slice 截断 取小不取大
console.log($("ul>li").slice(0, 2));
2、查找
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])

children 获取子元素的 获取所有的子集元素(直接子集)
children 参数expr 选择器 可以作为简单过滤

find 查找 参数可以是expr jquery对象 ele
next 获取当前匹配元素的下一个 nextAll 获取当前匹配元素之后的所有元素
next nextoAll 方法的参数 expr 表达式
prev prevAll 同上
offsetParent() 该方法返回的父元素是定位的 在父亲元素中找最近的定位父元素
parent 获取直接父元素 parents所有父亲
siblings 同胞兄弟元素 不带参数 指获取所有的同胞兄弟 参数expr 表达式 用来过滤元素使用

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

<ul>
    <li>1</li>
    <li>2</li>
    <li class="box">3</li>
    <li>4</li>
</ul>
<p class="p1">ppp</p>
<p>p2222</p>

add() 给jquery对象添加新的对象

console.log($("ul>li").add($("p")));
console.log($("ul>li").add("p"));
console.log($("ul>li").add(".p1"));

addBack()
console.log($("ul>li").eq(1).nextAll().addBack());//元素234
contents 获取当前元素的所有节点 包含文本 childrenNodes
end 方法是回到上一次破坏性修改 上一次修改jquery对象