HTML5 представляет много новых функций и улучшений, одной из которых является семантика. HTML5 добавляет новые элементы для улучшения семантики. Сейчас мы используем только 2, заголовок и нижний колонтитул. Тег <Header> определяет заголовок (информация о введении) документа, а тег <liteer> определяет нижний колонтитул раздела или документа. Как правило, этот элемент будет содержать имя создателя, дату создания документа и/или контактную информацию.
[Семантические теги предоставляют значимую информацию в HTML, а не только определяют визуальные эффекты. ]
Лучшее место для размещения кода JavaScriptСуществует причина, по которой мы размещаем код JavaScript после всех содержимого страницы перед тегом </body>, а не в области <Head> </head>.
Как правило, браузеры загружают и визуют содержание сверху вниз. Если код JavaScript помещен в область головки, содержимое документа HTML не будет загружено до тех пор, пока не будет загружен весь код JavaScript. Фактически, вся загрузка и рендеринг блокируются, если браузер загружает код JavaScript на странице. Вот почему мы поместили код JavaScript в конце документа, чтобы мы могли обеспечить более высокую производительность.
При переводе этой книги последняя версия JQUERY составляет 1.7 (оригинальные слова: AtThetime для написания этой книги, версия TheLatest JQuery - 1.4.4. У JQuery есть версия MIN и версии разработки, вы можете выбрать, как вам нравится). Вот почему имя файла jQuery в нашем примере кода-jQuery-1.7.min.js. Этот номер версии может не работать по мере использования, но использование одинаково, если у JQUERY нет основных модификаций, чтобы новая версия больше не была обратной.
Запустите наш код, как только страница будет готоваМы должны убедиться, что страница готова перед запуском нашего кода JavaScript. В противном случае мы получим ошибку, когда попытаемся получить доступ к элементам, которые не загружаются. JQuery предоставляет нам метод, чтобы гарантировать, что страница загружена. Код заключается в следующем:
jquery (document) .ready (function () {
// codehere.
});
На самом деле, нам просто нужно написать это:
$ (function () {
// codehere.
});
Этот $ Tag является аббревиатурой jQuery. Когда мы называем (слово - это значение вызова, Zhuantability) $ (что -то), мы на самом деле называем JQERY (что -то).
$ (function_callback) является еще одной аббревиатурой для BethipEvent.
Это то же самое, что и следующий код:
$ (document) .ready (function_callback);
Точно так же, как и следующее:
jquery (ducment) .ready (function_callbak);
Контрольный опрос1. Какое место наиболее подходит для размещения кода JavaScript?
а Перед тегом <head>
беременный Вставьте в середину элемента <головы> </head>.
в После тега <Body>
d. </body> перед тегом
Создать элементы игры Pingpong
Мы готовы создать игру Pingpong.
Перемещайтесь
1. Мы продолжим с нашим примером установки jQuery и откроем индекс. HTML в редакторе.
2. Затем используйте узел DIV в теле, чтобы создать игровую платформу, с 2 ударами и мячом на игровой платформе:
<divid = "Game">
<divid = "Playground">
<divid = "paddlea" class = "paddle"> </div>
<divid = "paddleb" class = "Paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3. Теперь мы создали игровые объекты и теперь даем им стили. Поместите код в элемент головы:
<style>
#playground {
Фон:#e0ffe0;
Ширина: 400px;
Высота: 200px;
позиция: относительно;
переполнение: скрыто;
}
#мяч{
Фон: #FBB;
позиция: абсолютно;
Ширина: 20px;
Высота: 20px;
Слева: 150px;
Верх: 100px;
граница радий: 10px;
}
.paddle {
Фон: #BBF;
Слева: 50px;
Верх: 70px;
позиция: абсолютно;
Ширина: 30px;
Высота: 70px;
}
#paddleb {
Слева: 320px;
}
</style>
4. В последней части мы размещаем логику JavaScript за ссылкой jQuery. Мы пишем его в отдельный файл, потому что наш код станет больше и больше. Поэтому нам нужно создать папку с именем html5/"> html5games.pingpong.js.
5. После того, как мы подготовили файлы JavaScript, нам нужно подключить их к нашему HTML -файлу. Поместите следующий код перед тегом </body> файла index.html:
<scriptsrc = "js/jquery-1.7.min.js"> </script>
<scriptsrc = "js/html5games.pingpong.js"> </script>
[Дружелюбный совет переводчика: попробуйте
<scriptsrc = "js/jquery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
Вы обнаружите, что написание в соответствии со спецификациями будет избежать большого количества проблем]
6. Мы помещаем игровой логику в html5games.pingpong.js. Вот наша единственная логика сейчас, инициализируя ракетку:
// codeInside $ (function () {} whillrunafterthedomisloadedand
готовый
$ (function () {
$ ("#paddleb"). CSS ("top", "20px");
$ ("#paddlea"). CSS ("top", "60px");
});
7. Теперь давайте проверим наши результаты в браузере. Откройте файл index.html в браузере, мы должны увидеть скриншот, похожий на следующий скриншот:
что случилось?В нашей игре есть 2 ракетки и 1 мяч. Мы также инициализировали положение 2 ракетки, используя jQuery.
[Это все сегодня, и следующая часть посвящена функции селектора jQuery и CSS. Если у вас есть какие -либо ошибки или вопросы, оставьте мне сообщение]
Видеть ваши комментарии - моя самая большая мотивация!