JQuery 函数不起作用。包括准备好的处理程序答案

【问题标题】：JQuery functions don't work. Ready handler includedJQuery 函数不起作用。包括准备好的处理程序
【发布时间】：2014-11-04 09:48:14
【问题描述】：

由于某种原因，这个简单的代码块不会在我的浏览器中执行。没有任何 JQuery 函数执行，即使有一个准备好的处理程序。

<!DOCTYPE html PUBLIC>
<html>
  <head>    
    <title></title>
  </head>
  <body>
    <button id="btn">click me</button> 

    <script type="text/javascript">

        $(document).ready(function(){
           $('#btn').css("font-size", "1.5em");
           $('#btn').click(function(){
              $('#btn').hide();
           });
        });

    </script>
    <script src=
    "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type=
    "text/javascript">
</script>
  </body>
</html>

【问题讨论】：

在调用 jquery 函数之前应该先包含 jQuery。
将 JQuery 导入移动到头部就可以了。那么就绪处理程序有什么用呢？
不，与任何其他 jquery 代码一样的就绪处理程序必须放在 jquery 的包含之后。您应该首先包含 jquery，或者您可以将 $(document).ready(function){.. 更改为 window.onload = function() {.. 详细说明，例如这里：stackoverflow.com/questions/19326317/…
我以为ready handler函数会先等待整个文档加载完毕（包括导入jquery），然后再执行函数。
很高兴你刚刚学到了一些有价值的东西:) 简而言之 - 在加载 jquery 之前准备好的处理程序无法工作，因为准备好的处理程序是在 jquery 中定义的。

标签： jquery html

【解决方案1】：

在执行 jQuery 调用之前加载 .js 文件：

<!DOCTYPE html PUBLIC>
 <html>
   <head>    
     <title></title>
   </head>
   <body>
   <button id="btn">click me</button> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" />

   <script type="text/javascript">

    $(document).ready(function(){
       $('#btn').css("font-size", "1.5em");
       $('#btn').click(function(){
          $('#btn').hide();
       });
    });

   </script>

【讨论】：

向上移动 jquery 导入完成了这项工作，但是准备好的处理程序有什么用呢？
js文件是按顺序加载的，所以假设脚本文件是在使用$之前加载的，但这并不意味着所有的模块都被加载和初始化。假设是您首先加载您的 javascript 核心和插件。
你明白了。谢谢。

【解决方案2】：

jquery 的 URL 中缺少“http”。

【讨论】：

这是有意的，用于处理标准 http 请求和通过 https 的请求

【解决方案3】：

在 jquery 完全初始化后调用 ready 处理程序，只有这样你才能确定所有 jquery 功能都会执行它们应该做的事情。

【讨论】：

这是不正确的。 jQuery 必须完全加载，然后才能设置 .ready() 调用（因为 .ready() 使用 jQuery 库，因此该库必须已经加载）。 .ready() 在 DOM 完成解析并准备修改时触发，这就是它的用途。