Javascript jquery: How jQuery Works | jQuery Learning Center

jQuery и JavaScript

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

У такого подхода есть несколько ограничений. Поскольку сама анимация жестко прописывается в виде класса, то для изменений требуется новая sass-компиляция или новый css-класс. Если, скажем, мы описываем анимацию цвета, то для 10 вариантов потребуется как минимум 10 новых классов. Аналогичная ситуация с размерами, отступами и т.д. То есть анимация в виде css-классов больше рассчитана на какие-то «фиксированные»/«типовые» эффекты.

Я уже много писал про Alpine.js как замену jQuery. Но у jQuery есть специальный метод .animate(), с помощью которого можно создать анимацию. Она довольно ограниченная, но для многих задач её хватает. В Alpine.js такого нет, поэтому я нашёл отдельную библиотеку Anime.js, с помощью которой можно создавать совершенно потрясающие вещи.

Читать ➝

Думаю, что с проблемой загрузки js-скриптов сталкивался каждый вебмастер. В современных браузерах доступны варианты — обычной загрузки в HEAD, поздней (lazy) в BODY, а также async и defer. Масла в огонь подлил Гугл, который понижает рейтинг страниц, где используются загружаемые js-скрипты, мотивируя это тем, что браузер вынужден ждать их полной загрузки и отработки, прежде чем отрендерить страницу.

Но на самом деле, проблема ещё глубже, поскольку затрагивает вопрос не только последовательности загрузки, но и порядка выполнения скриптов. Я покажу это на примере Alpine.js и jQuery.

Читать ➝

В последнее время всё больше шума вокруг js-фреймворков React, Angular и Vue. Порой складывается впечатление, что без этих библиотек веб-разработка уже не существует и единственный верный путь — бросать «никому не нужный» PHP, и срочно изучать реакт, поскольку он сейчас самый якобы востребованный на рынке. 🙂

Бум вокруг JS в общем-то понятен — это язык имеет довольно низкий порог вхождения, поэтому появляется всё больше «специалистов», которые прошли курсы по JavaScript, хотя полноценно не осилили ни HTML, ни CSS, а PHP для таких — просто ругательство. Почему я обращаю внимание на этот момент? Всё из-за того, что в этом шуме-буме, на самом деле есть несколько интересных и полезных вещей, на которые стоило бы обратить внимание веб-разработчику. Но из-за таких горе-специалистов докопаться до сути несколько проблематично. Лично я считаю себя достаточно «продвинутым» программистом с хорошим знанием многих технологий, включая и JavaScript, но даже для меня оказалось не таким простым занятием понять реальное назначение современных js-фреймворков.

Читать ➝

Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.

Реализация AJAX довольно сложна с технической точки зрения. На самом деле происходит работа API XMLHttpRequest, который и выполняет всю работу. Чтобы упростить код, используются функции-«обертки», которые освобождают нас от сложного программирования XMLHttpRequest. В jQuery для этого используются функци ajax, а также её «модификация» post. При этом, если jQuery не нужна, то в Сети можно найти другие библиотеки, реализующие функционал AJAX, например Selector (которая вообще выступает как легковесная замена jQuery).

Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.

Читать ➝

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

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

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Читать ➝

Общие ссылки

jQuery: Официальный сайт | Документация на английском | Русская документация (частично)

JavaScript: Справочник | Учебник

Создание графиков

• Разнообразные графики и диаграммы: Chart.js | Документация | Примеры
• «Временные» горизонтальные диаграмы: Timesheet.js — не требует jQuery.

Читать ➝

Как использовать jQuery в файле JavaScript

Надежные ответы на вопросы разработчиков

Grokking the Behavioral Interview

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

jQuery — широко используемая библиотека JavaScript. Благодаря своему синтаксису манипулирование DOM упрощается, что ускоряет разработку.

Чтобы использовать jQuery, на него должна быть ссылка в файле HTML, а его синтаксис должен быть объявлен в файле javascript.

Есть два способа включить jQuery в HTML-файл проекта:

Примечание: Рекомендуется работать с последней версией jQuery (версия 3.6.3), чтобы получить доступ ко всем функциям.

1. Загрузите последнюю версию библиотеки jQuery из jQuery и включите ее в тег заголовка следующим образом:

 <голова>  
 

2. Использовать CDN. jQuery CDN можно найти здесь. Включите CDN в тег head следующим образом:

   Примечание: CDN (сеть доставки контента) — это распределенная сеть серверов, которая доставляет контент пользователям в зависимости от их географического положения, обеспечивая высокую доступность и производительность.

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

 <голова>  

 

После ссылки на библиотеку jQuery в файле HTML она будет доступна во всем проекте. Давайте объявим синтаксис jQuery в JavaScript.

Пример

Объяснение

Приведенный выше код использует CDN jQuery для рендеринга jQuery в файле разработки. См. строка 4 вкладки HTML.

Вот объяснение вкладки JavaScript:

