jquery 函数在没有 document.ready 的情况下无法工作，为什么？

//在我们使用 Document.ready 之前，这段代码不起作用

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

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

函数之外的任何 JavaScript 都会按照其在页面中出现的顺序执行。当您过早调用 $('.a') 时，这些元素可能还不存在，并且 jQuery 可能尚未加载。

$(document).ready(function() { ... } 中的任何内容都将在整个页面就绪后执行，此时所有类 'a' 元素现在都将存在于页面上。（请参阅 Jeremy 的评论Tille 对“准备好”与“已加载”进行了澄清。）

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/