1. :first 过滤器: 选择匹配元素集合中的第一个元素。
$('li:first'); // 选择所有 <li> 元素中的第一个
2. :last 过滤器: 选择匹配元素集合中的最后一个元素。
$('li:last'); // 选择所有 <li> 元素中的最后一个
3. :even 和 :odd 过滤器: 选择匹配元素集合中偶数或奇数位置的元素。
$('li:even'); // 选择所有 <li> 元素中的偶数位置的元素
$('li:odd'); // 选择所有 <li> 元素中的奇数位置的元素
4. :eq(index) 过滤器: 选择匹配元素集合中指定索引位置的元素。
$('li:eq(2)'); // 选择所有 <li> 元素中索引为 2 的元素
5. :gt(index) 和 :lt(index) 过滤器: 选择匹配元素集合中索引大于或小于指定索引的元素。
$('li:gt(2)'); // 选择所有 <li> 元素中索引大于 2 的元素
$('li:lt(2)'); // 选择所有 <li> 元素中索引小于 2 的元素
6. :not(selector) 过滤器: 选择匹配元素集合中不符合指定选择器的元素。
$('li:not(.special)'); // 选择所有 <li> 元素中不带有类名 .special 的元素
这里是一个完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 过滤</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.special {
color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li class="special">Item 2 (Special)</li>
<li>Item 3</li>
<li class="special">Item 4 (Special)</li>
<li>Item 5</li>
</ul>
<script>
// 选择第一个 <li> 元素
var firstItem = $('li:first');
console.log(firstItem);
// 选择最后一个 <li> 元素
var lastItem = $('li:last');
console.log(lastItem);
// 选择所有偶数位置的 <li> 元素
var evenItems = $('li:even');
console.log(evenItems);
// 选择索引为 2 的 <li> 元素
var thirdItem = $('li:eq(2)');
console.log(thirdItem);
// 选择所有索引大于 2 的 <li> 元素
var greaterThanTwo = $('li:gt(2)');
console.log(greaterThanTwo);
// 选择所有不带有类名 .special 的 <li> 元素
var notSpecial = $('li:not(.special)');
console.log(notSpecial);
</script>
</body>
</html>
在这个例子中,通过使用不同的过滤方法,选择了列表中的不同元素。这些过滤方法可以根据具体的需求进行组合使用。
转载请注明出处:http://www.zyzy.cn/article/detail/12890/jQuery