Разное

Javascript и jquery: Книга: «JavaScript и jQuery. Исчерпывающее руководство» — Дэвид Макфарланд. Купить книгу, читать рецензии | JavaScript & jQuery. The Missing Manual | ISBN 978-5-699-79119-4

09.06.2023

что это за библиотека JavaScript

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

Логотип jQuery

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

Библиотека кроссплатформенная и кроссбраузерная. Это значит, что ей можно пользоваться в любых операционных системах, а написанный на ней код поддерживают любые браузеры. Исключение для новых версий составляют старые браузеры вроде Internet Explorer 6, но ими сейчас практически не пользуются.

jQuery имеет лицензию MIT, она бесплатная и открытая. Существуют и другие проекты: jQuery UI и jQuery Mobile. Их можно считать дополнительными расширениями для основной библиотеки, они предназначены для сложных интерфейсов и для мобильной разработки. Название читается как «джейквери».

Для чего нужна jQuery

Библиотекой пользуются фронтенд-разработчики, которые занимаются созданием видимой части сайтов и веб-приложений. Часто это программисты, которые поддерживают legacy-код в долгоиграющих проектах.

jQuery используется:

  • для быстрой связи JavaScript с HTML-элементами.
  • работы с селекторами CSS.
  • навигации по DOM-дереву: обхода, поиска элементов, их изменения.
  • работы с событиями на странице и реакциями на них.
  • реализации AJAX — подхода, при котором страница фоново обменивается данными с сервером.
  • создания анимации и визуальных эффектов на веб-странице.

Актуальность jQuery в 2022 году

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

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

А вот в новых проектах обычно пользуются другими инструментами. Они актуальнее и современнее.

Как работает jQuery

Принцип библиотеки — JavaScript отделяется от HTML-разметки. Сейчас эта идея применяется в веб-разработке повсеместно. Скрипты должны одинаково работать в разных браузерах, и их должно быть легко масштабировать, а при слишком сильной связи с элементами это сложно.

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

Еще одна идея библиотеки — расширяемость. Она состоит из компактного ядра, в котором собраны самые важные для веб-разработки возможности, и дополнительных плагинов. Если разработчику понадобится работать с какой-то специфической задачей, он может скачать плагин для этой задачи. Такое разделение нужно, чтобы не перегружать основное ядро: если оно будет слишком большим, это негативно скажется на скорости загрузки сайта.

Что можно делать с помощью jQuery

Искать элементы. HTML-элементы — это кнопки, блоки текста, ссылки, картинки и остальное содержимое веб-страницы. Их можно искать с помощью селекторов — обращений по типу, классу, имени и другим свойствам. Например, если у элемента есть класс page-header, то селектор по классу page-header найдет его.

jQuery умеет находить элементы по селекторам и умела делать это даже тогда, когда такой возможности не было в самом JavaScript. И сейчас ее методы бывают удобнее, чем поиск элементов с помощью нативного языка.

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

С jQuery удобно искать «ветки» или узлы схемы

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

Реагировать на события. Манипуляции с элементами обычно происходят не просто так, а если случится какое-то событие. Например, нажатие кнопки или переход по ссылке, прокручивание колесика мыши, нахождение на странице 10 секунд и дольше. Событий в языке огромное количество, и jQuery умеет их обрабатывать.

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

Фоново подгружать контент. В jQuery реализована удобная и простая работа с AJAX. Мы уже упоминали его выше. Это технология фоновой загрузки данных: человек просматривает страницу, и по необходимости на ней подгружается нужная информация. При этом страница не перезагружается, данные не пропадают, и пользователю не приходится ждать. Загрузка происходит очень быстро. Пример — автоматическая подгрузка товаров при пролистывании каталога интернет-магазина. Так сайты становятся более «отзывчивыми» и удобными, и jQuery в этом помогает.

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

Преимущества jQuery

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

Понятный код. Написанный на jQuery код понятный и просто читается, у него ясный синтаксис. Поэтому в нем относительно легко разобраться, и это важно, если вы работаете с кодом других людей.

Компактность. В сжатом виде jQuery весит 30 Кб, это не так много. А код на ней компактный и короткий, поэтому быстро пишется.

Распространенность. На jQuery написано огромное количество проектов разных лет. Это в том числе CMS, системы для быстрого создания сайтов — на них работает большинство веб-ресурсов.

Расширяемость. Идея с небольшим ядром и плагинами, которые подключаются по необходимости, экономит место и ресурсы. Если разработчику не нужно решать специфические задачи, то и функции для их решения не нужны. Поэтому они не входят в библиотеку по умолчанию, но если понадобятся, их легко скачать и установить.

Благодаря этому подходу jQuery небольшая, легкая и быстрая.

Недостатки jQuery

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

