jQuery 遍历 -过滤 first(), last() 和 eq()

最新推荐文章于 2024-09-29 09:00:00 发布

原创最新推荐文章于 2024-09-29 09:00:00 发布 · 271 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

本文介绍了jQuery中用于过滤和选取元素的方法，包括first()用于获取首个元素，last()获取最后一个元素，eq()根据索引选取特定元素，以及filter()和not()进行条件筛选。

用于过滤筛选某些特定的元素或类而显示的效果

jQuery first() 方法

first() 方法返回被选元素的首个元素。

<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
<body>
<h1>欢迎来到我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是 div 中的另一个段落。</p>
</div>
<p>这也是段落。</p>
</body>

效果：
在这里插入图片描述

jQuery last() 方法

last() 方法返回被选元素的最后一个元素

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
<body>
<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>
</body>

在这里插入图片描述

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

<script>
$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
</body>

在这里插入图片描述

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

<script>
$(document).ready(function(){
  $("p").not(".intro").css("background-color","yellow");
});
</script>
<body>
<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
</body>