javascript - 纯 JavaScript 中的 jQuery 函数

Question

我是那些从不费心去学习 JavaScript 并直接学习 jQuery 的人之一。

我正在编写简单的脚本来隐藏所有内容，直到页面完全加载 - 并且因为我的 jQuery 是在 html/css/images 之后加载的，所以我计划将小脚本放在标题中。

所以在 jQuery 中它会是

$('body').css('display','none');

纯 JavaScript:

document.body.parentNode.style.display = 'none';

但是比:

$(window).load(function() { $('body').css('display', 'block').fadeIn(3000); });

没有动画吗？为什么？

我正在尝试做什么:

• #1 用 javascipt 隐藏所有内容(body)，直到所有内容都加载完毕(在这种状态下没有 jQuery，因为最后加载)
• #2 显示带有淡入淡出动画的所有内容(主体)(使用 jQuery - 在此状态下加载)

非常感谢任何帮助。

皮特

Answer 1

相当于

$('body').css('display','none');

是

document.body.style.display = 'none';

$('body') 选择了 body 元素，但是 document.body.parentNode 显然选择了 body 的父节点.

不应该只是

$('body').fadeIn(3000);

？

我问这个问题是因为我假设您已经获得了仅适用于 jQuery 的代码。但显然你还没有，所以再次，它必须是 $('body').fadeIn(3000); ，否则你使元素立即可见，并且不再有任何动画。

查看演示:http://jsfiddle.net/fkling/Q24pC/1/

更新:

$(window).load 仅在所有资源加载完毕后才会触发。如果您有图像，这可能需要更长的时间。要提前隐藏元素，您应该监听 ready 事件:

$(document).ready(function() {
    // still don't know why you don't want to use jQuery.
    document.body.style.display = 'none';
});

或者最初使用 CSS 隐藏元素

body {
    display: none;
}

要确保禁用 JavaScript 的用户可以看到该页面，您必须添加

<noscript>
    <style>
        body {
            display: block;
        }
    </style>
</noscript>

在 head 中其他 CSS 样式之后。

更新2

似乎设置 CSS 属性会直接导致某些浏览器出现问题。但使用 $('body').hide() 似乎有效: http://jsfiddle.net/fkling/JaLZU/