Лабораторная работа 7
.pdf
Лабораторная работа №5
JQuery. Манипуляции с элементами.
Цель: познакомится с библиотекой JavaScript - jQuery, научиться применять процедуры и функции библиотеки.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки, управление передаѐтся JQuery, идентифицирующей кнопки и затем преобразовывающий его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.
Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Тем не менее, разработчиками биб
была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно ту JavaScriptфункциональность, которая на нѐм была бы востребована.
jQuery, как правило, включается в веб-страницу как один внешний JavaScriptфайл:
<head>
<script type="text/javascript" src="путь/к/jQuery.js"></script> </head>
Вся работа с jQuery ведѐтся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать еѐ синоним — jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким можно писать его следующим образом:
jQuery(function($) {
// здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery
})
Работу с jQuery можно разделить на 2 типа:
1.Получение jQuery-объекта с помощью функции $(). Например, передав в неѐ CSS-селектор, можно получить jQuery-объект всех элементов HTML попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery
объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса.
2.Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.
Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. Например,
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
находит все элементы <div> с классом test, а также все элементы <p> с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз. Здесь методы add,addClass и slideDown возвращают ссылку на исходный объект $("div.test"), поэтому возможно вести такую цепочку.
Методы, начинающиеся с $., удобно применять для обработки глобальных объектов.
Более подробно с JQuery можно познакомиться на сайте http://jquery-docs.ru/
Применить на лабораторной jQuery LightBox – фотогаллерея.
Начинаем, с первоисточника и сразу же смотрим демо, то, что у нас должно получиться http://www.linkexchanger.su/examples_2009/galleries/lightBox/demo.html.
Для использования плагина нужно подключить к веб-странице файл библиотеки jquery-1.3.2.js, файл плагина jquery.lightbox.js и файл стилевого оформления плагина jquery.lightbox.css, которые находятся в приложении к лабораторной. Не забудьте, что в папке images, хранятся изображения элементов управления, необходимые для работы плагина.
<script type="text/javascript" src="js/ jquery.prototype.js"></script> <script type="text/javascript" src="js/ jquery.scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" />
Добавляем небольшие настройки стилей
<style type="text/css">
body { margin:0; padding:0; }
#lightBox { width:800px; margin:0; padding:0; list-style- type:none;margin:20px }
#lightBox img { border:1px solid #CCC; margin-left:5px; } #lightBox li { float:left; }
</style>
Затем займемся размещением в теле HTML-страницы миниатюр. Тут простор для творчества – размещайте как, где и сколько хотите миниатюр. Вот например:
<ul id="lightBox">
<li><a rel="lightbox-group" href="img/1.jpg" class=" lightbox[roadtrip]"><img src="img/1m.jpg" alt=""></a></li> <li><a rel="lightbox-group" href="img/2.jpg" class=" lightbox[roadtrip]"><img src="img/2m.jpg" alt=""></a></li>
<li><a rel="lightbox-group" href="img/3.jpg" class=" lightbox[roadtrip]"><img src="img/3m.jpg" alt=""></a></li> <li><a rel="lightbox-group" href="img/4.jpg" class=" lightbox[roadtrip]"><img src="img/4m.jpg" alt=""></a></li> <li><a rel="lightbox-group" href="img/5.jpg" class=" lightbox[roadtrip]"><img src="img/5m.jpg" alt=""></a></li>
</ul>
После запуска странички у вас появится набор фотографий, при нажатии на которые вы увидите работу использованного вами скрипта.
Задание: выполнить вышеизложенный скрипт. Cделать локальную страничку
―Авто проигрывание слайд шоу‖ по примеру http://ruseller.com/lessons.php?rub=32&id=845
в программе расставить комментарии к использованному коду.