jQuery ч.1: jQuery(document).ready() | Ruby on Rails c нуля!
августа 7, 2011 | Published in ClientSide, JavaScript, jQuery | 5 Comments
jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.
jQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:
- Обеспечить кроссбраузерность вашего JavaScript кода
- Сократить количество кода, который пишется пользователем за счет готовых решений
- Предоставить программисту большой и удобный набор селекторов для выборки элементов страницы
- Предоставить программисту набор стандартных визуальных эффектов для оживления вебстраниц
Для того, чтобы начать использовать jQuery вам достаточно скачать jQuery c .
<script src="jquery-1.6.2.min.js"></script>
Внимание! Подключение jQuery должно происходить после подключения файлов стилей, но перед подключением или непосредственной ставкой в станицу остального JavaScript кода.
В этой простой статье мы поговорим о функции jQuery(document).ready(). Эта функция выполняет свое содержимое (внутренние функции) при загрузке DOM (объектной модели документа) вашей HTML-страницы. Можно сказать, что эта функция аналогична функции Document.onload, но с той лишь разницей, что может быть использована множество раз. По-сути, каждый ваш скрипт должен быть заключен в функцию jQuery(document).ready(){…}. Это необходимо для того, чтобы ваш код исполнялся только после того, как была построена объектная модель документа, в противном случае работать ваш javascript будет некоректно.
Для функции jQuery() существует синоним — функция $(), которую чаще всего и использую благодаря краткости, а для функции jQuery(document).ready() также существуют синонимы:
jQuery(function())
$(function())
Давайте рассмотрим простой пример использования этих функций:
<!DOCTYPE html>
<html>
<head>
<title>RubyDev.ru</title>
<style>
div.mega-div{width:200px;margin: 0 auto;background:#c00; border:5px solid #922;padding:20px;color:#fff;font-weight:bold}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
$('div.mega-div').text("RubyDev.ru!")
})
</script>
</head>
<body>
<div>Some text</div>
</body>
</html>
Здесь мы при помощи селектора «div.
mega-div» обратились к объекту DOM — div’у со стилем mega-div и поменяли содержащийся в нем текст «Some text» на более осмысленное — «RubyDev.ru!», все это произошло при событии загрузки документа, а значит, пользователь так и не успел заметить подмены содержимого страницы!
В следующей статье мы рассмотрим более сложные и интересные примеры работы с jQuery.
Tags: javascript, jQuery
Feed Trackback Address
Leave a Response
Загрузка содержимого с помощью jQuery. Видеоруководство по созданию адаптивного веб-интерфейса
Из курса: Создание адаптивного веб-интерфейса
Загрузка контента с помощью jQuery
“
Теперь, когда наш сценарий готовности документа правильно работает внутри нашего файла JavaScript.
Теперь мы можем начать загрузку нашего контента. Итак, вернемся к design.js. Помимо функции готовности документа, давайте сделаем несколько возвратов и создадим нашу собственную пользовательскую функцию. Итак, мы наберем функциональное пространство. Мы назовем этого героя нагрузки. Набор скобок, набор скобок. Давайте разделим это. Теперь внутри этой функции мы собираемся использовать функцию загрузки JQuery для загрузки содержимого из HTML в наш div с идентификатором героя. Итак, внутри этой функции нам нужно нацелить div с идентификатором героя, а затем использовать функцию загрузки JQuery. Итак, мы напечатаем знак доллара, начальную скобку, галочку, первый строковый литерал, знак фунта, герой. Конец скобок.загрузить. Начальная скобка, строковый литерал. Мы собираемся указать на файл содержимого. Итак, content/hero_content_large.html. И строковый литерал, и скобки, и точка с запятой. Теперь, когда наша пользовательская функция создана, нам нужно вызвать функцию, как только документ будет готов.
На момент написания этой записи ни Firefox, ни Chrome не поддерживали локальную загрузку HTML-файла. Это означает, что если вы просматриваете файл HTML, который находится на вашем жестком диске, вы не можете загрузить другой файл HTML на эту существующую страницу. Одна вещь, которую вы можете сделать, чтобы обойти это, — использовать другой браузер. В этом конкретном курсе я использую Apple Safari. Еще одна вещь, которую вы можете сделать, это загрузить файлы через веб-сервер. Все веб-браузеры поддерживают загрузку AJAX с веб-сервера. Другой вариант — вы можете работать с локального файлового веб-сервера вашего компьютера, если он доступен. Или вы можете установить бесплатные приложения, такие как MAMP или WAMP, которые позволят вам запускать веб-сервер как приложение на вашем компьютере. Если вы хотите попробовать именно этот вариант, в онлайн-библиотеке обучения lynda.com есть два курса Мортена Рэнд-Хендриксена, которые покажут вам, как установить WAMP или MAMP на свой компьютер, чтобы иметь возможность запускать локальный сервер.