В наши дни всемирная паутина представляет собой динамическую сред, и ее пользователи предъявляют высокие требования, как к оформлению, так и к функциональности сайтов. Для создания интересных интерактивных сайтов разработчики используют библиотеки JavaScript, такие как JQuery, чтобы автоматизировать решение наиболее типичных задач и упростить решение более сложных. Одной из причин высокой популярности библиотеки JQuery является ее способность помогать при решении весьма широкого круга задач.
На первый взгляд, кажется, что сложно выбрать, с чего начать, потому что библиотека JQuery реализует весьма широкие функциональные возможности. Тем не менее, она имеет согласованную и симметричную архитектуру; большая часть концепций заимствована из HTML и каскадных таблиц стилей (Cascading Style Sheets, CSS). Архитектура библиотеки быстро осваивается дизайнерами даже с малым опытом программирования, поскольку многие web-разработчики, как правило, имеют больший опыт работы с указанными технологиями, чем с JavaScript [1].
Загрузка JQuery. Откроем сайт JQuery, и загрузим копию библиотеки, которую мы будем использовать. Для этого, Запустим браузер и введем в нем адрес http://www.jquery.com. Найдем раздел «Grab the Latest Version» и установим флажок рядом со строкой «Production». Щелкнем на кнопке «Download JQuery». Открывается следующая страница, которое мы можем сохранить библиотеку JQuery для дальнейшего использование [2].
Подключение библиотеки JQuery. Прежде чем использовать библиотеку JQuery, ее необходимо вначале скачать с сайта. Мы уже посмотрели это. Подключить к HTML-
Документу производится с помощью тега
Сам тег
Если посетитель ранее заходил на другой сайт, на котором библиотека JQuery также подгружалась с сайта https://code.jquery.com/, то веб-браузер не будет повторно загружать библиотеку и использует данные, сохраненные в кэше. Таким образом, скорость работы вашего сайта может увеличиться. В этом и заключается преимущество данного метода. Однако если сайт https://code.jquery.com/будет не доступен, то возможны проблемы. В таких случаях мы можем использовать копию библиотеки своих папкам.
В этом случае подключение будет выглядеть так.
Библиотека JQuery избавляет нас от потери времени и предоставляет возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Обработать это событие можно с помощью метода ready().
jQuery(document).ready(function() {
alert("Документ доступен для выполнения скриптов"); });
Функция jQuery() имеет псевдоним $(). Используя этот псевдоним, можно обработать событие следующим образом.
$(document).ready(function() { alert(«Документ доступен для выполнения скриптов»); });
Этот код можно еще сократить.
$(function() { alert(«Документ доступен для выполнения скриптов»); });
Необходимо также заметить, что в программе может быть несколько вызовов методов ready(). В этом случае выполнение методов происходит в порядке их объявления внутри программы [1–7].
В JQuery есть несколько возможности обращение элемента страниц. С помощью селектора.
На примере изменение фонового цвета. $(«Селектор»).css(«backgroundColor», «red»);
На примере изменение значение в HTML. $(«Селектор»).html(«HTML Текст»);
На примере изменение значение. $(«Селектор»).text(«Текст»);
Селектор может быть тег HTML, идентификатором, классом и т. д.
Посмотрим следующий пример на JQuery.
$(document).ready(init);
function init() {
$('p').html("Абзац текста");
$("#Брат").text("Абзац текста с id=Брат");
$(".Сестра").html("Абзац текста с class=Сестра");
$(".Сестра").css("backgroundColor", "yellow"); }
Абзац текста
Абзац текста с id=Брат
Абзац текста с class=Сестра
Рис. 1. Результат примера JQuery
Литература:
- Чаффер Дж., Шведберг К. Изучаем JQuery 1.3. Эффективная веб-разработка на JavaScript. — Пер. с англ. — СПб.: Символ-Плюс, 2010. — 448 с., ил.
- Бибо Б, Кац И. Подробное руководство по продвинутому JavaScript. — Пер. с англ. — СПб.: Символ-Плюс, 2009. — 384 с., ил.
- Каслдайн Э., Шарки К. Изучаем JQuery. 2-е изд. –СПб.: Питер, 2012. — 400 с.: ил.
- Бенедетти Р., Крэнли Р. Изучаем работу с JQuery. — СПб.: Питер, 2012. — 528 с.: ил.
- AdamFreeman — JQuery для профессионалов. — Пер. с англ. — М.: ООО “И. Д. Вильямс”. 2013. — 960 с.: ил.
- Прохоренок Н. А. JQuery. Новый стиль программирования на JavaScript.: — М.: ООО “И. Д. Вильямс”. 2010. — 272 с.: ил.
