Question

//在我们使用Document.ready

之前，此代码无效

$('.a').on('click',function(){
   $('.a').fadeOut(200);
});

$(document).ready(function () {
   $('.a').on('click', function() {
   $('.shad').fadeIn(1000);
   });
});

Answer 1

函数外的任何JavaScript都按照它在页面中出现的顺序执行。当你过早地调用$（＆＃39; .a＆＃39;）时，这些元素可能还不存在，jQuery可能尚未加载。

$（document）.ready（function（）{...}内的任何内容都将在整页准备就绪后执行，此时所有类＆＃39; a＆＃39;元素现在都将存在于（请参阅Jeremy Thille的评论以澄清＆＃34;准备好＆＃34; vs＆＃34;已加载＆＃34;。）

HTML：

<div class="a">click me</div>
<div class="shad">SHAD!</div>

JS：

$(document).ready(function () {
    $('.shad').hide(); // Hide the element on load
    $('.a').on('click', function () {
        $('.shad').fadeIn(1000); // Fade in on click
    });
});

小提琴：https://jsfiddle.net/BenjaminRay/j7kr21aj/

Answer 2

它是由尝试在DOM中不存在的元素上创建事件引起的。使用$（document）.ready来确保DOM中存在元素。

$(document).ready(function () {
   $('.a').on('click', function() {
   $('.a').fadeOut(200);
   $('.shad').fadeIn(1000);
   });
});

Answer 3

这是因为$(document).ready(function () { ... })（通常使用快捷方式(function () { ... })）在DOM准备好进行操作时运行（因此函数的名称）。在此之前，您在jQuery选择器中引用的DOM元素是不可用的。请注意，如果<script>元素在其后面（例如在<body>的末尾），则可以操作DOM元素。

作为jQuery文档says，

传递给.ready（）的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有其他内容的最佳位置事件处理程序并运行其他jQuery代码。

如果没有document.ready为什么，jquery函数就无法正常工作。

3 个答案: