Люди здесь публикуют много примеров использования функции DOM для jQuery - но они не смогли упомянуть или продемонстрировать что для его использования вам необходимо включить jQuery.
Вы можете использовать JavaScript, чтобы выполнить то, что вы хотите - но техника варьируется в разных браузерах, а jQuery всегда отлично справляется с нормализацией этих различий по всем направлениям - лично я человек jQuery. Наверное, всегда будет :)
Within the end of your HTML document's <head>, include the jQuery library, and then your code :)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
console.log("DOM is Ready! Images haven't finished loading yet!");
});
</script>
Использование функции jQuery .ready() происходит в нескольких формах. Лично мне нравится вышеупомянутый метод. Эти двое ниже, по-видимому, являются наиболее официально оправданными.
$(document).ready(function(){ console.log("DOM Ready!"); });
$(function(){ console.log("DOM Ready!"); });
Документация jQuery на .ready() гласит:
В то время как JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается до тех пор, пока все активы, такие как изображения, не будут полностью получены. В большинстве случаев сценарий можно запустить, как только иерархия DOM будет полностью построена. Обработчик, переданный в .ready (), должен быть выполнен после того, как DOM готов, поэтому это обычно лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery. При использовании скриптов, которые полагаются на значение свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылкой на сценарии.
I highlighted that quote from the docs for you, as you mentioned that you want the CSS to load first. By the looks of things, you just need to make sure that your <link rel="stylesheet" href="style.css" /> tags are placed in the <head> section above your jQuery code :)
Счастливое кодирование! //Гнаться
jQuery.com