我将所有JS作为外部文件包含在页面的最底部.在这些文件中,我有几个像这样定义的方法,我从ready事件中调用它:
var SomeNamepsace = {};
SomeNamepsace.firstMethod = function () {
// do something
};
SomeNamepsace.secondMethod = function () {
// do something else
};
$(document).ready(function () {
SomeNamepsace.firstMethod();
SomeNamepsace.secondMethod();
});
然而,当我删除ready函数并直接调用方法时,一切都运行相同,但执行速度明显更快 - 在一个非常基本的文件上几乎快一秒!由于此时应该加载文档(因为所有标记都出现在脚本标记之前),还有什么理由仍然使用ready事件吗？
将JS放在</body>标记上方可以提高感知加载时间,因为浏览器在开始呈现页面之前不必读取和解析所有JS.
但它有另一个好处,不是吗？我们不需要包装JS,$(document).ready(function() { ... })因为所有元素都已经在JS之上,因此可以进行操作.
是否$(document).ready有必要确保DOM已完全加载并准备好进行操作？
执行时间之间有什么区别吗？一种方法比另一种方法更快吗？
我们可以<script src="..." />在页面底部链接我们的外部JS文件(),还是需要在标题中？
在所有文档中,我看到<title>头部下方的jQuery脚本标签,但是当我进入其他一些站点时(初始化模板是我头顶的第一个),它们将它放入正文的底部(你知道,就在此之前</body>).
这两个中的哪一个是对的？
如果我在我的所有页面HTML下面加载我的jQuery脚本,我还需要等待$(document).ready能够使用jQuery来查找页面中的元素吗？
我遇到了一段看起来像这样的代码:
jQuery(function($) {
$('#saySomething').click(function() {
alert('something');
});
});
我不太清楚.为什么我不能简单地这样做:
$('#saySomething').click(function() {
alert('saySomething');
});
试着在这里使用datepicker:http://bootstrap-datepicker.readthedocs.org/en/latest/
我对jquery还不是很有经验,但我必须遗漏一些东西,因为它永远不会有效.这是我的HTML,所有的CSS和JS文件都在各自的位置,没有找不到文件的问题.我确定我错过了一些简单的东西,但我没有看到它,直接从提供的示例中复制和粘贴.让我知道你的想法.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<form id="main">
<input type="text">
</form>
<script>
$('#main input').datepicker({
});
</script>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</body>
</html>
在jQuery的$(document).ready()上执行JavaScript函数并将其包含在正文末尾的脚本标记中的HTML中有什么区别？
谢谢,
DLiKS
每次我第一次加载页面时我的脚本都没有加载,我需要刷新页面至少3次才能运行.如何在没有页面刷新的情况下运行脚本？这个特殊的脚本在BABEL中.
'use strict';
var deg = 0;
var index = 0;
$('#' + index).css('opacity', '1');
$('.navbar').contextmenu(function () {
return false;
});
$('.navbar').on('mousewheel', function (e) {
var move = -60;
var nextIndex = nextIndex = (index + 1) % 6;
if (e.originalEvent.wheelDelta / 120 <= 0) {
// wheel up
move = 60;
nextIndex = index -1 < 0 ? 5 : index - 1;
}
$('.scroll-list').css('transform', 'rotateX(' + (deg + move) + 'deg)');
$('#' + index).css('opacity', '0.01');
$('#' + nextIndex).css('opacity', …