jquery动画的加载顺序_Jquery - Fatal编程技术网

jquery动画的加载顺序

jquery

jquery动画的加载顺序,jquery,Jquery,我刚刚开始一个jQuery教程，我有一个关于jQuery动画加载顺序的基本问题当我使用以下HTML代码时，单击链接会导致出现警报和隐藏动画： <body> <a href="http://jquery.com/">jQuery</a> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <s

我刚刚开始一个jQuery教程，我有一个关于jQuery动画加载顺序的基本问题

当我使用以下HTML代码时，单击链接会导致出现警报和隐藏动画：

 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
       $("a").click(function(event){
         event.preventDefault();
         $(this).hide("slow");
       });
     });
   </script>
 </body>


$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
警报（“正如你所看到的，这个链接不再把你带到jquery.com”）；
event.preventDefault（）；
});
$（“a”）。单击（函数（事件）{
event.preventDefault（）；
$（这个）。隐藏（“慢”）；
});
});

但是，当我从document.ready函数中取出第二个click函数，使代码看起来与下面一样时，弹出窗口出现，文本消失，但隐藏动画不会出现

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
   <style>
    a.test { font-weight: bold; }
  </style>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
     $("a").click(function(event){
       event.preventDefault();
       $(this).hide("slow");
     });
   </script>
 </body>
 </html>


jQuery演示
a、 测试{字体大小：粗体；}
$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
警报（“正如你所看到的，这个链接不再把你带到jquery.com”）；
event.preventDefault（）；
});
});
$（“a”）。单击（函数（事件）{
event.preventDefault（）；
$（这个）。隐藏（“慢”）；
});

有人能解释为什么隐藏动画只在第一个示例中显示而不在第二个示例中显示吗？

这是因为在第二个示例中，对

click（）

的最后一个调用位于

ready

处理程序之外

执行该调用时，DOM可能还没有准备好，因此处理程序没有绑定，之后也不会发生动画。

这是因为第二个处理程序没有连接到div上的所有锚

标记

 $("a").click(function(event){ //This function will execute as the script loads
                               // and during this time, DOM might have been loaded yet
   event.preventDefault();
   $(this).hide("slow");
 });

但是，把它包在里面

$(document).ready(function() {

    // DOM is loaded

});

首先确保先加载DOM，然后附加处理程序。

谢谢，我将进一步研究DOM是什么以及处理程序绑定是如何工作的。