jQuery - 遍历（四）之 过滤
2016-08-07 本文已影响20人
AshengTan
jQuery 遍历，用于根据所要查找的元素相对于其他元素的关系来查找到该元素。
eq(index)
| 参数 | 类型 | 描述 |
|---|---|---|
| index | Number | 必选。返回所选元素所在组的指定索引号的元素（负数将从所选元素的结尾开始计算索引，-1 为最后一个元素）。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历04_eq()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("li").eq(-5).css("color", "red");
});
</script>
</body>
</html>
效果演示：
eq(index).png
first()
| 方法 | 描述 |
|---|---|
| first() | 返回所选元素所在组的第一个元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历05_first()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("li").first().css("color", "red");
});
</script>
</body>
</html>
效果演示：
first().png
last()
| 方法 | 描述 |
|---|---|
| last() | 返回所选元素所在组的最后一个元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历06_last()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("li").last().css("color", "red");
});
</script>
</body>
</html>
效果演示：
last().png
filter(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 必选。返回所选元素中的匹配的元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历06_last()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li class="li">list item 1</li>
<li>list item 2</li>
<li class="li">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("li").filter(".li").css("color", "red");
});
</script>
</body>
</html>
效果演示：
filter(selector).png
not(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 必选。返回所选元素中的不匹配的元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历08_not()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li class="li">list item 1</li>
<li>list item 2</li>
<li class="li">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("li").not(".li").css("color", "red");
});
</script>
</body>
</html>
效果演示：
not(selector).png
