,我需要一些理解
有人可以告诉我使用,我需要一些理解
$(function() {
$("#tab_1").click(function() {
$('.loadContent').load('page1.html');
});
});
和
$("#tab_2").click(function() {
$('.loadContent').load('page2.html');
});
的区别他们都获得相同的结果,我不知道哪些是最佳做法。谢谢
$(function() {})
被称为DOM就绪。当你想访问一个元素时,例如#tab_2
,你应该等待浏览器成功加载DOM。
在你的第二个例子,如果你把它放在head
部分(您想访问你的元素之前)的代码将无法正常工作。
这个例子将不能工作: 因为DOM还没有准备好,执行脚本之前#elem
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#elem').on('click', function() {
$(this).css('background', 'green');
});
</script>
<div id="elem"></div>
这个例子将工作:因为DOM是准备好了,执行脚本后#elem
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="elem"></div>
<script>
$('#elem').on('click', function() {
$(this).css('background', 'green');
});
</script>
SO,您可以:
- 把你的
script
之前</body>
确保DOM准备好访问元素。 - 将您的
script
放入<head>
部分,并将您的所有代码包装在$(function() { });
之内。
在第二种方式中,第一个例子是:
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$('#elem').on('click', function() {
$(this).css('background', 'green');
});
});
</script>
<div id="elem"></div>
这工作正常,因为里面$(function() {})
脚本,会后DOM准备好执行, 所以定义了#elem
。
参考:http ://learn.jquery.com/using-jquery-core/document-ready/ – Christophe 2014-11-05 04:02:08
考虑再次使用函数(){}包装器再次执行第一个示例,以查找另一个“将工作”,并直接回答OP。 – mainstreetmark 2014-11-05 04:07:36
等待..如果我已经声明$(document).ready(function(){});在我的js文件中呢?因为它已经在等待所有要加载的东西了,所以我可以跳过$(function(){}) ;直接去$(“#tab_1”)。click(function(){('。loadContent')。load('page1.html'); }); right?@ROX – Devon 2014-11-05 05:38:15
你可能想使用函数loadpage1(){这样你也可以在其他事件上调用函数。这就是为什么你会在那里使用一个函数。通常我会把它放在一个$(document).read(function(){function,如果你把它放在标题中,否则你应该没问题。
我认为第一个最常用的是document.ready(函数等等...所以你在页面加载完成时运行一个函数,但是我不完全确定,这里不是专家 – 2014-11-05 04:01:33