通过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的元素存在之前你试图操纵它们。

如果你不这样做，那么......根本没有什么可操纵的。