WEB基础之：jQuery 筛选方法

最新推荐文章于 2022-04-21 11:15:42 发布

f_carey

最新推荐文章于 2022-04-21 11:15:42 发布

阅读量271

点赞数

分类专栏： WEB 文章标签： jquery

本文链接：https://blog.csdn.net/f_carey/article/details/114165206

版权

WEB 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

本文详细介绍了jQuery中的筛选和查找方法，包括过滤选择器如:first, :last, :not, :has等，以及查找操作如.prev, .next, .parents, .children等。这些方法帮助开发者更高效地定位和操作DOM元素。" 137246332,7835633,数据准备：形态、遥感与影响因素解析,"['人工智能', '计算机视觉', '数据科学', '遥感技术', '环境监测']

摘要由CSDN通过智能技术生成

jQuery 筛选方法

示例

<body>
    <ul>
        <li class="c1">list item 1</li>
        <li class="c2" id="i1">list item 2</li>
        <li class="c1 c2" id="i2">list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
        <li>
            <ol>
                <li>list item 6</li>
                <li class="c3" id="i3">list item 7</li>
                <li>list item 8</li>
            </ol>
        </li>
    </ul>
    <script src="jquery-3.5.1.js"></script>
</body>

1. 过滤

eq(index|-index): 获取当前链式操作中第N个jQuery索引对象，0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。
```
$('li').eq(3);
$('li').eq(-1);
```
first(): 获取第一个元素
```
$('li').first();
```
last(): 获取最后个元素
```
$('li').last();
```
not(expr|ele|fn): 从匹配元素的集合中删除与指定表达式匹配的元素
```
$('li').not($('li').first());
```
has(expr|ele): 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。
```
$('ul').has('li');
```
hasClass(class): 检查当前的元素是否含有某个特定的类，如果有，则返回true。
```
$('li').hasClass('c1');
```

filter(expr|obj|ele|fn): 筛选出与指定表达式匹配的元素集合，用逗号分隔多个表达式。

$('li').filter('#i1');
$('li').filter('#i1, :first');		// 保留第一个以及带有ID为`#i1`的元素

is(expr|obj|ele|fn): 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。
```
$('li').parent().is('ul');
```
map(callback): 将一组元素转换成其他数组（不论是否是元素数组），可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。
```
$('li').parent().is('ol');
```

slice(start, [end]): 选取一个匹配的子集。

$('li').slice(1,3);		//选择第2，3个li元素

2. 查找

2.1 前项查找

prev([expr]): 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
```
$('#i2').prev();
```
prevAll([expr]): 查找当前元素之前所有的同辈元素。
```
$('#i2').prevAll();
```
prevUntil([exp|ele][,fil]): 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
```
$('#i2').prevUntil('ul');
```

2.2 后项查找

next([expr]): 只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。
```
$('#i1').next();
```
nextAll([expr]): 查找当前元素之后所有的同辈元素。
```
$('#i1').nextAll();
```
nextUntil([exp|ele][,fil]): 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
```
$('#i1').nextUntil('ul');
```

2.3 父项查找

parent([expr]): 取得一个包含着所有匹配元素的唯一父元素的元素集合。
```
$('ol').parent();
```
parents([expr]): 取得一个包含着所有匹配元素的祖先元素的元素集合（包含html根元素）。
```
$('#i3').parents();
```
parentsUntil([expr|element][,filter]): 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
```
$('#i3').parentsUntil('ul');
	// Object { 0: ol, 1: li, 2: ul, 3: body, 4: html, length: 5, prevObject: {…} }
```
closest(expr|object|element): 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。closest对于处理事件委托非常有用。
```
$('#i3').closest("li");
$('#i3').closest("ol");
```
- closest和parents的主要区别是：前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；

2.4 子项查找

children([expr]): 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
```
$("body").children()
```
siblings([expr]): 取得匹配元素的所有同辈元素的元素集合（结果不包含匹配元素）。
```
$("#i3").siblings()
// 0: <li>
// 1: <li>
// length: 2
```

2.5 其他查找

find(expr|obj|ele): 搜索所有与指定表达式匹配的元素。
```
$("li").find('ol')
```
offsetParent(): 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。仅对可见元素有效。
```
$("ul").offsetParent();
```