jQuery - 遍历(四)之 过滤

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 669评论 0 3
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 2,919评论 1 40
  • jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由约翰·雷西格(...
    静候那一米阳光阅读 797评论 0 18
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,065评论 0 2
  • 我有一万句话想对你说,可是你却没有给我一个机会~今天我心情特别好,因为在我抬头的瞬间,我发现你的目光好像一瞬间停留...
    打个飞的阅读 196评论 0 2