在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函數

回答

相關問題