Манипуляция DOM по порядку выполнения JavaScript

Question

У меня следующий код и результаты прилагаются в конце. Я понимаю, что события загрузки JQuery.ready и JQuery.Window запускаются после создания DOM, чтобы он мог манипулировать DOM, но не первой функцией для изменения фона Джона.

Мои вопросы:

1. Фон Джона не изменился на желтый, потому что JavaScript обратно реферирование по своей природе и не может найти элемент с идентификатором имя1 в тот момент, когда сценарий запускается?

2. Если мне нужно запустить первую функцию для изменения фона Джона, следует ли использовать эту функцию после тегов DIV?

Blockquote

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

Blockquote

Answer 1

HTML читается браузером сверху вниз. Итак:

<script> 

Это выполняется немедленно: (но пока ничего не было, изменений не будет). Для дальнейшего объяснения они называются немедленными исполняемыми функциями (IEF) ==>(function(){ ... })();, но в этом случае бессмысленно иметь это, потому что код будет выполняться немедленно в любом случае.

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

это на самом деле ярлык в JQuery для $(document).ready(...); Это считают не такая хорошая практика, потому что это не читаемыми.

$(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 является событийным языком, а преимущество состоит в том, что вы можете добавить стольких слушателей к событиям, которые вам нужны, поэтому добавление прослушивателя событий в загружаемый контент DOM будет - почти всегда лучшим подходом.Это также лучшая практика для загрузки скриптов всегда в конце концов, таким образом, вы позволяете пользователю получить содержание и стили, а затем функциональность пинки в

Как я написал бы код:.

<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

При манипулировании DOM с помощью JavaScript (или Javascri pt library или framework) вы должны принести те элементы DOM, которые вы хотите манипулировать, чтобы существовать до вы пытаетесь ими манипулировать.

Если вы этого не сделаете, то ... там просто нечего манипулировать.