jquery - 通过AJAX加载内联javascript

Question

我已经把一个快速的原型拼凑起来试图建立一些关于内联JavaScript在加载AJAX时可以做什么的非常基本的事实：

的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）我使用alert而不是console.log因为在' console.log中调用时，控制台是undefined 。

真理（？）：

$(document).ready()不会将'加载'HTML视为新文档，或重读整个DOM树，包括加载的HTML，在AJAX加载的内容中毫无意义
“加载”HTML中包含的JavaScript可以影响现有DOM节点的样式
可以在“加载”HTML中成功使用jQuery库来实现现有DOM节点的样式
一个人不能使用“加载”里面的萤火虫 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 个解决方案

解决方案1
2 已采纳 2010-06-01 22:50:07

jquery - 通过AJAX加载内联javascript

问题描述

的index.html

装载逐ajax.html

笔记：

真理（？）：

1 个解决方案

解决方案1 2 已采纳 2010-06-01 22:50:07

解决方案1
2 已采纳 2010-06-01 22:50:07