2

我注意到className在没有索引的情况下，该属性在 jQuery 中不起作用，这是为什么呢？

此外，还有其他常见的 JS 属性/方法在 jQuery 中不能按预期工作吗？

HTML：

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

查询：

$(function () {

    var el = $('.par');

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

6 回答 6

10

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

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

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

引用下面大卫托马斯的一个很好的评论，

jQuery 方法只能用于 jQuery 对象；原生 DOM 属性/方法只能在原生 DOM 节点上使用

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

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

对于第一个元素，

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

对所有元素，

el.addClass('new_class');

更多阅读：

  1. https://developer.mozilla.org/en-US/docs/Web/API/element
  2. https://developer.mozilla.org/en-US/docs/DOM/element.className
于 2013-05-16T18:47:43.100 回答
2

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

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

Usingel[0]访问第一个可以访问 api 的元素。

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

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

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

var $el = $('.par');
于 2013-05-16T18:49:34.723 回答
2 
var el = $('.par');

给你一个 jQuery 对象，它可能包含一个或多个 DOM 元素。 

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

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

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

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

如果您只想将特定类添加到与另一个类匹配的元素中，您可以使用

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

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

其他属性

Also, are there other common JS properties / methods that don't work as expected inside jQuery?

Most dom properties will not work directly on a jQuery object. You can use [0] to get the raw dom element for the first matched element for those. However most of them also have straightforward equivalents in jQuery. The advantage of using the jQuery versions is that they're often simpler, and work consistently across browsers. Native dom properties tend to be faster to access though.

于 2013-05-16T18:49:49.620 回答
1

The jQuery DOM object is actually a list of matching elements. Since you're setting a variable on a list of DOM elements, jQuery can't apply them to the entire list. el[0] is the first matched element. (If you have more than one element, using el[0] will only set the first matched element, and if there aren't any matches, el[0] will raise a ValueError.) You should probably use jQuery's builtin class manipulation functions:

el.addClass("new class");

to remove the classes:

el.removeClass("new class");

and to toggle them:

el.toggleClass("new class");
于 2013-05-16T18:50:44.970 回答
0

This might not be directly related to the question, but if you're working with jQuery, then you should also be using jQuery's easy to use methods to modify the classname's of all DOM elements within a jQuery object.

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

于 2013-05-16T18:50:55.570 回答
0 
$(function () {

    var cname = $('.par').attr('class'); // get class attribute
    if (!$('.par').hasClass('some-new-class')) {
        $('.par').addClass('some-new-class');
    }
});
于 2013-05-16T18:51:55.373 回答