是否有使用 jQuery 设置项目类的首选方法

Is there a preferred approach to setting an item's class using jQuery

本文关键字：方法 项目 设置 jQuery 是否      更新时间：2023-09-26

在jQuery之前，我会使用以下代码在元素上设置类：

document.getElementById("MyElementID").className = 'MyClassName';

这具有替换新类名之前的任何内容的预期行为MyClassName

在jQuery中，等价物似乎是：

$('#MyElementID').attr('class', 'MyClassName')

但是，我们也有内置的类函数， addClass() ， removeClass() 和 toggleClass() .因此，为了达到相同的效果，我会说：

 $('#MyElementID').removeClass().addClass('MyClassName');

显然，第一个jQuery示例更简洁，只需要一次函数调用（attr，而不是addClass()和removeClass()）

我们是否可以假设我不能使用 prop 作为我正在使用的早期（当前不可更改）版本。

那么，您认为首选方法是什么？第二个样本是否给了我超出第一个样本的东西？

提前非常感谢。

jQuery的addClass（），removeClass（）和has（）方法使用元素的className属性。它们提供的最大优势是它们允许您添加或删除类，而不会影响其他类名集。

attr（） 方法使用类似这样的东西：

document.getElementById("MyElementID")[name] = value;

对于只需要一个类名的情况，属性方法可能会更快。但是，我个人发现 addClass 方法更优雅，更容易适应，如果您将来需要添加更多类名。

我认为您应该检查所有这些功能的性能。 我个人认为 prop 方法最快（在 v1.6 中引入）

在这里看到性能 jQuery（）.attr vs jQuery（）

.data vs jQuery（）.prop

http://jsperf.com/jquery-data-vs-jqueryselection-data/8

区别在于这家伙：

<div class="a_class another_class a_third_class">

attr（'class'，'no_other_classes_now'） <-- 将替换 class 属性中的所有内容，即使有多个空格分隔的类。这可能是执行此操作的最轻量级的 JQ 方法，因为它只是使用了已经在浏览器中正常工作了十多年的 DOM 方法。

.removeClass（'a_third_class'） 将删除一个类，而其他类保持不变。

.addClass（'a_fourth_class'） 将添加一个空格分隔的类，而不替换其他类。

^^ 这两个人必须为简单的类覆盖做比 attr 更多的工作，因为它们需要执行查找/替换类型操作。

Prop 用于更改没有 HTML 表示（如窗口对象）的 DOM 元素的属性（由于其他方便的方法，不太可能经常有用），或者由于不同的属性字符串可能意味着不同的东西而令人困惑。就像简单地将属性"checked"而不带等号或值等同于checked="checked"或checked="true"就布尔值（仅真/假）而言，JS属性在某些风格的HTML中是相关的。使用 prop，您将获得 javascript 属性，而不一定是实际 HTML 元素的引号之间的任何内容。

当你不处于那种情况下时，我会坚持使用attr方法。道具的全部意义似乎是从旧的 attr 方法中获取工作，所以如果在大多数情况下它更快，我会感到惊讶。更重要的是，它很常见且易于阅读。

相关文章：