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

发布于 2024-10-19 05:30:52 字数 831 浏览 2 评论 0原文

问题

在页面上启用 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 的内容？

原文

Question

What's the full code to enable jQuery on a page and then use it to replace the contents of a DIV with HTML text from an external file?

Background

I'm brand new to jQuery and I'm eager to work with it so I can learn it. I have a site where I need to replace the contents of the same div (a footer) that exists on every page. Fortunately, each of these pages already imports the same header file. So I'm going to modify that header file with some jQuery magic! I'm having trouble finding full examples and I figured other's might have similar questions. Who better to ask than the SO gurus?

Example

Given a basic HTML file Example.html:

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

And an external file includes/contentSnippet.html containing a snippet of html:

<p>
    Hello World!
</p>

What would the new Example.htmlfile be that would link the proper jQuery libraries (from the ./js directory) and replace the div's contents via jQuery?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌化 2024-10-26 05:30:52

好吧，我会咬...

<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 链接了 jquery 库（即允许和鼓励）
您可以找到 jQuery 的 load() 函数的文档就在这里。

ok, I'll bite...

<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>

Notes:

I've linked the jquery libraries directly from jQuery's public CDN (which is allowed and encouraged)
You can find the documentation for jQuery's load() function right here.

回复收藏 0 原文

香橙ぽ 2024-10-26 05:30:52

要在页面上使用 jQuery，通常建议将脚本放置在结束 body 标记之前，以防止页面的其余内容被阻止加载。还建议使用 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

To use jQuery on your page, it's generally recommended to place the script before the closing body tag to keep the rest of the page's content from being blocked to load. It's also recommended to use the code from the Google CDN for various benefits
Here are some helpful links: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/ and http://encosia.com/2010/09/15/6953-reasons-why-i-still-let-google-host-jquery-for-me/.

jQuery Tutorials: 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>

To replace the content of the div with content from another file, this is done with an AJAX request:

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

Obviously there is a lot to learn and much more ways to control and optimize your pages. I would definitely recommend reading the jQuery API documentation to learn more: http://api.jquery.com

回复收藏 0 原文

~没有更多了~