jQuery 从独立的jQuery对象中创建一个jQuery对象集合

在本文中，我们将介绍如何使用jQuery从独立的jQuery对象中创建一个jQuery对象集合。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和数据交互的操作。

什么是jQuery对象集合？

在理解如何创建一个jQuery对象集合之前，我们首先需要了解什么是jQuery对象集合。在jQuery中，可以使用选择器选择一个或多个HTML元素，并将它们存储在一个对象中。这个对象就是一个jQuery对象。当选择多个HTML元素时，jQuery会将它们存储在一个数组中，并将该数组封装成一个jQuery对象集合。

以下是一个简单的示例，展示了如何创建一个包含多个HTML元素的jQuery对象集合：

var elements = $('div'); // 选择所有的div元素并创建一个jQuery对象集合

在这个示例中，我们选择了所有的div元素，并将它们存储在一个jQuery对象集合中。

从独立的jQuery对象中创建一个jQuery对象集合

有时候，我们可能需要将已经存在的jQuery对象合并到一个新的jQuery对象集合中。jQuery提供了一种简单的方法来实现这一点。我们可以使用.add()方法将一个或多个jQuery对象添加到另一个jQuery对象中，并返回一个新的jQuery对象集合。

以下是一个示例，演示了如何从独立的jQuery对象创建一个新的jQuery对象集合：

var  $div1 =$ ('div#div1'); // 选择id为div1的div元素，并创建一个jQuery对象
var  $div2 =$ ('div#div2'); // 选择id为div2的div元素，并创建一个jQuery对象

var  $combined =$ div1.add( $div2); // 将$ div1和 $div2添加到一个新的jQuery对象中 console.log($ combined); // 输出包含 $div1和$ div2的新的jQuery对象集合

在这个示例中，我们首先创建了两个独立的jQuery对象$div1和$div2，它们分别选择了id为div1和div2的div元素。然后，我们使用.add()方法将这两个独立的jQuery对象添加到一个新的jQuery对象中，并将结果存储在$combined变量中。通过输出$combined，我们可以看到它是一个包含了$div1和$div2的新的jQuery对象集合。

示例应用场景

现在让我们来看看一个实际的应用场景，这将帮助我们更好地理解如何从独立的jQuery对象中创建一个jQuery对象集合。

假设我们的网页中有多个按钮，并且我们希望通过单击任何一个按钮来添加一个特定的类selected，以及改变所有其他按钮的背景颜色。为了实现这个效果，我们可以使用以下的代码：

HTML:

<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>
<button class="button">按钮4</button>

CSS:

.button {
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 5px;
}

.selected {
  background-color: yellow;
}

JavaScript/jQuery:

$(document).ready(function() {
  $('.button').click(function() {
    var $this = $(this);
    var $buttons = $('.button');

    $buttons.removeClass('selected');
    $this.addClass('selected');
    $buttons.not($this).css('background-color', '#ccc');
  });
});

在这个示例中，我们首先为每个按钮添加了一个类.button，并为这些按钮设置了一些基本的样式。然后，我们使用jQuery选择器选择了所有拥有.button类的按钮，并将它们存储在变量$buttons中。当我们单击任何一个按钮时，jQuery会将点击的按钮存储在变量$this中。我们使用.removeClass()方法从所有按钮中移除之前添加的selected类，并使用.addClass()方法将selected类添加到当前点击的按钮上。最后，我们使用.not()方法选择除了当前点击的按钮之外的所有按钮，并使用.css()方法将它们的背景颜色设置为默认值#ccc。

总结

本文介绍了如何使用jQuery从独立的jQuery对象中创建一个jQuery对象集合。我们了解了什么是jQuery对象集合以及如何使用.add()方法将独立的jQuery对象合并到一个新的jQuery对象集合中。通过示例应用场景，我们展示了如何根据点击事件来操作多个元素，并对它们进行相应的样式改变。掌握了这些知识，我们可以更好地利用jQuery的强大功能来简化我们的前端开发工作。