javascript - 类名 javascript 与 addClass jQuery 相同吗？

Question

我想知道javascript中的classname是否与jQuery中的addClass相同。我想将以下函数更改为 jQuery:

function slidePageFrom(page, from) {
        // Position the page at the starting position of the animation
        page.className = "page " + from;
        // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
        page.className ="page transition center";
        currentPage.className = "page transition " + (from === "left" ? "right" : "left");
        currentPage = page;
    }

HTML:

  <section id="homePage" class="page center" style="background-color: #add55a">
        <h1>Home Page</h1>
        <a href="javascript:slidePageFrom(page1, 'right');">Page 1</a>
    </section>

    <section id="p1" class="page right" style="background-color: #8ca83d">
        <h1>Page 1</h1>
        <a href="javascript:slidePageFrom(page2, 'right');">Back</a>
    </section>
    <section id="p2" class="page right" style="background-color: #8ca83d">
        <h1>Page 2</h1>
        <a href="javascript:slidePageFrom(homePage, 'left');">Back</a>
    </section>

Answer 1

className DOM 元素节点的属性是该节点上所有类的空格分隔列表。如果一个元素具有类“a”、“b”和“c”，则 .className将是"a b c" (可能以其他顺序，因为顺序并不重要)。

相比之下，jQuery .addClass()和.removeClass()函数执行它们所说的操作:添加一个类(如果尚不存在)或删除一个类(如果存在)。这些操作仅影响所涉及的类；其他的则留在原地。

所以答案是 jQuery 方法为您提供了一个抽象来操作 .className属性，但说它们“相同”是不正确的。

请注意，在您的函数中，使用前两个语句:

    page.className = "page " + from;
    // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
    page.className ="page transition center";

第二次分配给.className属性完全覆盖第一条语句放置的值。换句话说，无论 from 的值如何，page.className的值第二条语句之后将始终为 "page transition center" 。另一方面，如果第二条语句使用了 jQuery .addClass() :

    $(page).addClass("page transition center");

然后，无论 from 中的类名是什么仍然会在那里。