Question

我注意到className属性在没有索引的jQuery中不起作用，为什么会这样？

此外，还有其他常见的JS属性/方法在jQuery中无法正常工作吗？

HTML：

<div class="par">test</div>

JQuery的：

$(function () {

    var el = $('.par');

    el.className += ' new class'; // doesn't work
    el[0].className += ' new class'; // works
});

Answer 1

var el = $('.par');会返回jQuery object。 className是Element上的属性，而不是jQuery object上的属性。

jQuery对象有一个类似定义的数组，因此el[0]返回具有className属性的基础Element。

据我所知，jQuery不喜欢开发人员直接更新其属性。它简单地公开了各种实用功能，以便于开发。

引用下面David Thomas的好评，

jQuery方法只能用于jQuery对象;本机DOM属性/方法只能在本机DOM节点上使用

注意： var el = $('.par');返回Element的集合，el[0]返回该列表中的第一个元素。

您可以使用.addClass向元素添加类。

到第一个元素

el.eq(0).addClass('new_class');

对所有元素，

el.addClass('new_class');

更多阅读：

Answer 2

className是DOM元素的api的一部分。

var el = $('.par');将返回一个带有元素数组的jQuery对象。

使用el[0]访问有权访问api的第一个元素。

jQuery提供了一种简单的方法，用于将类添加到由名为addClass的选择器匹配的元素或元素组中。你可以用这个：

var el = $('.par');
el.addClass('new class');

另请注意，通常最佳做法是使用$命名包含jQuery对象的变量，如下所示：

var $el = $('.par');

Answer 3

var el = $('.par');

为您提供了一个jQuery对象，它可能包含一个或多个DOM元素。

var el = $('.par')[0];

返回该jQuery对象选择中的第一个DOM对象。 className是DOM元素上的属性，而不是jQuery对象

$('.par').attr('class');

将是获取第一个元素的className的jQuery方法。

如果您只想将特定类添加到与其他类匹配的元素，则可以使用

$('.par').addClass('testclass');

这将使用par类将测试类添加到所有元素，而您的方法只会将其添加到页面上的第一个元素。

其他属性

此外，还有其他常见的JS属性/方法在jQuery中无法正常工作吗？

大多数dom属性不能直接在jQuery对象上运行。您可以使用[0]获取第一个匹配元素的原始dom元素。然而，它们中的大多数在jQuery中也具有直接的等价物。使用jQuery版本的优点是它们通常更简单，并且可以跨浏览器一致地工作。但是，本地dom属性往往更快访问。

Answer 4

jQuery DOM对象实际上是匹配元素的列表。由于您在DOM元素列表上设置变量，因此jQuery无法将它们应用于整个列表。 el[0]是第一个匹配的元素。（如果你有多个元素，使用el[0]只会设置第一个匹配的元素，如果没有任何匹配，el[0]将引发一个ValueError。）你应该使用jQuery的内置类操纵功能：

el.addClass("new class");

删除类：

el.removeClass("new class");

并切换它们：

el.toggleClass("new class");

Answer 5

这可能与问题没有直接关系，但如果您正在使用jQuery，那么您还应该使用jQuery易于使用的方法来修改jQuery对象中所有DOM元素的类名。

http://api.jquery.com/addClass/ http://api.jquery.com/toggleClass/ http://api.jquery.com/removeClass/

Answer 6

$(function () {

    var cname = $('.par').attr('class'); // get class attribute
    if (!$('.par').hasClass('some-new-class')) {
        $('.par').addClass('some-new-class');
    }
});

为什么$（'el'）[0] .className工作但不是$（'el'）。className？

6 个答案:

其他属性