jQuery选择多个元素方法|极客教程

jQuery选择多个元素方法

在前端开发中，我们通常会使用jQuery来操作DOM元素，而选择多个元素是十分常见的操作。jQuery提供了多种方法来选择多个元素，让我们可以轻松的对它们进行统一的操作。本文将详细介绍几种jQuery选择多个元素的方法，并给出相应的示例代码和运行结果。

1. 通过类名选择多个元素

我们可以通过类名来选择多个元素，使用$(".className")即可选择所有具有相同类名的元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择多个元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

<script>
   $(document).ready(function(){$ (".box").css("background-color", "lightblue");
  });
</script>

</body>
</html>

在这个示例中，我们选择所有类名为box的元素，并将它们的背景颜色设置为浅蓝色。当页面加载完成后，所有具有box类名的元素会变成浅蓝色。

2. 通过元素类型选择多个元素

除了通过类名选择多个元素，我们还可以通过元素类型来选择多个元素，使用$("tagName")即可选择所有指定类型的元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择多个元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></scrip>
</head>
<body>

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

<script>
   $(document).ready(function(){$ ("p").css("color", "red");
  });
</script>

</body>
</html>

在这个示例中，我们选择所有的<p>元素，并将它们的文字颜色设置为红色。当页面加载完成后，所有的段落文本会变成红色。

3. 通过属性选择多个元素

我们还可以通过元素的属性来选择多个元素，使用$("[attribute='value']")即可选择所有具有指定属性和值的元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择多个元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<p class="selected">Selected Paragraph</p>
<p>Paragraph 2</p>
<p class="selected">Selected Paragraph</p>

<script>
   $(document).ready(function(){$ ("[class='selected']").css("font-weight", "bold");
  });
</script>

</body>
</html>

在这个示例中，我们选择所有具有class属性值为selected的元素，并将它们的字重设置为粗体。加载页面后，所有具有selected类名的段落会变成粗体字。