在jQuery中设置init函数
这里有一个简单的问题，我想知道如何将这些设置为init（）函数，然后在document.ready上运行该函数。此代码正在一个单独的main.js文件中使用。是否需要从索引页调用它在jQuery中设置init函数,jquery,Jquery,这里有一个简单的问题，我想知道如何将这些设置为init（）函数，然后在document.ready上运行该函数。此代码正在一个单独的main.js文件中使用。是否需要从索引页调用它 $('#main_right_line_one').click(function(){ $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){ $('#main_light_layover').fad
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
$（a_函数）$（文档）的缩写；更多关于
之所以需要$（document）.ready（…）
/$（…）
，是因为像$（“#main_right_line_one”）
这样的jquery选择只会看到在DOM树中执行时出现的元素。然而，
标记内容通常在浏览器遇到它们时立即执行；而
元素通常位于
中。因此，脚本经常会看到不完整的DOM树。现在，由于jQuery的设计，即使$（'#main_right_line_one'）
与任何元素都不匹配，也不会出现错误；而单击
处理程序将绑定到0个元素
这一切都可以通过在$（function（）{…}）
中包装此类代码来避免，这样可以确保其中的任何代码都将在DOM完全初始化后执行（如果已经初始化，则立即执行）
对于$（document.ready（function（）{}）
，有一个类似$（function（）{}）
的速记，原因是只有在DOM树完成后才执行代码是一种必要的模式，几乎每个使用jQuery的页面都会使用它。在索引页面中：
<html>
<head>
<title>Your title</title>
</head>
<body>
<!-- Your HTML here -->
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="main.js"></script>
</body>
然后在下面，您可以这样定义页面对象：
var myPage = (function() {
var that = {};
that.init = function () {
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
}
return that;
})();
那么我会使用get（）来检索div吗？我不确定在初始化之前要加载什么。$（“#main_right_line_one”）是获取div（作为jq对象）的选择器。因此，该div必须已经存在于HTML中。因此，您将希望在init中运行它。而且，要明确的是，上面的代码与$（document.ready）相同（函数（）{
//您的代码放在这里
}）。所以设置这个似乎很简单，我已经这样做了，但是上面的评论“此代码将自动执行。但是请注意，在您可以将这些事件附加到DOM之前，选择器指定的这些元素必须存在于DOM中。”让我感到困惑。jQeury是否不修改已经加载到页面上的元素？我是否需要在jquery中做一些额外的工作，让它识别页面上的div，以便与onclick和fadein/out一起使用？为什么这等同于document.ready？此行为是否特定于传递给$（）或jQuery（）的函数？例如，$（document）.something立即运行，而$（function（）{alert（“hi”）；}等待文档加载，因为参数是一个函数？很好的答案！它建立在这个主题上；它解释了浏览器如何加载资产，并提供了一种更以用户体验为中心的方式来处理加载脚本。这是一个比所选答案好得多的答案。这会增加一大堆混乱的间接寻址。init函数可以正常工作只要是一个过程脚本，你就不会想多次运行该方法。main.js脚本是正文中的最后一项，因此它甚至不需要等待文档准备就绪。作为一个额外的奖励，将没有额外的全局myPage变量，垃圾收集器可以清理所有不再需要的对象。
$(document).ready(function() {
myPage.init();
});
var myPage = (function() {
var that = {};
that.init = function () {
$('#main_right_line_one').click(function(){
$('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_light_layover').fadeIn('slow');
});
});
$('#main_right_line_two').click(function(){
$('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
$('#main_regular_layover').fadeIn('slow');
});
});
$('#main_right_line_three').click(function(){
$('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
$('#main_deep_layover').fadeIn('slow');
});
});
}
return that;
})();