📌  相关文章
📜  jQuery | add() 方法与示例(1)

📅  最后修改于: 2023-12-03 15:02:13.527000             🧑  作者: Mango

jQuery | add() 方法与示例

jQuery 的 add() 方法用于向匹配的元素集合中添加新的元素、选择器或 HTML 代码。该方法通过将指定的内容添加到现有集合中来创建一个新的集合。

语法
$(selector).add(content)
  • selector：要添加到匹配元素集合的元素选择器。
  • content：要添加到匹配元素集合的内容，可以是元素，选择器或 HTML 代码。
示例
添加元素

下面的例子演示了如何使用 add() 方法向匹配的元素集合中添加一个新的段落元素：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").add("h2").add("h3").css("background-color", "yellow");
    });
  </script>
</head>
<body>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <h3>This is a subheading</h3>
  <p>This is another paragraph.</p>
</body>
</html>

执行以上代码，所有的 <p>，<h2> 和 <h3> 标签的背景颜色都会变成黄色。

添加选择器

下面的例子演示了如何使用 add() 方法向匹配的元素集合中添加一个选择器：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").add(".intro").css("background-color", "yellow");
    });
  </script>
  <style>
    .intro {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h2>This is a heading</h2>
  <p class="intro">This is a paragraph.</p>
  <h3>This is a subheading</h3>
  <p>This is another paragraph.</p>
</body>
</html>

执行以上代码，<p> 标签和具有 .intro 类的元素的背景颜色都会变成黄色。

添加 HTML 代码

下面的例子演示了如何使用 add() 方法向匹配的元素集合中添加一段 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").add("<span>This is a span element.</span>").css("background-color", "yellow");
    });
  </script>
</head>
<body>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <h3>This is a subheading</h3>
  <p>This is another paragraph.</p>
</body>
</html>

执行以上代码，所有的 <p> 标签的背景颜色都会变成黄色，并在每个 <p> 标签中添加一个 <span> 元素。

总结

使用 jQuery 的 add() 方法可以方便地向匹配的元素集合中添加新的元素、选择器或 HTML 代码。无论是通过元素、选择器还是 HTML 代码，都可以轻松地扩展现有的元素集合，并进行相应的操作。