Обзор библиотеки jQuery
Рассматривая тенденции развития веб-программирования за последние несколько лет, можно сделать следующий достаточно противоречивый вывод: в принципе, почти все программы, которые используются на сайтах, уже написаны. Однако для того, чтобы найти ту единственную необходимую программу, следует потратить столько времени, трафика и сил, что проще ее написать самому. Впрочем, такой парадокс характерен не только для программирования, но и, пожалуй, для любой современной человеческой деятельности, связанной с обработкой информации.
Тем не менее тенденция развития программ для веб-приложений указывает на то, что расширение их функциональности идет в направлении, которое было еще несколько лет назад доступно только прикладным программам: Иначе говоря, современное веб-приложение должно быть анимированным, уметь обращаться к серверу без перезагрузки страниц, использовать те элементы программы, которые всегда считались не веб-элементами, например деревья и сплиттеры, и т. д. и т. п.
Основные облачные технологии обработки информации завязаны на использовании браузеров, которые, как вы помните, являются исполнителями HTML-кода как инструкции по отображению содержимого веб-страницы. В свою очередь, ключевые технологии по созданию веб-страниц являются строго статическими, как сам язык HTML или CSS. Это приводит к тому, что всю необходимую подвижную функциональность веб-приложения приходится реализовывать с помощью языков программирования, в частности JavaScript.
Что же такое библиотека? У каждого из нас есть определенный запас знаний, которые мы получали и усваивали различными путями. Если имеющихся знаний не хватает для решения поставленной задачи, то мы, соответственно, обращаемся в то место, где подобные знания хранятся, - в библиотеку. Вне зависимости от того, где она находится - в соседнем доме за углом, куда нас отвели в первом классе, или в Интернете, где обсуждаются интересующие нас вопросы, - библиотека выполняет свою главную функцию - хранит различную информацию и предоставляет ее пользователям по их запросам.
Библиотеки компьютерных программ также не исключение в этом общем правиле. В досетевую эпоху любой программист, нарабатывающий опыт по специальности, рано или поздно обзаводился определенным набором программ, написанных самостоятельно либо полученных от знакомых или через третьи руки. Подобные личные библиотеки программ очень облегчали повседневный труд по написанию кода. Если библиотека была достаточно обширной, а задача тривиальной, то порой написание программ/»! сводилось к объединению библиотек и созданию интерфейса. В настоящее время, когда понятия «компьютер» и «сеть» начинают сливаться в единое целое, обмен библиотеками не столь актуален. Ведь гораздо проще вступить в сообщество, развивающее определенное направление в программировании, и помещать собственноручно написанные программы в общие файлы библиотек. Затем их можно самостоятельно использовать в полном объеме и предоставлять для работы всем желающим сделать мир красивее. Таким образом, можно сказать, что библиотеки в мире программирования - это файлы с набором подпрограмм, которые где-то хранятся и доступны для использования.
В настоящее время существует множество библиотек, позволяющих реализовывать такие вещи, как красочные графические эффекты, анимация, перетягивание или сортировка предметов, общение с сервером без перезагрузки страницы и многое другое. К их числу относится библиотека jQuery, об использовании которой мы и поговорим.
Обратимся к самой библиотеке jQuery, которую можно совершенно бесплатно скачать с сайта проекта по адресу На момент написания книги доступна версия в виде файла с именем jquery-1.7.2. js. На момент прочтения книги вами последняя версия, скорее всего, будет отличаться номером в имени файла и, как следствие, более широким списком функций. Как видите, библиотека представлена в виде обычного текстового файла, имеющего расширение .js. Расширение указывает на то, что файл хранит в себе код, написанный на языке программирования JavaScript, и может быть подключен к любому файлу с HTML-кодом путем указания его имени в теле тега <script>. Если просмотреть содержимое файла в текстовом редакторе, то можно увидеть программный код, написанный на языке JavaScript.
Теперь вспомним про объектную модель документа - DOM, о которой было рассказано в главе 3. Так вот, использование библиотек, подобных jQuery, как раз и позволяет упростить создание динамического HTML-документа. Это те самые веб-страницы, которые хоть и являются по своей основе статическими, но могут изменять свойства своих объектов как обычные программные приложения, просто реагируя на события. Вот здесь-то и необходимо иметь углубленные знания в использовании не только языка программирования JavaScript, но и языка каскадных таблиц стилей CSS. Действие jQuery основано на управлении изменением свойств объектов HTML-страницы путем изменения значения правила CSS для конкретного элемента веб-страницы. Краеугольным камнем здесь, как и в каскадных таблицах стилей, является понятие селектора.
Подключение библиотеки jQuery. Пробуем получить из нее то, что нужно
Сама библиотека представляет собой файл с расширением JS. Напомню, что мы работаем с файлом jquery-1.7.2.js. Для использования полученный файл с библиотекой jQuery следует разместить в корневом каталоге с создаваемым сайтом или в подкаталоге сайта, специально отведенном под размещение сценариев. Это необходимо сделать для того, чтобы можно было подключить библиотеку с любой страницы, использующей сценарии. Кроме того, для подключения сценариев к веб-странице есть три различных способа: указание названия непосредственно в HTML-теге веб-страницы, прописывание тела сценария в головной части веб-страницы либо подключение сценария, находящегося в отдельном файле, путем указания его расположения. Соответственно, для подключения библиотеки jQuery мы должны инициализировать ее в коде веб-страницы с помощью следующего тега:
<script type="text/javascript" src="/jquery-1.7.2.js"></script>
Здесь значением параметра src будет имя файла библиотеки, если используется ее версия, отличная от версии в данной статье.
Теперь я расскажу, как получать из библиотеки те функции, которые необходимы для сценария.
Рассмотрим сценарий, при выполнении которого объект panel опускается по окну браузера при однократном нажатии (click) кнопки (button).
- <script type="text/javascript"> -объявление начала тела самого сценария.
- $ (document) . ready (function (){-определение готовности объекта DOM и задание события ready для функции.
- $(" .button" ) . click ( function (){-привязка выполнения функции по событию click, произведенному над элементом класса button.
- $ (" panel") .si ideDown (" slow") ; - над элементом, имеющим ID panel, выполнять действие, связанное с его перемещением вниз по окну браузера.
- }) ; - завершение вложенной функции.
- }) ; - завершение функции.
- </script> - завершение тела сценария.
- Как видно из описания листинга, подключение и вызов на выполнение функций из библиотеки не составляют большого труда. Иными словами, проблема не в том, как взять книгу с библиотечной полки, а в том, какую книгу необходимо брать для выполнения нужных действий. Это, в свою очередь, материал для дополнительного изучения как самого языка программирования JavaScript, так и CSS вместе с HTML.
- Почему? Чтобы получить элемент из библиотеки jQuery, необходимо иметь представление о том, что такое селектор, и понимать, как он работает. Вот несколько примеров работы селектора j Query:
- $ (" #header") - получить элемент с id=" header";
- $ (" h3") - получить все элементы <h3>;
- $ ("divttcontent .photo") - получить все элементы с классом = "photo", которые находятся в элементе div с id="content";
- $("ul Ii")-получить все элементы <li> из списка <ul>;
- $("ul Ii: first") -получить только первый элемент <li> из списка ,<ul>.
| ← Калькулятор "Сколько будет стоить свадьба" | Сценарии из библиотек сторонних разработчиков → |
|---|