jQuery — это библиотека JavaScript, которая была разработана американским разработчиком программного обеспечения Джоном Ресигом и выпущена в 2006 году под свободной лицензией MIT. Библиотека предлагает широкие возможности для манипулирования HTML и CSS, а также ускорения работы Ajax. Этого можно достичь, включив jQuery в исходный код HTML соответствующего веб-проекта и затем управляя им с помощью различных функций. jQuery уже входит в состав многих систем управления контентом и веб-фреймворков, таких как Joomla, WordPress или MediaWiki, и выделяется не только благодаря широкому набору функций, но и благодаря большому сообществу и постоянному развитию, за которое отвечает команда jQuery.
Что такое jQuery? Введение в возможности библиотеки
jQuery значительно упрощает программирование на языке динамических сценариев JavaScript. Вся библиотека jQuery состоит из одного файла JavaScript, который содержит основные функции DOM, Ajax, события и эффекты. Таким образом, библиотека представляет собой обширную коллекцию программных частей, которые можно использовать для редактирования элементов веб-проекта. Можно выделять объекты и изменять их внешний вид (цвет, положение и т.д.), что также возможно с помощью JavaScript, но это гораздо сложнее.
Кроме того, с помощью jQuery вы можете более целенаправленно реагировать на действия пользователей — благодаря событийно-ориентированному программированию элементов сайта. Пользователи активируют определенные события, щелкая мышью или вводя текст, после чего им отображается контент или анимация. Кроме того, графические эффекты, такие как наложение текста, легко и быстро вставляются и требуют всего одной строки кода. jQuery также упрощает работу с Ajax. Эта библиотека оптимизирует технологию, которая загружается в фоновом режиме на сайте, особенно если речь идет о кроссбраузерном интерфейсе. С ее помощью Ajax можно быстро настроить и использовать на различных браузерах — охвачены даже устаревшие версии. jQuery обычно закрывает пробелы между реализациями JavaScript в отдельных браузерах.
jQuery: расширение базовой структуры с помощью плагинов
jQuery популярен среди современных веб-проектов благодаря тому, насколько просто расширить библиотеку JavaScript. Тысячи плагинов, которые упрощают программирование и делают jQuery еще более мощным, доступны (в основном бесплатно) для загрузки на официальном сайте jQuery. Сообщество играет решающую роль в разработке этих расширений для библиотеки. Если желаемая функция недоступна ни в качестве стандартной функции, ни в качестве плагина, разработчики могут попытаться создать свои собственные расширения.
Как встроить библиотеку JavaScript
Для того чтобы использовать jQuery в своем проекте, сначала необходимо встроить библиотеку. У вас есть возможность разместить файл JavaScript на собственном веб-пространстве или включить ссылку на внешнее веб-пространство.
Если вас интересует первый вариант, вы можете найти файл в центре загрузки на сайте jQuery. Здесь вы можете выбрать между сжатой версией (compressed, production jQuery) для живого использования и несжатой (uncompressed, development jQuery). Чтобы сохранить соответствующий файл локально, просто щелкните правой кнопкой мыши на соответствующей ссылке, выберите «сохранить как…» и укажите желаемый каталог назначения. Затем поместите соответствующую ссылку в раздел <head> вашего веб-представительства:
<head>
<script type="text/javascript" src="path_to_jquery_file/jquery.js"></script>
</head>Если вы решили не размещать файл во внешнем каталоге, вам необходимо соответствующим образом адаптировать заголовок. Например, чтобы использовать файл jQuery из Google Hosted Libraries, вы должны указать следующий веб-адрес, включая соответствующую версию (3.0.0 в примере ниже) в качестве элемента источника (src):
http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.jsКак строится синтаксис jQuery
С помощью кода jQuery вы можете обращаться к элементам HTML. Вы выбираете эти элементы с помощью селектора, который синтаксически основан на селекторах CSS. За ним обычно следует действие, которое описывает, как выбранный элемент должен быть изменен. Перед селекторами и действиями ставится знак доллара ($), чтобы показать, что код является функцией jQuery. Это делается для того, чтобы избежать путаницы при использовании различных библиотек. $() служит сокращением для функции jQuery(). Основной синтаксис таков:
$(Selector).Action()Важнейшей строкой кода, которая должна предшествовать каждой части кода jQuery в вашем HTML-документе, является событие готовности документа. Этот код гарантирует, что все команды, содержащиеся в jQuery, будут выполнены только после загрузки всех элементов HTML. С одной стороны, это позволяет избежать ошибок, например, когда элемент должен быть скрыт, но он еще не был отображен. С другой стороны, событие готовности документа позволяет вставить код в область <head>. Синтаксическая структура соответствующей строки кода соответствует следующему примеру:
<script type="text/javascript">
$(document).ready(function(){
//additional jQuery-Code
});
</script>Наиболее важные селекторы
Селекторы jQuery являются наиболее важными компонентами библиотеки JavaScript. Вы можете использовать их для настройки различных элементов вашего сайта. Существуют различные типы селекторов (например, ID, class, type и т.д.), которые находят и выбирают HTML-элементы. Селектор элементов обычно назначает действие HTML-элементов по имени. С помощью следующего кода jQuery можно определить, что все элементы <p> (то есть все блоки текста) будут скрыты, когда посетитель сайта нажмет на кнопку:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>Другим важным селектором jQuery является селектор #id. С его помощью вы можете пометить отдельные элементы в HTML-документе, которые впоследствии могут быть специально изменены с помощью JavaScript, что аналогично тому, что происходит при манипуляциях с CSS. Если вы не хотите, чтобы все блоки текста скрывались при нажатии пользователем кнопки, вы можете добавить дополнительное значение id к элементу <p> (<p id=»testblock»>) и расширить селектор элемента в верхнем коде с помощью селектора #id.
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#testblock").hide();
});
});
</script>Третий селектор — это селектор .class, который выбирает ранее определенные классы. Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует название класса:
|
Селектор |
Описание |
|
$(«*») |
выбирает все элементы |
|
$(this) |
выбирает текущий элемент |
|
$(«p:first») |
выбирает первый <p> элемент |
|
$(«ul li:first-child») |
выбирает первый элемент списка <li> из всех доступных <ul> списков. |
|
$(«[href]») |
выбирает все элементы с атрибутом href |
|
$(«tr:even») |
выбирает все четные строки |
|
$(«tr:odd») |
выбирает все нечетные строки |
|
$(«p.intro») |
выбирает все элементы <p> с классом class=»intro». |
Вы можете реагировать на события пользователя с помощью jQuery
Посетители или пользователи вашего сайта или веб-приложения взаимодействуют с вашим веб-проектом совершенно разными способами — будь то клик, ввод с клавиатуры, заполнение формы или увеличение вкладки. Эти события известны как события DOM и могут быть определены в jQuery как триггер действия.
Например, можно сделать так, чтобы движение мыши вызывало действие. Это достигается с помощью команды mouseenter() или mouseleave(). Первая функция реагирует, когда пользователь наводит курсор мыши на выбранный элемент HTML, а вторая — когда указатель мыши покидает элемент. Следующий код jQuery позволяет уведомлять пользователя через диалоговое окно при наведении курсора на блок текста:
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
alert("You have selected a text block!");
});
});
</script>Другими важными триггерами являются:
|
Триггер |
Описание |
|
фокус() |
это событие происходит, когда элемент получает фокус (когда он выбран щелчком мыши или при навигации по вкладкам) |
|
размытие() |
происходит, когда элемент теряет фокус |
|
keydown() |
происходит, когда пользователь нажимает клавишу на клавиатуре |
|
keyup() |
происходит, когда пользователь отпускает клавишу |
|
change() |
происходит при изменении значения элемента |
|
прокрутка() |
происходит, когда пользователь прокручивает страницу в другое место элемента |
|
select() |
происходит, когда пользователь делает выбор текста внутри элемента. |
С помощью функции on() можно добавить несколько триггеров к выбранному элементу и легко комбинировать различные события. Следующий код jQuery позволяет, например, изменить цвет фона элементов <p>, когда посетители выбирают их (синий), а также когда они отменяют выделение (красный), а затем щелкают по ним (желтый):
<script type="text/javascript">
$("p").on({
mouseenter: function(){
$(this).css("background-color", "blue");
},
mouseleave: function(){
$(this).css("background-color", "red");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>Для детального ознакомления с обширным набором функций библиотеки JavaScript, также связанных с технологией Ajax, мы рекомендуем учебник по jQuery на w3schools.com, который содержит множество примеров кодов для jQuery.