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追加只是一个简单的测试，看看我是否可以做一些简单的事情。这都包含在if语句中。我没有收到任何错误，代码正在通过第一个jQuery准备好，进入jQuery函数，我的警报（newPage）正在工作，但我的警报（“动画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

我将ASP.NET与嵌套的MasterPages一起使用，这对我来说是一个真正的问题。我得到了文件。已经丢失了。我想我需要一个更好的方法，我想出的是创建一个数组来保存我想要调用的所有函数，并在一个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部分，循环调用每个函数。

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

3 个答案: