让jQuery在外部js文件中工作的问题

Question

我刚开始搞乱jQuery，并且运气让它在实际的aspx和html文件中工作，但我现在试图让它在外部js文件中工作。

在头我的html文件，我有：

<!--Declare jQuery files--> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1-vsdoc.js"></script> 

<!--Declare external java files--> 
<script type="text/javascript" src="javascript/SiteFunction.js"></script> 

我曾尝试加入是为了避免多文档准备的情况下，它并没有什么影响无论哪种方式，其在不在家：

<script type="text/javascript"> 
    $(document).ready(function() { }); 
</script> 

在我的外部文件我有（它是一个if语句，我的功能只是字面上跳过所有的jQuery的.append和.animate的东西，如果它甚至不存在）：

 $(document).ready(function() { 
      $('<p>Test</p>').append("#" + newPage); 
     }); 

     jQuery(function($) { 
      alert(newPage); 
      $('<p>Test</p>').appendTo(newPage); 

      $(newPage).animate({ left: '0px' }, 2000, function() { 
       // Animation complete. 
       alert("animated newPage"); 
      }); 

      $(currentPage).animate({ right: '0px' }, 2000, function() { 
       // Animation complete. 
      }); 
     }); 

第一个jQuery append只是一个简单的测试，看看我能否做简单的事情。这全部包含在if语句中。我没有收到任何错误，并且代码是通过第一个jQuery准备好的，进入jQuery函数，我的alert（newPage）正在工作，但是我的alert（“animated newPage”）不是这样，我知道我不是进入任何jQuery函数。

如果我的术语不正确，请原谅我，我刚刚在过去的3-4天里开始使用Query。

我的变量，newPage和currentPage是包含在主html页面中的div的id。我在同一个外部js文件中使用JavaScript访问和操作它们很好。

我试着用第一个jQuery .append查看我是否需要在我的div id之前加上“＃”来引用字符串。

我已经尝试过将它们包装在jQuery中（function（$）{}）;.将它们留在独立的位置，直接从我的html文件中运行。

来自html文件的工作代码示例。文件头中的设置相同

     $(myContent).animate({ 
         width: '0px' 
        }, mySpeed, function() { 
         // Animation complete. 
        }); 

        $('#contentH4').animate({ 
         width: myLeft 
        }, mySpeed, function() { 
         // Animation complete. 
        }); 

所以，我完全失败了！

Answer 1

首先，您应该只包含jQuery 一次。你链接到的所有文件都有相同的JS代码（除了一个被缩小，另一个有额外的注释）。

这就是你需要：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 

而且，这将有助于看到你定义newPage和currentPage。如果你可以链接到一个理想的演示页面。

而且，这并没有什么：

<script type="text/javascript"> 
    $(document).ready(function() { }); 
</script> 

如果newPage只是一个ID，那么这样的：

$('<p>Test</p>').appendTo(newPage); 

应该是这样的：

$('<p>Test</p>').appendTo('#' + newPage); 

Answer 2

当连接外部JavaScript/jquery文件中，type =“”不必声明。

也让它们加载在所有主体内容的底部以获得更好的加载时间。

Answer 3

我使用嵌套MasterPages的ASP.NET，这对我来说是一个真正的问题。我正在收到document.ready已经失去了所有的时间。我想我需要一个更好的方法，我想到的是创建一个数组来保存我想要调用的所有函数，并在一个document.ready中循环访问该数组，并按顺序调用每个函数加入。如果您使用包含在不同的原因不同点很多外部文件，这将允许你这样做没有任何麻烦：现在

<!-- your external javascript file --> 
<script type="text/javascript"> 

    // create array to hold a list functions to run once 
    var oneTimeFunctions = new Array; 


    // create variable to store first function 
    var test1 = function() { $('<p>Test</p>').append("#" + newPage); }; 

    // add first function to the end of the array 
    oneTimeFunctions[oneTimeFunctions.length] = test1; 


    // create variable to store second function 
    var test2 = function() { 

     alert(newPage); 
     $('<p>Test</p>').appendTo(newPage); 

     $(newPage).animate({ left: '0px' }, 2000, function() { 
      // Animation complete. 
      alert("animated newPage"); 
     }); 

     $(currentPage).animate({ right: '0px' }, 2000, function() { 
      // Animation complete. 
     }); 

    }; 

    // add second function to the end of the array 
    oneTimeFunctions[oneTimeFunctions.length] = test2; 


    // call document.ready only once 
    $(function(){ 

     // call each function that was added to the oneTimeFunctions array 
     $.each(oneTimeFunctions, function(index, func) { func(); }); 

    }); 

</script>

，就像我说的，你可以拆分此为多个外部文件。这只是表明它将如何按顺序处理。你只需要首先创建数组，然后创建你的函数并将它们添加到你的各种外部文件中的数组中，最后，运行通过调用每个函数循环的document.ready部分。