Javascript JQuery：用外部文件中的 html 替换 DIV 内容。完整的例子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5125254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: replace DIV contents with html from an external file. Full example?
提问by gMale
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?
在页面上启用 jQuery 然后使用它用外部文件中的 HTML 文本替换 DIV 的内容的完整代码是什么？
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 examplesand I figured other's might have similar questions. Who better to ask than the SO gurus?
我是 jQuery 的新手，我很想用它来学习它。我有一个网站，我需要替换每个页面上存在的同一个 div（页脚）的内容。幸运的是，这些页面中的每一个都已经导入了相同的头文件。所以我将用一些 jQuery 魔法修改那个头文件！我很难找到完整的例子，我想其他人可能有类似的问题。谁比 SO 大师更适合提问？
Example
例子
Given a basic HTML file Example.html:
给定一个基本的 HTML 文件Example.html：
<html>
<head>
</head>
<body>
<div id="selectedTarget">
Existing content.
</div>
</body>
</html>
And an external file includes/contentSnippet.htmlcontaining a snippet of html:
还有一个includes/contentSnippet.html包含 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?
新Example.html文件会链接正确的 jQuery 库（来自 ./js 目录）并通过 jQuery 替换 div 的内容？
回答by Lee
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.
回答by Eli
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，通常建议将脚本放在结束 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 Tutorials: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery:
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>
To replace the content of the divwith content from another file, this is done with an AJAX request:
div要用另一个文件的内容替换 的内容，这是通过 AJAX 请求完成的：
$('#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
显然有很多东西需要学习，还有更多的方法来控制和优化你的页面。我绝对推荐阅读 jQuery API 文档以了解更多信息：http: //api.jquery.com
