页面加载后Jquery addClass

Question

我想知道为什么jQuery代码在页面渲染后执行addClass功能。

我有一些元素（h1）定位为absolute.This元素有规则：

left: 60%;

简单的JS：

$(document).ready(function() {
    $('#test').find('header').find('h1').addClass('move');
})

CSS：

.move {
    left: 40%
}

现在，问题：为什么在页面加载时，h1元素首先在60％左右，但在加载后第二个，由于move类，它向左移动了40％。 此效果看起来很糟糕，因为h1元素现在已替换页面上可见的效果...

我想让这个元素保持在40％左右，这样用户就无法看到＆＃34;移动效果＆＃34;。

此致 马立克。

Answer 1

$(document).ready()的全部意义;就是它在页面渲染后执行。如果您不希望用户看到更改，您需要在CSS中设置样式或仅在您在JS中设置类后显示该元素。

Answer 2

这个addClass函数在页面渲染后调用，因为你已经在document.ready（）中编写了它。而是将它写在开放的脚本块中，以便在html之后加载它。

Answer 3

当加载 DOM（文档对象模型）时，就会发生就绪事件。

由于此事件发生 文档准备好之后，因此它是获取所有其他jQuery事件和函数的好地方。

ready（）方法指定在就绪事件发生时会发生什么。

所以你必须设置样式css

Answer 4

使用$(document).load(function() { // your code });代替文档就绪功能。