$（document）.ready（function（）{}以及它如何转换为HTML
[英]$(document).ready(function (){} and how it translates to HTML
问题描述
I am newly learning code and have encountered some issues with javascript/jquery and how it is running/being displayed on my HTML page. 
我正在新学习代码，遇到了javascript / jquery的一些问题，以及它如何在我的HTML页面上运行/显示。
At this point in time I am running drills in CodePen and have run into an issue where my HTML heading is not being displayed on my page load but my javascript is running as expected. 在这个时候我在CodePen中运行钻取并遇到一个问题，我的HTML标题没有显示在我的页面加载上但我的javascript正在按预期运行。 My goal is to have my displayed and the javascript running below it and I suspect it has something to do with my usage of the $(document).ready method. 我的目标是让我的显示和javascript在它下面运行，我怀疑它与我使用$(document).ready方法有关。
Is there something I am missing or misunderstanding in my code that when my page loads the h2 is not showing up? 在我的代码中是否存在我遗漏或误解的情况，当我的页面加载时，h2没有出现？
$(document).ready(function() { for (x = 1; x < 100; x++) { if (x % 3 === 0 && x % 5 === 0) { document.write("FizzBang" + '<br/>') } else if (x % 3 === 0) { document.write("Fizz" + '<br/>') } else if (x % 5 === 0) { document.write("Bang" + '<br/>') } else { document.write(x + '<br/>') } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Challenge 2</h2>
4 个解决方案
解决方案1
2 2019-08-09 00:48:32
document.write is a nasty bugger. document.write是一个讨厌的bugger。 It will overwrite any content in the document. 它将覆盖文档中的任何内容。
Forget it exists. 忘了它存在。 Don't use it. 不要使用它。
If you want to do debugging use console.log() and open the console (F12 in most browsers). 如果要进行调试，请使用console.log()并打开控制台（在大多数浏览器中为F12）。
解决方案2
1 2019-08-09 01:42:08
$(document).ready(func) or the shortcut $(func) as well as the native event document.addEventListener('DOMContentLoaded', func) run after the document has been parsed and the DOM is ready. $(document).ready(func)或快捷方式$(func)以及本机事件document.addEventListener('DOMContentLoaded', func)在解析文档并且DOM准备就绪后运行。 The old style document.write() which is still supported writes directly into the document's parsing stream while it is parsed . 仍然支持的旧样式document.write()在解析时直接写入文档的解析流。 Then the document's state is automatically closed. 然后文档的状态自动关闭。 When you start to write to the document after paring has been finished, the document is implicitly reopened and the content is cleared. 在完成配对后开始写入文档时，将隐式重新打开文档并清除内容。
The common concept of dynamic changing document's content is DOM manipulation . 动态更改文档内容的常见概念是DOM操作 。
See also: Introduction to the DOM (MDN) 另请参见： DOM简介（MDN）
解决方案3
0 2019-08-09 01:52:06
If you want the same result with the heading this can help 如果您想要与标题相同的结果，这可以提供帮助
<h2>Challenge 2</h2>
<div id="test"></div>
and js part 和js部分
for (x = 1; x < 100; x++) {
if (x % 3 === 0 && x % 5 === 0) {
document.getElementById("test").innerHTML+="FizzBang" + '<br/>';
} else if (x % 3 === 0) {
document.getElementById("test").innerHTML+="Fizz" + '<br/>';
} else if (x % 5 === 0) {
document.getElementById("test").innerHTML+="Bang" + '<br/>';
} else {
document.getElementById("test").innerHTML+=x + '<br/>';
}
}
Best regards. 最好的祝福。
解决方案4
0 2019-08-09 02:58:04
<html>
<head>
<meta charset="UTF-8">
<title>Challenge 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
</body>
<script type="text/javascript">
$(window).on('load', function() { // makes sure the whole site is loaded
$( "body" ).prepend( '<div id="preloader"><div id="status"><h1>Challenge 2</h1></div></div>' );
for (x = 1; x < 100; x++) {
if (x % 3 === 0 && x % 5 === 0) {
document.getElementById("test").innerHTML+="FizzBang" + '<br/>';
} else if (x % 3 === 0) {
document.getElementById("test").innerHTML+="Fizz" + '<br/>';
} else if (x % 5 === 0) {
document.getElementById("test").innerHTML+="Bang" + '<br/>';
} else {
document.getElementById("test").innerHTML+=x + '<br/>';
}
}
});
</script>
</html>
Perhaps you could try this? 也许你可以试试这个？ you could also switch $(window).on('load', function() with $(document).ready(function() since my understanding for this case is that, they pretty much do the same thing just one is earlier another is later 你也可以切换$(window).on('load', function()和$(document).ready(function()因为我对这种情况的理解是，他们几乎做同样的事情只是一个是早先另一个是晚些时候
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.