• Строка 1 : файл начинается с ＄(document. ready() , что заставляет jQuery ожидать рендеринга HTML перед запуском.

• Строка 2 : содержит содержимое функции обратного вызова

  ＄(document.ready() . Здесь мы выбираем h2 с помощью jQuery и присваиваем ему событие клика.

• Строка 3: Эта строка содержит содержимое функции обратного вызова события click. Мы снова выбираем h2 с помощью jQuery, но на этот раз с другой назначенной ему функциональностью. Код здесь запустится, как только мы нажмем h2 . Это изменяет содержимое h2 и придает ему зеленый цвет.

Поздравляем! Мы успешно использовали jQuery в файле JavaScript.

СВЯЗАННЫЕ ТЕГИ

jquery

javascript

УЧАСТНИК

Аканде Олалекан Тохиб

Copyright ©2023 Educative, Inc. Все права защищены

JavaScript, jQuery и JSON | Coursera

Об этом курсе

23 995 недавних просмотров

В этом курсе мы рассмотрим язык JavaScript и то, как он поддерживает объектно-ориентированный шаблон, уделяя особое внимание уникальному аспекту подходов JavaScript к объектно-ориентированному программирования. Мы рассмотрим краткое введение в библиотеку jQuery, которая широко используется для выполнения в браузере манипуляций с объектной моделью документа (DOM) и обработки событий. Вы также узнаете больше о нотации объектов JavaScript (JSON), которая обычно используется в качестве синтаксиса для обмена данными между кодом, работающим на сервере (например, в PHP), и кодом, работающим в браузере (JavaScript/jQuery).

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

Гибкие сроки

Гибкие сроки

Сброс сроков в соответствии с вашим графиком.

Совместно используемый сертификат

Совместно используемый сертификат

Получите сертификат по завершении

100% онлайн

100% онлайн

Начните немедленно и учитесь по собственному графику.

Лаборатории Coursera

Лаборатории Coursera

Включает практические учебные проекты.

Узнайте больше о Coursera Labs External LinkSpecialization

Курс 4 из 4 в специализации

Веб-приложения для всех

Средний уровень

Средний уровень

Часов для прохождения

Прибл. 26 часов

Доступные языки

Английский

Субтитры: арабский, французский, португальский (европейский), итальянский, вьетнамский, немецкий, русский, английский, испанский

Навыки, которые вы приобретете

• Препроцессор гипертекста (PHP)
• Jquery
• JavaScript

Гибкие сроки

Гибкие сроки

Сброс сроков в соответствии с вашим графиком.

Совместно используемый сертификат

Совместно используемый сертификат

Получите сертификат по завершении

100% онлайн

100% онлайн

Начните немедленно и учитесь по собственному графику.

Coursera Labs

Coursera Labs

Включает практические учебные проекты.

Узнайте больше о Coursera Labs Внешняя ссылкаСпециализация

Курс 4 из 4 в специализации

Веб-приложения для всех

Средний уровень

Средний уровень

Часов для прохождения

Прибл. 26 часов

Доступные языки

Английский

Субтитры: арабский, французский, португальский (европейский), итальянский, вьетнамский, немецкий, русский, английский, испанский

Инструктор

Чарльз Рассел Северанс

Клинический профессор

Школа информации

3 869 258 Учащиеся

56 Курсы

Предлагает

University of Michigan

Миссия Мичиганского университета — служить народу Мичигана и всему миру. благодаря превосходству в создании, передаче, сохранении и применении знаний, искусства и академических ценностей, а также в развитии лидеров и граждан, которые бросят вызов настоящему и обогатят будущее. 9Наполовину заполненная звезда 24

4 звезды

13,90%

3 звезды

2,42%

2 звезды

1,91%

1 звезда

3,31%

ЛУЧШИЕ ОТЗЫВЫ ОТ JAVASCRIPT, JQUERY И JSON 900 49 Заполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звезда

от ZAA 16 августа 2020 г.

Многому научился в пути! Кстати, доктор Чак тоже забавный профессор! Хахаха, обожаю его!

Заполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звезда

от CC1 июня 2021 г.

Замечательный курс. Я действительно научился запрашивать json из jquery и отображать на веб-странице. но задание в основном было сосредоточено на запросе данных из различных таблиц, таких как многие ко многим и все.

Заполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звезда

от ABA26 апреля 2019 г.

Отличный курс для всех, кто заинтересован в создании прочной основы для веб-разработки. Быстро развивающийся, но всеобъемлющий и твердый в основах.

Заполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звезда

by CGDec 2, 2020

Очень хороший курс! Шаг за шагом и от простого к сложному. Профессор фантастический, и он может спасти мою карьеру.

Просмотреть все отзывы

О специализации «Веб-приложения для всех»

Эта специализация представляет собой введение в создание веб-приложений для всех, кто уже имеет базовые знания об адаптивном веб-дизайне с использованием JavaScript, HTML и CSS. Веб-приложения для всех — это введение в разработку веб-приложений. Вы будете разрабатывать веб-приложения и приложения баз данных на PHP, используя SQL для создания базы данных, а также функциональные возможности JavaScript, jQuery и JSON.