用于多个元素的jQuery选择器

我知道这不是一个与代码问题相关的问题，但这是我很想知道的，它可能会帮助其他人：

使用这个有什么区别：

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content', $fullArea);
});

请再说一遍：

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content, #full-sized-area');
});

您的代码：

var $fullContent = $('#full-sized-content', $fullArea);

它说在

$fullArea

中查找我

#完整大小的内容

，因为

，

<代码>，为此创建上下文

---

此代码：

var $fullContent = $('#full-sized-content, #full-sized-area');

通常称为多选择器选择，它是一个字符串，在下面有

，

分隔的元素

var $fullContent = $('#full-sized-content', $fullArea);

---

is通常在给定的上下文中找到一个元素，它是

，

分隔的元素。

两者都有很大的区别

基本上，您将在下面的行中使用。所以很简单

$('#full-sized-content, #full-sized-area')

在这行中，您使用的是基于上下文的选择器，在这里您选择的元素ID为

fullArea

var $fullContent = $('#full-sized-content', $fullArea); 

相当于

var $fullContent = $('#full-sized-area').find('#full-sized-content');

$('#full-sized-area #full-sized-content');
          Parent          Child                

注意：ID在HTML中必须是唯一的，您可以简单地使用

var $fullContent = $('#full-sized-content');

有区别,

var $fullContent = $('#full-sized-content, #full-sized-area');

var $fullContent = $('#full-sized-content', $fullArea);

选择两个元素-：

$（“#elem1，#elem2，…”）

---

var $fullContent = $('#full-sized-content, #full-sized-area');

var $fullContent = $('#full-sized-content', $fullArea);

在这种情况下：

#全尺寸内容

必须是

#全尺寸区域

所以它相当于

var $fullContent = $('#full-sized-area').find('#full-sized-content');

$('#full-sized-area #full-sized-content');
          Parent          Child                

---

这里两者都不一样

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content', $fullArea);
});

这一个选择元素在#full size area元素下具有id“full size content”

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content, #full-sized-area');
});

这一个选择ID为全尺寸内容和全尺寸区域的元素

var $fullContent = $('#full-sized-content', $fullArea);

上面的代码实际上是一个基于上下文的选择器。因此，is以简单的方式所做的是：-

$fullArea                           // get the fullArea element
    .find('#full-sized-content')    // find all the descendants with this id inside it

以下代码的意思是：

// Get both the elements with id full-sized-content & full-sized-area
var $fullContent = $('#full-sized-content, #full-sized-area');

它就像一个组合选择器。因此，如果您对第一个代码执行以下操作：-

$fullContent.css('color', 'red');

它只会使

#完整大小的内容
内部
$fullArea
然而，如果您在第二部分使用相同的代码，它将为
全尺寸内容
和
全尺寸区域
元素着色

@AmitKumar添加了详细信息，您可以查看一下。通常这两个代码完全不同。第一个元素在元素
$fullArea
下仅选择一个id为
#全尺寸内容的元素，因此如果该元素不包含在
$fullArea
中，您将收到一个空的jquery对象。而第二个总是返回两个对象，分别是
#全尺寸内容
和
#全尺寸区域
。当然，这些ID应该存在于HTML代码中。