jQuery ч.1: jQuery(document).ready()
августа 7, 2011 | Published in ClientSide, JavaScript, jQuery | 5 Comments
jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.
jQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:
- Обеспечить кроссбраузерность вашего JavaScript кода
- Сократить количество кода, который пишется пользователем за счет готовых решений
- Предоставить программисту большой и удобный набор селекторов для выборки элементов страницы
- Предоставить программисту набор стандартных визуальных эффектов для оживления вебстраниц
Для того, чтобы начать использовать jQuery вам достаточно скачать jQuery c . В этом учебнике мы будем использовать jQuery 1.6.2 — последнюю на момент написания учебника. Чтобы включить jQuery в страницу необходимо использовать стандартный способ подключения скриптов:
<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.
августа 9, 2011 at 15:06 (#)
Пользователь ничего не заметил, так как файл загрузился моментально из-за своей простоты и того факта, что он находится на жестком диске. На тяжелых сайтах это будет уже заметно и будет уже проблемой.
августа 10, 2011 at 20:39 (#)
Это уже давно не проблема, и кэш ни кто не отменял 31 KB
августа 10, 2011 at 20:58 (#)
abonec, у 90% пользователей необходимая версия библиотеки уже находится в кэше браузера, поэтому грузится будет только ваш собственный javascript код и плагины, которые не закешированы. Даже если забыть про кэш, то проблема отдачи пользователю дополнительно хоть целого мегабайта скриптов и т.д. уже не проблема, т.к. скорость интернета очень выросла, не в 90х живем ;-)
ноября 17, 2011 at 08:53 (#)
а при чем тут руби?
и как дом реди вызывать в ерб? и как быть с дом реди после загрузки дива аяксом?
ноября 17, 2011 at 11:14 (#)
anton, «Ruby on Rails c нуля! — блог изучающего Ruby, Ruby on Rails и другие технологии» — вот javascript, jQuery и Си как раз-таки относятсятся к тем самым другим технологиям.
Второй вопрос не очень понял. Вообще свои js-файлы называй .js.erb и тогда вставки Ruby в них автоматически будут преобразовываться в JS-код. например:
< % message = "Welcome to RubyDev!" %>
alert(< %= message %>);
Выведет alert-сообщение с текстом «Welcome to RubyDev!».
Касательно третьего вопроса я уже писал статью об обработчиках событий в jQuery и там для подгружаемых через ajax элементов можно использовать функции live() и delegate() вместо bind(), которая «не видит» подгруженных элементов.