Ujj*_*wal 5 javascript ajax jquery
标签$(document).ready后为什么需要<script>？
如果我们不使用会发生什么$(document).ready？
Tus*_*har 18
$(document).ready是javascript代码,因此它必须在<script>元素中编写并在加载jQuery之后.
如果你不写$(document).ready,你的代码将不会等待DOM完全加载并立即执行javascript代码.
如果您正在使用脚本<head>来使用/操作DOM中的某些元素,那么您将需要ready,否则您将获得null/ undefined.如果您在最后使用脚本<body>,那么在加载所有元素时您将是安全的.
引用来自jQuery Docs的内容
虽然JavaScript提供了在呈现页面时执行代码的加载事件,但在完全接收到所有资产(如图像)之前,不会触发此事件.在大多数情况下,只要完全构造DOM层次结构,就可以运行脚本.传递给.ready()的处理程序保证在DOM准备好后执行,因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置.使用依赖于CSS样式属性值的脚本时,在引用脚本之前引用外部样式表或嵌入样式元素很重要.
如果代码依赖于加载的资源(例如,如果需要图像的维度),则应将代码放在load事件的处理程序中.
例？当然!
在Head没有准备好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
alert($('#myname').val());
</script>
</head>
<body>
<input type="text" value="Tushar" id="myname" />
</body>
</html>在身体的尽头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" value="Tushar" id="myname" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
alert($('#myname').val());
</script>
</body>
</html>准备好了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert($('#myname').val());
});
</script>
</head>
<body>
<input type="text" value="Tushar" id="myname" />
</body>
</html>对于<script>最后<body>,您可以省略ready.
T.J*_*der 12
当我们使用javascript时,为什么
$(document).ready真正需要在<script>标签之后.
事实并非如此.
如果我们不使用,还有什么
$(document).ready
首先,了解人们使用的原因ready:它用于延迟传递给它的函数中的代码,直到jQuery调用该函数,jQuery在认为文档完全加载时会这样做.
script标签内的JavaScript代码会立即运行.如果script标记位于它引用的元素之上,则脚本运行时该元素将不存在:
<script>
$("#foo").show();
</script>
<div id="foo" style="display: none">...</div>
这div将不会显示,因为代码运行时它不存在.所以人们用它ready来推迟他们的代码.
如果您控制script标记的位置,则有更好的方法:只需将script标记放在文档的末尾,就在结束</body>标记之前:
<div id="foo" style="display: none">...</div>
<!-- ... -->
<script>
$("#foo").show();
</script>
</body>
script代码运行时,标记上方定义的所有元素都将存在.没必要ready.
| 归档时间： |
|
| 查看次数： |
5178 次 |
| 最近记录： |