为什么jQuery脚本在将脚本放在jquery liberary之上时不起作用？

Question

此代码有效：

<div class="demo-gallery" data-pswp-uid="1">            
<a class = "delete_button">click</a>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function()
        { 
            $(".delete_button").click( function (event) { 
                event.preventDefault(); 
                  alert('hi');
                  return false; 
             });
        });
    </script> 

DEMO：http://jsfiddle.net/zqdpfvzo/

但如果我将脚本放在jquery-2.1.4.js下<：p>，则无效

DEMO：http://jsfiddle.net/zqdpfvzo/1/

为什么以及如何修复它？

Answer 1

因为脚本按照声明的顺序加载。在第二个演示中，页面内代码尝试在定义和加载jQuery之前运行，因此出错并且什么都不做：

Answer 2

就像在声明和初始化变量之前不能使用变量值一样，就像首先声明和初始化变量jQuery一样，只有你可以使用它属性。

脚本按照与它们编写顺序相同的顺序同步加载到浏览器中。

尝试做个比喻：

问题是：

alert(x);
var x = 5;

修复是：

var x = 5;
alert(x);