什么是jQuery相当于vanilla JavaScript classList？

Question

我正在与两个熟人合作开展一个项目，并且我被要求让我的选择器保持为类似

的香草。

document.getElementById("thisDiv");

或jQuery选择器，如

$("#thisDiv");

为了保持一致性。我决定使用jQuery选择器然后遇到一个问题，其中与vanilla JavaScript选择器一起使用的classList似乎不适用于jQuery等价物。

document.getElementById("thisDiv").classList.remove("hidden");

有效，

$("#thisDiv").classList.remove("hidden");

没有。我可以使用jQuery选择器吗？

Answer 1

粗略地说，您可以将jQuery视为一组专为DOM操作而设计的函数。从技术上讲，这就是我们所说的API（应用程序编程接口）。如您所知，您的Web浏览器提供了类似于jQuery API的内置API。虽然两个API都有相同的用途，但存在一些关键差异：

1. jQuery API基于浏览器的内置API构建。
2. 与内置API不同，jQuery API在任何浏览器中的工作方式都相同。
3. API结构和命名约定有很大不同。

最后一点意味着你不能期望从一个API到另一个API找到完全相同的功能，换句话说，你必须阅读手册。



这是一个小帮助：http://api.jquery.com/category/manipulation/class-attribute： - ）

另一个选择是询问浏览器的控制台。如果您使用的是Chrome（Firefox应该可以正常工作），请按 F12 ，打开“控制台”面板，然后尝试猜测您要查找的功能的名称。控制台将显示与您键入的内容匹配的名称列表。 jQuery API位于$.fn：



当然必须在当前页面中加载jQuery，Stackoverflow就是这种情况。如您所见，有一个名为removeClass的函数，您可以这样调用它：

$("#thisDiv").removeClass("hidden")

Answer 2

没有与普通JavaScript classList等效的普通jQuery。

与jQuery等效的唯一选择是将插件功能添加到香草jQuery，其功能类似于classList。

我找到了有关here，and here这样的插件的建议代码。它们的功能稍有不同，但是都返回规则的类名数组而不是DOMtokenList，因此它们不支持以与使用classList相同的格式从元素中添加或删除类。但是，正如@Phani Kumar M所指出的那样，您不需要类列表就可以使用普通的jQuery add（）或remove（）方法。

当然，获取类列表根本不需要jQuery，但为实现代码清晰起见，对于IE 9及以下版本（不支持classList）来说，这样做可能需要jQuery函数。 /简洁，是为了方便起见，还是出于个人审美原因。