Создание веб-интерактивности: введение в jQuery

JQuery обзорjQuery — это библиотека сценариев на стороне клиента, которую использует почти каждый современный веб-сайт — она ​​делает веб-сайты интерактивными. Это не единственная библиотека Javascript, но она наиболее разработана, наиболее поддерживается и наиболее широко используется. Это один из строительных блоков любого современного веб-сайта. Но что именно представляет собой jQuery, что делает его таким популярным, и почему вы должны заботиться об этом, если вы начинаете как веб-разработчик?

Что такое jQuery?

jQuery — это расширение Javascript, библиотеки функций и утилит Javascript, которые добавляют визуальный талант и делают сложные функции простыми для реализации всего за несколько строк кода. Он поддерживается во всех браузерах и с открытым исходным кодом. Кроме того, вы также можете расширить функциональность jQuery с помощью простых в использовании плагинов.

JQuery обзор

jQuery построен поверх Javascript, но добавляет методы и функциональность, которых нет в чистом Javascript. Он был создан для того, чтобы упростить использование Javascript и устранить неприятности, связанные с разной реализацией Javascript в разных браузерах. С jQuery вы можете просто написать один раз, и jQuery правильно интерпретирует ваш код для любого браузера.

Основная функция jQuery предназначена для манипулирования DOM (DOM — объектная модель документа), и это означает базовую структуру любой веб-страницы, которую вы посещаете. Каждая вещь, которую вы видите на странице — и многие, чего вы не видите — представлены в DOM.

jQuery — не единственная библиотека Javascript, но она самая популярная — ее используют около 55% из 10 000 лучших веб-сайтов. Prototype, MooTools и Scriptaculous являются популярными альтернативами, но не так хорошо поддерживаются.

Сторона клиента против стороны сервера

Большинство веб-страниц создаются на стороне сервера — MakeUseOf использует PHP и MySQL (в форме WordPress) для извлечения данных статьи из базы данных, а затем применяет шаблон к этим данным. Полученная страница отправляется в ваш браузер, интерпретируется и отображается для вас. Нажатие на ссылку делает еще один запрос к базе данных, и еще одна страница генерируется. Но что, если вы хотите создать какую-то интерактивность на странице? Форма, которая проверяет, что пользователь вводит (например, Twitter, который подсчитывает, сколько букв у вас осталось), кнопку, которая вызывает диалоговое окно, или, возможно, вы хотите загрузить дополнительные данные без перезагрузки всей страницы?

Это где сценарии на стороне клиента вступает в игру. Вот где клиент — ваш браузер — делает тяжелую работу. Большинство веб-сайтов, включая этот, используют и то и другое.

как использовать JQuery

Зачем использовать jQuery?

Visual Flair

jQuery позволяет вам изменять части веб-страницы в ответ на действия пользователя. В качестве быстрого примера, нажмите на эту ссылку — каждая ссылка на странице станет красной. Бесполезный? Возможно, но вы поняли. Слайд-шоу с изображениями — обычное использование jQuery. Балансирование бессмысленных визуальных эффектов и действительно полезных дополнений к пользовательскому опыту является частью навыка веб-разработчика.

Вот краткий список действительно потрясающих эффектов, которых вы можете достичь.

как использовать JQuery

Легкие События

Почти все программное обеспечение работает по модели событий — нажмите на что-нибудь, и событие щелчка инициируется. Проведите пальцем по планшету, и сработает событие перетаскивания. Приложения «слушают» эти события и что-то делают — jQuery позволяет делать это в браузере.

Выполните AJAX просто

Асинхронный Javascript и XML — это способ связи с удаленным сервером без необходимости загрузки другой страницы. Хорошим примером этого является поток статуса Facebook. Попробуйте прокрутить все ваши обновления, пока не дойдете до сути. Вы не можете. Как только вы дойдете до конца, jQuery обнаружит, что вы близки, и отправит запрос AJAX для отображения дополнительных статусов.

Затем он внедряет их в текущую страницу без вашего ведома. Вы получаете бесконечный поток обновлений, но они не все загружаются с самого начала.

Расширенные пользовательские интерфейсы

Наряду с плагином ядра jQuery UI вы можете создавать полноценные веб-приложения, используя стандартные компоненты форм; индикаторы выполнения, ползунки, кнопки, вкладки, перетаскивание — все это есть. Простая тематическая система позволяет настроить внешний вид или использовать одно из значений по умолчанию.

JQuery обзор

Должен ли я заботиться?

Если у вас есть какой-либо интерес к разработке веб-сайтов

тогда да — jQuery — это то, что вам обязательно нужно изучить. Если вы когда-нибудь задавали себе вопрос: «Как я могу заставить X делать Y, когда пользователь делает Z?», То вы полюбите jQuery. Добавить его на свой сайт так же просто, как добавить ссылку на него в шапке; или сказать WordPress, чтобы загрузить его.

Хотите узнать jQuery? Дайте нам знать в комментариях, и я посмотрю, что я могу сделать.

Авторы изображений: динамический вращающийся рекламный щит, созданный с использованием jQuery, PistolSlut.com, диаграмма, созданная с помощью jQuery

Ссылка на основную публикацию
Adblock
detector