何时在javascript中使用css元素/类选择器

When to use the css element/class selector in javascript?

本文关键字：元素 选择器 css javascript 何时      更新时间：2024-03-13

我目前正在进行关于构建交互式网站的codecademy课程，我偶然发现了关于css元素的element/class选择的使用的模糊性。

javascript:

var main = function() {
    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
    });
};

css：

.current .item {
  background: rgba(206,220,206,.9);
}

为什么我必须使用元素选择器"current"而不是第4行中的类选择器".current"？它背后有什么规则吗？或者只是jquery的一个规范？

仅仅因为类的名称是current而不是.current，并且在中

$('.article').removeClass('current');

current不是任何选择器，只是要删除的classname，而选择器是.article。

您认为我们使用的是元素选择器而不是类选择器。但你错了。您是否在removeClass和addClass中看到Class一词？这意味着您传递的是类选择器，而不是元素选择器作为参数。

现在你们可能会问，为什么你们看不到电流点？因为类是使用句点指定的。事实上，我们已经指定我们正在传递类选择器，正如您可以在removeClass和addClass中看到的单词"Class"。

根据文件addClass():

将指定的类添加到一组匹配元素中的每一个。

因此，您需要传递classname/names作为参数，而不是由它构建的类选择器

在addClass/removeClass中，您使用类名（类似于在html的class属性中指定的类名），而不是像$()中那样使用DOM选择器。

函数名removeClass（）意味着您必须声明类名。使用选择器，您必须指定要选择类或ID。

addClass和removeClass方法接受一个或多个空间分隔的类，这些类将从每个匹配元素的类属性中删除。要添加/删除的calss的名称是"current"，而不是".current"

http://api.jquery.com/removeclass/
http://api.jquery.com/addclass/

在第4行中，您没有使用"current"作为选择器，它是一个类名。每当你使用某个类名作为选择器时（例如在.find('.current'), $('.current') , closest('.current') etc) then only the rule of putting.for class name#`for id等）。每当你检查某个类是否存在（.hasClass（）），添加和删除一个类（addClass（'current'），removeClass（'current'），那么你必须提到正确的类名。我希望它能有所帮助。

相关文章：