Избыточность. Когда библиотека только появилась, JavaScript умел меньше, чем сейчас. jQuery помогала выполнять действия, с которыми не мог справиться нативный язык. Но с тех пор JavaScript сильно изменился, стал более функциональным и гибким. Поэтому сейчас многие возможности jQuery избыточны — то же самое можно выполнить с помощью нативного языка или других фреймворков вроде React или Vue.

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

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

Как начать работать с jQuery

Библиотеку можно скачать с официального сайта, с помощью CDN или из репозитория на GitHub. Она существует в двух версиях: полная и облегченная (slim). В полной версии есть поддержка AJAX и некоторые дополнительные эффекты. Это нужно не для всех сайтов, поэтому для многих проектов достаточно облегченной версии.

Каждая из версий есть в двух вариантах. Один из них — для разработки: там приведен полный код библиотеки, понятный для чтения человеком. Второй — для продакшна: это так называемый минимизированный файл с припиской min в названии. В нем убраны пробелы, переносы строк, комментарии и табуляция, а имена переменных сокращены и сжаты. Функциональность у кода та же самая, но читать его очень сложно. Он нужен не для чтения, а для выкладывания проекта. Минимизированный файл меньше весит и быстрее грузится, поэтому используется для выпущенных в продакшн версий.

Библиотеку можно скачать через браузер, а можно установить с помощью пакетных менеджеров npm или yarn. Она выглядит как файл с расширением .js: его разработчик помещает в папку проекта и просто подключает к своему коду.

После этого можно пользоваться всеми возможностями jQuery.

JavaScript, jQuery

Насколько раздражают стандартные окна оповещений JS? Они представляют из себя пережиток примитивной эпохи веб-разработки.

Подробнее …

Каждый современный сайт должен быстро загружаться. Существует множество методов и плагинов для ускорения загрузки страниц, поэтому вы можете не знать, что использовать сначала.

Скрипт Progressively является отличным инструментом для увеличения скорости страницы. Он является скриптом для отложенной загрузки изображений (lazy load), который загружает изображения постепенно в процессе прокручивания страницы пользователем.

Подробнее …

jQuery до сих пор была полезной и прагматичной библиотекой, но все чаще снижается вероятность того, что вы будете использовать ее в своих проектах для выполнения таких задач, как выбор элементов, их стилизация, анимация и выборка данных. С увеличением поддержки браузерами ES6 (около 96% на момент написания статьи), сейчас, возможно, самое время отказаться от использования jQuery.

Подробнее …

Для некоторых пользователей панель процесса загрузки (progress bar) является очень полезной вещью. Он информирует их о том, насколько они ближе к цели. Обычно используется для более удобного взаимодействия в пользователем. Когда вы открываете веб-страницу в своем любимом браузере, на вкладке браузера уже есть индикатор выполнения по умолчанию, который позволяет увидеть, полностью ли загружена страница.

Подробнее …

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

Подробнее …

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35. 41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное

следующий → ← предыдущая

Что такое jQuery

Бесплатная библиотека javascript с открытым исходным кодом, которая в основном используется для проектирования, просмотра и управления HTML DOM. DOM — это древовидная структура, используемая для представления элементов веб-страницы. jQuery помогает дизайнеру легко использовать код javascript для своих веб-сайтов. Расширенный подход к jQuery позволяет создавать мощные динамические веб-страницы и веб-приложения. Синтаксис jQuery предназначен для упрощения работы, например:

  • Навигация по документу
  • Выбор элементов DOM
  • Создание анимации
  • Обработка событий
  • Разработка приложений Ajax.

jQuery — одна из широко используемых библиотек javascript среди всех других библиотек, обладающая следующими основными функциями:

  1. Выбор элементов DOM
  2. Обход и манипулирование, которые разрешены Sizzle (механизм выбора)
  3. Создание нового стиля программирования
  4. Объединение структур данных и алгоритмов DOM

С другой стороны, jQuery позволяет разработчикам создавать надстройки над библиотекой JavaScript. Разработчики могут даже создавать абстракции для низкоуровневого взаимодействия и анимации.

jQuery против JavaScript

Хотя jQuery является частью JavaScript, между ними могут быть следующие определенные различия:

jQuery JavaScript
Это библиотека JavaScript. Это динамический и интерпретируемый язык программирования для веб-разработки.
Пользователю нужно только написать необходимый код jQuery Пользователю необходимо написать полный код js
Это занимает меньше времени. Это занимает больше времени, так как весь сценарий написан.
Обработка проблем совместимости с несколькими браузерами не требуется. Разработчики разрабатывают собственный код для обеспечения совместимости с несколькими браузерами.
Необходимо указать URL-адрес библиотеки jQuery в шапке страницы. JavaScript поддерживается всеми браузерами. Никаких дополнительных плагинов включать не нужно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© Орфографика.рф, 2010 - 2019
Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.
При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф».
Вопросы и предложения: info@орфографика.рф.