Что такое jQuery, как работает и что может jQuery.
Автор: Андрей Краснокутский
Дата: 2011-08-13
Что такое jQuery?
В прошлом уроке Как сделать плавное увеличение картинки при клике я рассказывал о создании на сайте модальных окон использующих технологию jQuery. После выхода этого урока я получил большое количество писем, отзывов и комментариев. Из всего сказанного, сделал вывод: наверное поторопился давать такой урок, для общего понимания: что такое вообще jQuery, как работает и какие возможности нам дает, нужно сначала немного рассказать о теории. Что ж исправлюсь. Начинаем серию статей и уроков о jQuery.
Введение в jQuery.
Раз уж Вы решили разобраться с jQuery, значит как минимум азы сайтостроения (HTML и CSS) уже знаете. Наверняка знаете или хотя бы слышали, что такое JavaScript. Для тех кто подзабыл напоминаю, что JavaScript - это программный участок кода, который внедряется в код web-страницы и позволяет реализовать различные эффекты, недоступные с помощью HTML и CSS. Например отображение на сайте часов или текущей даты. Т.е. в нужные места web-страницы подставляют с программные куски кода, которые и выполняют нужную задачу. Это и есть JavaScript.
Делается это очень просто, с помощью специальных тегов вставляется ссылка на внешний файл скрипта:
Файл скрипта, конечно же тоже должен быть на Вашем сайте. Еще используют такую конструкцию для подключения Скриптов:
<script type="text/javascript">
программный код самого скрипта
</script>
Т.е. в нужное место web-страницы, там, где нужно отобразить какой то эффект, добавляют код скрипта. Обратите внимание, на разницу подключения Скриптов.
В первом случае Скрипт подгружается из внешнего файла. Во втором случае исполняемый код скрипта прописан прямо в коде web-страницы. Этот так к слову.
Различных скриптов существует великое множество, как говорится на все случаи жизни. И вот нашлись умные люди, собрали все эти скрипты (ну или почти все) в один исполняемый файл - jquery.js. А из этого файла уже можно вытягивать нужные эффекты на определенные страницы сайта.
Таким образом, в январе 2006 года появилась на свет JavaScript-библиотека, которую так и назвали: Библиотека jQuery. Официальный сайт разработчиков http://jquery.com/ . Библиотека постоянно пополняется и совершенствуется и пополняется на сегодняшний день актуальная версия библиотеки 1.6.2.js. Когда Вы будете изучать эти уроки, возможно, появится уже более новая версия, так что имейте это ввиду и учитывайте при написании своих кодов.
Скачать самую последнюю версию библиотеки Вы можете с сайта разработчиков http://jquery.com/. Или на нашем сайте: скачать Библиотека jQuery. Все последующие уроки я буде давать из расчета что Вы пользуетесь версией 1.6.2. Обратите внимание, в скачанном архиве, находятся два файла:
jquery-1.6.2.js
jquery-1.6.2.min.js
Практически это одно и тоже, но первый файл – это полная версия от разработчиков, со всеми комментариями и пояснениями (правда, все комментарии на английском языке), размер этого файла 230 Кб.
Если у Вас нет желания «ковырятся» в тонкостях и комментариях, воспользуйтесь вторым файлом, здесь содержится только необходимый функционал и убраны все комментарии. Вес файлы 89,9 Кб.
У пытливых читателей сразу же возникает вопрос: А каким образом этой самой библиотеке «сказать», что и где отображать, какой эффект нужен в данный момент на конкретной странице? А делается это с помощью CSS. Т.е. Вы хотя бы на минимальном уровне должны знать, как работают стилевые таблицы стилей и каким образом прописать тот или иной стиль и т.д.. Про стилевые таблицы стилей я рассказывал в разделе CSS уроки.
Давайте подведем итог этого урока
jQuery – это JavaScript-библиотека, осуществляющая взаимодействии JavaScript, HTML и CSS. Библиотека имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.
С помощью jQuery мы сможем:
Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
Работать с событиями.
Легко осуществлять различные визуальные эффекты.
Работать с AJAX (технология, позволяющая общаться с сервером без перезагрузки страницы).
В следующем уроке мы приступим к практической части изучения jQuery.
Комментарии добавил(а): Николай Гижицкий Дата: 2011-08-15
Андрей!
Как всегда, информация очень полезная и своевременная!
С нетерпением буду ждать следующих статей-уроков!
А в подарок, с благодарностью, хочу представить эту маленькую программку: http://uvetra.at.ua/blog/sledjat_za_vami_ili_sledite_vy/2011-08-15-54
Комментарии добавил(а): Аноним Дата: 2011-11-30
Каскадные таблицы стилей, каскадные!!!!
Комментарии добавил(а): Аркадий Дата: 2013-03-10
Хорошая статья, только улыбает ваша странная фраза "стилевые таблицы стилей"! Наверное вы имели ввиду каскадные таблицы стилей?