在jQuery中设置init函数

这里只是一个简单的问题，我想知道如何将它们设置为init（）函数，然后让函数在document.ready上运行。此代码正在用于单独的main.js文件中。它是否需要从索引页面调用？在jQuery中设置init函数

$('#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'); 
    }); 
});

任何帮助表示赞赏。我真的想把自己的头包裹起来，但是我似乎无法找到任何可以解释init（）的好教程来完善我的特定代码。

来源

2013-07-30 user2635811

http://api.jquery.com/ready/ –

所以我会用get（）来检索div吗？我不确定我将在加载之前加载哪些内容。 – user2635811

$（“＃main_right_line_one”）是获取div的选择器（作为jq对象）。所以，这个div必须已经存在于你的HTML中。因此，你会想在init中运行这个。 – FlavorScape

不需要特殊的“调用”，将它包含在<script src="yourfile.js"></script>的页面中，只需将代码包装如下，以确保它在dom准备就绪（和存在的元素）后执行。

$(function() { 
    // your code goes here 

});

$(a_function)是短期的$(document).ready(a_function);更多关于ready handlers in the documentation。

为什么需要在所有的$(document).ready(...)/$(...)的原因是jQuery选择器像$('#main_right_line_one')只看到那些存在于DOM树的执行时间元素。但是，<script>标签内容通常在浏览器遇到时立即执行;和<script>元素通常位于<head>。因此脚本经常会看到一个不完整的DOM树。现在，由于jQuery的设计，即使$('#main_right_line_one')与任何元素都不匹配，仍然没有错误;并且click处理程序将被绑定到0个元素。

这一切都可以通过在$(function() { ... })中包装那种代码来避免，这可以确保在DOM完全初始化之后（或者如果它已经被初始化的话，立即执行它）中的任何代码都将被执行。

的原因，为什么没有像$(function() {})用于$(document).ready(function() {})的简写是执行DOM树已经完成后才代码是，几乎每一个单页使用jQuery的会使用这样的必要方式。

来源

2013-07-30 21:04:03

，并且清楚地表明，上面和$（document）.ready（function（）{''//你的代码在这里''}）;''是一样的。 –

所以看起来很简单，我已经完成了，但是上面的注释“这段代码会自动执行。但请注意，在您将这些事件附加到DOM之前，您的选择器指定的这些元素必须存在于DOM中他们。”令我困惑。jQeury是否不修改已经加载到页面上的元素？我是否需要在jquery中做一些额外的事情才能使其识别我的页面上的div以用于onclick和fadein/out？ – user2635811

编辑 - Nvm，现在页面正常工作！非常感谢！ – user2635811

在你的索引页：

<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>

你说得对，它是很好的做法来包装所有的代码中的对象，并调用与init()功能。所以在你main.js，你可以有：

$(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; 

})();

来源

2013-07-30 21:09:30

这是一个好得多的选择 –

这增加了一大堆混淆的间接性，init函数可以很好地工作，只是一个过程脚本，因为你不会真的想多次运行该方法。 main.js脚本是主体中的最后一个项目，所以它甚至不需要等待文档准备就绪。作为奖励，不会有额外的全局myPage变量，并且垃圾回收器可以清理所有不再需要的对象。 –

在jQuery中设置init函数

回答

相关问题