的index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>
    <body>
            <script type="text/javascript">
                    $('p').css('color','white');
                    alert($('p').css('color'));
                    // DISPLAYS FIRST but is "undefined"

                    $(document).ready(function(){
                        $('#ajax-loaded-content-wrapper').load('loaded-by-ajax.html', function(){
                            $('p').css('color','grey');
                            alert($('p').css('color'));
                            // DISPLAYS LAST (as expected)
                        });
                        $('p').css('color','purple');
                        alert($('p').css('color'));
                        // DISPLAYS SECOND
                    });
            </script>
            <p>Content not loaded by ajax</p>
            <div id="ajax-loaded-content-wrapper">
            </div>
    </body>
</html>

加载逐ajax.html

<p>Some content loaded by ajax</p>

<script type="text/javascript">

    $('p').css('color','yellow');
    alert($('p').css('color'));
    // DISPLAYS THIRD

    $(document).ready(function(){
        $('p').css('color','pink');
        alert($('p').css('color'));
        // DISPLAYS FOURTH
    });

</script>

<p>Some content loaded by ajax</p>

<script type="text/javascript">

    $(document).ready(function(){
        $('p').css('color','blue');
        alert($('p').css('color'));
        // DISPLAYS FIFTH
    });

    $('p').css('color','green');
    alert($('p').css('color'));
    // DISPLAYS SIX

</script>

<p>Some content loaded by ajax</p>

说明：

a）以上所有内容（第一个除外）都成功更改了所有段落的颜色（在Firefox 3.6.3中）。
b）在“加载”HTML中调用时，我使用了alert代替console.log作为控制台undefined。

真理（？）：

$(document).ready()不会将“已加载”的HTML视为新文档，或重新读取整个DOM树，包括加载的HTML，在AJAX加载的内容中毫无意义
“加载”HTML中包含的JavaScript可以影响现有DOM节点的样式
可以在“加载”HTML中成功使用jQuery库来实现现有DOM节点的样式
一个人无法使用firebug内部'加载'HTML可以影响现有的DOM（通过注释a证明）

我是否正确地从测试中得出这些“真相”（测试有效性）？
如果没有，您将如何测试这些？

Answer 1

我们可以将其简化为一个更简单的事实：所有.load()函数都会向您的网页添加内容。

关于＃1，文档已经加载，所以不，你没有加载一个全新的文档。您只是在已经存在的文档中间添加内容。但是，节点确实被添加到您要求添加它们的DOM中。这不需要“重新读取整个DOM树”，但效果是一样的。

你在＃2上是正确的：你注入页面的任何JavaScript都会以任何方式影响页面上的任何内容，包括它的样式。新加载的脚本无法知道之前有哪些元素，哪些元素是新的;它只是看到当前存在的DOM。

你在＃3上同样正确。 jQuery在页面上，新脚本不知道它是单独加载的。这只是在您的页面上执行的代码。

＃4你错了。 Firebug是分析页面当前内容的绝佳工具，无论它是如何实现的。您将始终在Firebug中看到当前的DOM，它甚至会突出显示（黄色）任何实时更改。

jquery - 通过AJAX加载内联javascript

的index.html

加载逐ajax.html

说明：

真理（？）：

1 个答案: