jQuery 遍历- 过滤


jQuery是一款优秀的JavaScript库,提供了丰富的遍历和过滤方法。本文将介绍jQuery的遍历-过滤方法,希望对你的开发工作有所帮助。

遍历方法

jQuery提供了多种遍历方法,可以访问文档树中的元素、获取元素的属性和内容。

each()方法

each()方法能够遍历一个jQuery对象的所有元素,对每个元素都执行一次给定的函数。

语法:

$(selector).each(function(index, element){
  // 函数体
});

参数:

  • index - 代表元素在集合中的索引。
  • element - 代表当前元素的 DOM 对象。

示例:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
$("li").each(function(index){
  console.log(index + ": " + $(this).text());
});

输出:

0: 列表项1
1: 列表项2
2: 列表项3

find()方法

find()方法能够获取所有匹配元素的后代元素。

语法:

$(selector).find(filter)

参数:

  • filter - 过滤条件,可以是选择器、jQuery对象或DOM元素。

示例:

<div class="container">
  <ul>
    <li>列表项1</li>
  </ul>
  <p>段落</p>
</div>
$(".container").find("*").css("border", "1px solid red");

container元素内的所有元素的边框设置为红色。

过滤方法

jQuery还提供了多种过滤方法,可以根据特定的条件过滤出符合条件的元素。

filter()方法

filter()方法能够根据给定的选择器或函数,从一组匹配元素中筛选出符合条件的元素。

语法:

$(selector).filter(filter)

参数:

  • filter - 过滤条件,可以是选择器或函数。

示例:

<ul>
  <li>列表项1</li>
  <li class="special">列表项2</li>
  <li>列表项3</li>
</ul>
$("li").filter(".special").css("background-color", "yellow");

classspecial的列表项的背景色设置为黄色。

not()方法

not()方法能够从匹配的元素集合中删除所有与指定选择器或函数匹配的元素。

语法:

$(selector).not(filter)

参数:

  • filter - 过滤条件,可以是选择器或函数。

示例:

<ul>
  <li>列表项1</li>
  <li class="special">列表项2</li>
  <li>列表项3</li>
</ul>
$("li").not(".special").css("background-color", "gray");

将除了classspecial的列表项以外的所有列表项的背景色设置为灰色。

first()方法

first()方法能够获取匹配元素集合中的第一个元素。

语法:

$(selector).first()

示例:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
$("li").first().css("background-color", "red");

将第一个列表项的背景色设置为红色。

last()方法

last()方法能够获取匹配元素集合中的最后一个元素。

语法:

$(selector).last()

示例:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
$("li").last().css("background-color", "blue");

将最后一个列表项的背景色设置为蓝色。

以上就是jQuery的遍历-过滤方法的详细介绍,希望能够对你的开发工作有所帮助。