jQuery — это библиотека JavaScript, разработанная американским разработчиком программного обеспечения Джоном Резигом и выпущенная под свободной лицензией MIT в 2006 году. Библиотека предоставляет широкие возможности для манипулирования 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> <script type="text/javascript" src="pfad_zur_jquery_datei/jquery.js"></script> </head>
Если, с другой стороны, вы решите получить файл извне, вы должны соответствующим образом изменить ссылку в заголовке. Например, B. чтобы использовать файл jQuery из размещенных библиотек Google, введите следующий веб-адрес, включая соответствующую версию — в следующей ссылке 3.0.0 — в качестве исходного элемента ( src ):
http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
Вот как устроен синтаксис jQuery
Вы можете получить доступ к элементам HTML вашего веб-проекта, используя код jQuery. Вы выбираете эти элементы с помощью селектора, который синтаксически основан на селекторах CSS. Обычно за этим следует действие, описывающее, как следует изменить выбранный элемент. Селектор и действие также имеют префикс со знаком доллара ( $ ), чтобы идентифицировать код как функцию jQuery. Это сделано для того, чтобы избежать путаницы при использовании разных библиотек. $() используется как сокращение для функции jQuery(). Итак, основной синтаксис:
Одной из обязательных строк кода, которая должна предшествовать любой разметке jQuery в вашем HTML-документе, является событие готовности документа. Этот код гарантирует, что все содержащиеся в нем команды jQuery будут выполняться только после загрузки всех элементов HTML. С одной стороны, сообщения об ошибках избегаются, если, например. B. чтобы скрыть элемент, который еще не отображался. С другой стороны, событие готовности документа также позволяет поместить код в область. Синтаксическая структура адресуемой строки кода соответствует следующему шаблону:
<script type="text/javascript"> $(document).ready(function(){ //weiterer jQuery-Code }); </script>
Основные селекторы
Селекторы jQuery, вероятно, являются наиболее важными частями библиотеки JavaScript. Вы используете их для настройки различных элементов вашего веб-сайта. Существуют различные типы селекторов, которые находят и выбирают блоки 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("Sie haben einen Textblock ausgewählt!"); }); }); </script>
Другими важными триггерами являются:
| trigger | Описание |
| focus() | срабатывает, когда элемент имеет фокус (щелчок мышью или вкладка) |
| blur() | срабатывает, когда элемент теряет фокус |
| keydown() | срабатывает при нажатии и удержании клавиши |
| keyup() | срабатывает при отпускании клавиши |
| change() | срабатывает при нажатии клавиши или выборе |
| scroll() | срабатывает при прокрутке выбранного элемента |
| 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.
