通過JavaScript執行順序操作DOM

Question

我有以下代碼，並在結尾處附上結果。我知道JQuery.ready和JQuery.Window加載事件是在DOM創建後運行的，所以它可以操作DOM，但不能改變John的背景。

我的問題是：

1. 約翰的背景並沒有變成黃色，因爲JavaScript是自然向後引用，它不能在該點時，腳本定位與ID名1元素運行？

2. 如果我必須運行第一個函數來改變John的背景，那麼這個函數應該在DIV標籤之後使用嗎？

塊引用

<script> 
    (function() { 
     $('#name1').css('background-color', 'yellow'); 
    })(); 

    $(function() { 
     $('#name2').css('background-color', 'red'); 
    }); 

    $(window).load((function() { 
     $('#name3').css('background-color', 'blue'); 
    })); 
</script> 

<div id="name1">John</div> 
<div id="name2">Mary</div> 
<div id="name3">Jacob</div> 
<div id="name4">James</div> 

<script> 
    (function() { 
     $('#name4').css('background-color', 'yellow'); 
    })(); 
</script> 

塊引用

Answer 1

HTML由瀏覽器從上到下讀取。所以：

<script> 

這會立即執行:(但因爲什麼都沒有，所以不會有變化）。爲了進一步解釋，這些被稱爲立即執行函數（IEF）==>(function(){ ... })();，但在這種情況下是毫無意義的，因爲代碼將立即執行。

(function() { 
     $('#name1').css('background-color', 'yellow'); 
    })(); 

這其實是$(document).ready(...);在jQuery的快捷方式，是因爲它不是爲可讀認爲不是一個好做法。

$(function() { 
     $('#name2').css('background-color', 'red'); 
    }); 

這是一個窗口加載（這是不完全相同的）。

$(window).load((function() { 
     $('#name3').css('background-color', 'blue'); 
    })); 
</script> 

<div id="name1">John</div> 
<div id="name2">Mary</div> 
<div id="name3">Jacob</div> 
<div id="name4">James</div> 

<script> 

這也立即執行（隱含排放）：在這種情況下，它會工作，但它是不是這樣做的最佳做法。

(function() { 
     $('#name4').css('background-color', 'yellow'); 
    })(); 
</script> 

，如果你想了解更多的的document.ready和window.load之間的差異，看this stackoverflow question

JavaScript是一種事件驅動的語言，而好處是，你可以添加儘可能多的聽衆根據需要將事件添加到事件監聽器中，這將是最重要的方法。這也是在最後總是加載腳本最好的做法，這樣，你讓用戶獲取內容和風格，然後再功能踢

我怎麼會寫代碼：

<div id="name1">John</div> 
<div id="name2">Mary</div> 
<div id="name3">Jacob</div> 
<div id="name4">James</div> 

<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
     // DOM fully loaded and parsed 
     $('#name1').css('background-color', 'yellow'); 
     $('#name2').css('background-color', 'red'); 
     $('#name3').css('background-color', 'blue'); 
     $('#name4').css('background-color', 'yellow'); 
    }); 
</script> 

雖然我不會使用jQuery：P。我甚至沒有使用過JavaScript，只有很好的舊CSS;）

Answer 2

當操縱通過Javascript的DOM（或Javascri pt圖書館或框架）你必須把你想操縱的DOM的元素存在之前你試圖操縱它們。

如果你不這樣做，那麼......根本沒有什麼可操縱的。