Question

问题

在页面上启用jQuery然后用它来用外部文件中的HTML文本替换DIV内容的完整代码是什么？

背景

我是jQuery的新手，我很想与之合作，所以我可以学习它。我有一个网站，我需要替换每个页面上存在的相同div（页脚）的内容。幸运的是，每个页面都已导入相同的头文件。所以我要用一些jQuery魔法来修改那个头文件！我无法找到 完整示例 ，我认为其他人可能会遇到类似的问题。谁比SO大师更好问？

示例

给定基本HTML文件Example.html：

<html>
    <head>
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

包含html片段的外部文件includes/contentSnippet.html：

<p>
    Hello World!
</p>

新的Example.html文件会链接正确的jQuery库（来自./js目录）并通过jQuery替换div的内容？

Answer 1

好吧，我会咬人......

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('#selectedTarget').load('includes/contentSnippet.html');
           });
        </script>   
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

注意：

我直接从jQuery的公共CDN（allowed and encouraged）
您可以找到jQuery的load()函数right here。

Answer 2

要在页面上使用jQuery，通常建议将脚本放在结束正文标记之前，以防止页面内容的其余部分被阻止加载。还建议您使用Google CDN中的代码获得各种好处以下是一些有用的链接：http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/和http://encosia.com/2010/09/15/6953-reasons-why-i-still-let-google-host-jquery-for-me/。

jQuery教程：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    // your script will go here
</script>
</body>

要用另一个文件中的内容替换div的内容，可以使用AJAX请求来完成：

$('#selectedTarget').load('includes/contentSnippet.html');

显然，有很多东西需要学习，还有更多方法可以控制和优化您的网页。我肯定会建议您阅读jQuery API文档以了解更多信息：http://api.jquery.com

JQuery：用外部文件中的html替换DIV内容。完整的例子？

2 个答案: