jQuery — всё по этой теме для программистов


Оглавление (нажмите, чтобы открыть):

Использование библиотеки jQuery UI на практике

Веб-программирование — jQuery UI — Использование библиотеки jQuery UI на практике

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

В качестве отправной точки для данной статьи мы используем вариант документа, приведенный в примере ниже:

В этом документе необходимые элементы генерируются с помощью шаблона данных (для сокращения разметки документа) на основании информации о продуктах, извлекаемой из файла JSON с помощью метода getJSON(). Вся совокупность элементов, соответствующих отдельным видам продукции, собирается в единственном элементе с идентификатором products. Файл mydata.json находиться в одном каталоге с документом и содержит следующие данные:

Также не забудьте добавить файл таблицы стилей styles.css:

Вид исходного документа в окне браузера представлен на рисунке:

Отображение данных

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

Здесь в функцию, передаваемую методу getJSON(), добавлен код, предназначенный для создания виджета Accordion, включая построение необходимой структуры элементов и вызов метода accordion(). В новой реализации названия цветов извлекаются из соответствующего источника с помощью объекта данных JSON, но для генерации HTML-элементов (которые затем разбиваются на группы и помещаются в оболочки, образуемые элементами div, в соответствии с требованиями виджета Accordion) по-прежнему используется подключаемый модуль шаблонов данных.

Вид документа в окне браузера после добавления вызова метода accordion() представлен на рисунке:

Добавление корзины покупателя

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

Давайте рассмотрим этот код более подробно.

Помещение виджета Accordion в оболочку

Мы хотим, чтобы корзина покупателя отображалась рядом с панелями виджета Accordion. Для этого мы помещаем элемент, для которого вызывается метод accordion(), внутрь другого элемента div:

Работа виджета Accordion будет нарушена, если окажется, что он не занимает все пространство родительского элемента по ширине, поэтому мы добавляем оболочку и фиксируем ее ширину с помощью CSS-свойства width:

Таким образом, виджет Accordion, как и должно быть, благополучно располагается по всей ширине элемента-оболочки div, который занимает только 65% ширины своего родительского элемента.

Добавление таблицы

Для отображения корзины мы используем элемент table, который включаем в число статических элементов документа:

Как и в случае виджета Accordion, мы помещаем элемент table в оболочку, ширину которой устанавливаем с помощью CSS-свойства:

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

Обработка изменений входных значений

Чтобы связать таблицу с виджетом Accordion, мы реагируем на события change, порождаемые элементами input, которые создаются в функции getJSON(). Это делается с помощью следующей функции-обработчика:

Эта функция-обработчик решает множество задач. Прежде всего, когда пользователь изменяет какое-либо значение, осуществляется проверка того, имеется ли уже в таблице строка, соответствующая данному продукту. В случае отсутствия такой строки создается новая строка, для генерации которой используется шаблон:

Необходимые для данного шаблона значения получаются с помощью методов ядра jQuery, которые извлекают информацию из элемента input, породившего событие. Мы хотим отображать также названия продуктов, и с этой целью выполняем поиск в DOM-дереве для нахождения ближайшего элемента label и считывания его содержимого:

Вновь созданная строка присоединяется к таблице. Ряд-заполнитель был скрыт еще раньше в самом начале выполнения функции-обработчика:

Процесс добавления новых строк таблицы представлен на рисунке. Пользователь вводит значение в текстовом поле, и как только это поле теряет фокус ввода, в корзине покупателя появляется новая позиция:

Удаление строк

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

Удалив строку из таблицы корзины покупателя, мы находим среди продуктов элемент input, связанный с данной строкой. Затем мы используем навигацию по DOM-дереву для поиска элемента, являющегося ближайшим предшествующим сестринским элементом по отношению к элементу div, который содержит данный элемент input, и передаем его индекс свойству active виджета Accordion. Это приводит к раскрытию той части виджета Accordion, которая содержит элемент, только что удаленный пользователем из корзины.

Наконец, мы устанавливаем значение данного элемента input равным 0 и вызываем метод select(), в результате чего этот элемент получает фокус ввода, а содержащееся в нем значение выделяется.

Обновление существующих строк

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

Переменная row — это объект jQuery, содержащий элемент tr для продукта в таблице. Доступ к элементу td осуществляется по номеру позиции (с помощью метода eq()), а его содержимое устанавливается с помощью метода text().

Применение темы оформления

Теперь наша корзина функционирует вполне удовлетворительно, но ее внешний вид оставляет желать лучшего. К счастью, jQuery UI предоставляет библиотеку CSS-стилей (CSS-фреймворк), которые можно применить к элементам, чтобы они выглядели так же, как и виджеты после применения к ним выбранной вами темы стилевого оформления. В примере ниже показано, насколько просто получить требуемый результат путем добавления классов в HTML-элементы документа:

Для элемента table дополнительно к использованию указанных классов задано отсутствие границ (рамки):

Полученный результат проиллюстрирован на рисунке:

Создание кнопки jQuery UI

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

а также добавим пару CSS-стилей:

Здесь мы поместили элементы buttonDiv и basket в новый элемент div и изменили некоторые CSS-стили для настройки позиций этих элементов. И наконец, мы вызываем метод button() для создания кнопки jQuery UI, как показано на рисунке:

Добавление диалогового окна для завершения заказа

Мы хотим, чтобы, прежде чем завершить оформление заказа, щелкнув на кнопке «Заказать», пользователь предоставил нам некоторую дополнительную информацию о себе. Чтобы внести некоторое разнообразие, воспользуемся виджетом Dialog. Также добавим функцию обработки введенных пользователем данных. В примере ниже показан конечный код примера, а затем мы более подробно рассмотрим нововведения:

Здесь мы добавили элемент div, содержимое которого будет отображаться для пользователя в элементе body, а также некоторые CSS-стили, заменяющие стили из файла styles.css, которые импортируются в документ с помощью элемента link. Для создания диалогового окна используется следующий вызов метода dialog():

Здесь мы создаем модальный вариант диалогового окна, в котором есть две кнопки. После щелчка на кнопке «Отмена» диалоговое окно закрывается. Щелчок на кнопке «OK» приводит к вызову функции sendOrder():

В этой функции мы получаем значения, содержащиеся в каждом из текстовых полей, и добавляем их в виде свойств в объект, который затем преобразуем в формат JSON и выводим на консоль.

Далее мы возвращаем документ в исходное состояние путем закрытия диалогового окна, сброса значений в текстовых полях, перехода на первую вкладку виджета Accordion и очистки корзины. Само диалоговое окно выглядит следующим образом:

Щелчок на кнопке «OK» приводит к генерации данных в формате JSON и восстановлению исходного состояния документа. Консольный вывод имеет следующий вид:

Когда пользователь щелкает на кнопке, мы проверяем, является ли элемент placeholder видимым. Это делается с помощью селектора jQuery, предоставляющего объект, который содержит элементы лишь в том случае, если указанный элемент виден на экране.

Здесь видимость элемента placeholder используется для индикации того, выбран ли пользователем хотя бы один продукт. Если в корзине покупателя есть хотя бы один продукт, этот элемент скрыт, и его появление говорит о том, что ни один продукт выбран не был:

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

Мастер Йода рекомендует:  Бесплатный курс английского для IT-специалиста

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

В этой статье мы переработали простой документ, включив в него интерактивные возможности, предлагаемые библиотекой jQuery UI. В него были добавлены виджеты Accordion, Dialog и Button, а также использовалась функциональность классов CSS-фреймворка jQuery UI для управления внешним видом других элементов.

Учебник jQuery для новичков от Трепачёва Дмитрия

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В данном уроке мы с вами начнем изучать библиотеку jQuery. Для работы с ней вы должны владеть хотя бы минимальными навыками JavaScript.

Если вы не изучали предыдущие уроки (но умеете что-то делать на JavaScript) — можете их пока не смотреть, дальше по тексту будут раскиданы ссылки на те темы, которые нужно будет знать к конкретному уроку.

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

Что такое jQuery?

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

Сравните два кода, которые делают одно и тоже — первый на чистом JavaScript, а второй — на jQuery:

Код jQuery выглядит намного компактнее и проще для написания.

Сравните еще два кода: в первом мы получаем все элементы с классом .www и ставим им красный цвет текста с помощью чистого JavaScript, а во втором — на jQuery:

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

Подключение jQuery

Для начала его нужно скачать jQuery с официального сайта. Затем положить полученный файл в папку с вашим сайтом и подключить его таким образом:

После подключения можно начинать писать код с использованием этой библиотеки.

Видео для тех, кто ничего не понял

Если вам все равно не понятно, что, как и куда подключать — смотрите следующее видео:

Здесь скоро появится видео по подключению jQuery.

Начало работы с jQuery

Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.

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

Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.

Давайте получим все элементы с классом .www:

А теперь получим только абзацы с классом p.www:

А теперь получим элемент с id, равным www:

Как вы видите, используются обычные CSS селекторы, подобно методу querySelectorAll. Только querySelectorAll появился гораздо позже, чем jQuery, и обладает меньшими возможностями (зато работает быстрее).

Наборы jQuery

Обратите внимание на переменную elems:

В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.

Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).

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

К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:

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

Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на ‘новый текст’:

JQuery — всё по этой теме для программистов

Частная коллекция качественных материалов для тех, кто делает сайты

  • Фотошоп-мастер2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
  • Главная»
  • Уроки»
  • Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

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

Зачем нам jQuery?

В арсенале современного web-программиста – множество инструментов, которыми нужно уметь пользоваться. Это всевозможные библиотеки, фреймворки, плагины, утилиты, системы управления контентом. Одно из самых популярных средств – небольшая, но богатая возможностями библиотека jQuery (jQ), написанная на языке JavaScript (JS). Если говорить проще, jQuery – это набор полезных функций, упрощающий манипулирование элементами HTML и стилями CSS, создание AJAX-запросов, обработку событий (например, клик мыши), управление анимацией – словом, того, что называется «интерактивность», взаимодействие с пользователями сайта.

Какие задачи помогает решить эта библиотека? Обязательно ли ее изучать? Какие преимущества имеет jQuery перед «чистым» JavaScript? Об этом и не только – в нашей статье.

Навигация по тексту:

Что такое jQuery?

Сравни 2 участка кода:

var element = document.getElementById(‘header’);

var element = $(‘#header’);

Даже для человека, не изучавшего курс JavaScript, ясно, что второй пример более понятный и лаконичный, чем первый. Между тем в обоих скриптах происходит одно и то же: выборка HTML-элемента с идентификатором «header». Просто в первом случае используется чистый, нативный JavaScript, а во втором – jQuery.

Однако возможности jQ не исчерпываются банальной выборкой элементов. С помощью этой библиотеки программист может быстро получить доступ к структуре web-документа и его отдельным узлам, удалить или добавить элемент (видели когда-нибудь всплывающую подсказку при наведении на текст или изображение?), создать на сайте стильную анимацию, организовать фотогалерею и многое другое.

Итак, jQuery позволяет быстро и легко взаимодействовать с HTML, каскадными таблицами стилей (CSS) и существенно упрощает написание кода на JavaScript.

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

Кроссбраузерность. Синтаксис jQ поддерживается всеми современными web-обозревателями, и ты можешь быть уверен, что стильный слайдер, который ты создашь на jQuery и CSS, увидит каждый из посетителей сайта, каким бы браузером он ни пользовался.

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

Удобная работа с событиями и визуальными эффектами. Нужно создать всплывающую подсказку при наведении мыши? Запустить анимацию при клике? Создать эффект падающего снега сразу после загрузки страницы? Запросить у пользователя его данные? Все это легко реализуется на jQuery. JS с этими задачами тоже справляется, но в этом случае код получается более громоздкий и менее гибкий.

«Внятная» документация. На официальном русскоязычном ресурсе ты можешь ознакомиться не просто с возможностями библиотеки, но и со всеми ее функциями, удобно разбитыми на категории. Читай и внедряй.

Пожалуй, главное преимущество – тысячи готовых плагинов. Не хочешь писать фотогалерею с нуля? В сети масса готовых вариантов! Нужен тултип? Слайд-шоу? Проверка форм HTML? jQuery умеет все, нужно только найти плагин.

Одно из главных достоинств jQuery – множество готовых плагинов (фотогалерей, слайдеров и т. д.)

Недостатки jQuery

Будем объективными и постараемся выделить несколько минусов библиотеки jQ:

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

Размер библиотеки. jQuery весит около 19 Кб, что теоретически может отразиться на скорости загрузки web-страницы, особенно на старых компьютерах и при нестабильном подключении к сети. Однако и здесь мы возвращаемся к первому «недостатку» – большинство современных провайдеров предоставляют приемлемый по скорости интернет, поэтому подавляющее число пользователей не увидит никаких проблем при загрузке страницы с кодом jQuery вместо JS.

Мастер Йода рекомендует:  CSS советы и приёмы

Итак, недостатки jQ оказались неубедительными – эта библиотека представляет собой действительно полезный и гибкий инструмент для web-разработки.

Зачем программисту jQuery?

Безусловно, без этой библиотеки можно обойтись. Скажем по-другому: программисту необязательно проходить курс jQuery, если «по долгу службы» ему лишь изредка требуется взаимодействие c HTML-элементами – для этих целей вполне подойдут те самые нативные методы, то есть «чистый» JavaScript. Если же web-разработчик часто имеет дело не с поверхностным «jQuery-HTML скриптингом», а с необходимостью «погружаться» в код для поиска, выборки, изменения и удаления HTML-элементов и CSS-свойств, то здесь знание jQ будет очень кстати. Это поможет избежать ненужной сложности и необходимости изобретать велосипед в виде громоздкого и неудобочитаемого кода.

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

jQuery помогает ускорить разработку проекта

Как изучать jQuery?

Чтобы научиться пользоваться возможностями этой библиотеки, сначала следует пройти курс HTML + CSS, так как jQ не существует сама по себе, а работает только «в связке» с узлами web-сайта и их свойствами. Нужен пример? Представь, что тебе требуется сделать плавное затухание и появление заголовка на сайте. С помощью jQuery это можно реализовать так:

Здесь мы обращаемся к заголовку с идентификатором «main-heading» и сначала приказываем ему исчезнуть, а затем снова проявиться. Цифры в скобках определяют скорость выполнения эффектов (в миллисекундах). Вот и все J. Действительно просто, не так ли?

Кроме HTML, jQuery отлично взаимодействует с CSS. Например, следующий код изменяет CSS-свойства элемента с идентификатором block:

По сути, здесь меняется 5 свойств: ширина элемента, непрозрачность, отступ слева, размер шрифта и толщина рамки.

Итак, первым шагом на пути к изучению jQuery JS должно стать освоение языков HTML и CSS. На втором этапе можно пройти обучение JavaScript либо сразу приступить к освоению библиотеки jQuery – и та, и другая технология самодостаточны и вполне могут изучаться отдельно друг от друга. Главное – все тестировать на практике. Лучше всего сразу браться за решение реальных задач – создание анимации, фотогалереи, всплывающих элементов и пр.

В нашей Академии обучение jQuery проходит в творческой, непринужденной атмосфере.
На занятиях даются «боевые» задачи и разбираются реальные примеры из практики.

Хочешь стать крутым web-разработчиком? Оставляй заявку!

Что такое jQuery?

Дата публикации: 2020-12-05

От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.

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

Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.

Однако, jQuery хорош не только тем, что обеспечивает выборку любого элемента на странице, при этом выборку гибкую. Используя jQuery вы получаете еще ряд плюсов по сравнению с нативным JS. Вот некоторые из них:

простая работа с событиями;

удобная работа с AJAX (асинхронные запросы к серверу);

удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);

и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).

На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.

Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?

Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.

jQuery. Что это и для чего нужен?

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

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

Преимущества jQuery, сделавшие его популярным javascript-фреймворком:

  1. Небольшой размер файла (примерно 90 Кбайт для версии 1.9.1)
  2. Очень простой синтаксис
  3. Возможность выполнить объединение последовательно вызываемых методов в цепочки
  4. Поддержка дополнительных подключаемых модулей, расширяющих базовые возможности
  5. Огромное Интернет сообщество разработчиков
  6. Наличие понятно написанной документации ( api.jquery.com )
  7. Полезные расширения (например jQuery UI ), предоставляющие дополнительную функциональность Фреймворку

Для того, чтобы подключить jQuery библиотеку, необходимо скачать ее с официального сайта ( jquery.com) и в HTML документе подключить ее как обычный javascript файл:

Однако, существует возможность не скачивать библиотеку с сайта, а подключить последнюю ее версию, хранящуюся на удаленном сайте Google Code:

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

Тем, кто увлекается серверными языками программирования, стоит обратить внимание на Функции PHP для работы со строками

Javascript и jQuery. Интерактивная веб-разработка

Скачать книгу

О книге «Javascript и jQuery. Интерактивная веб-разработка»

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

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

Произведение было опубликовано в 2014 году издательством Эксмо. Книга входит в серию «Мировой компьютерный бестселлер». На нашем сайте можно скачать книгу «Javascript и jQuery. Интерактивная веб-разработка» в формате fb2, rtf, epub, pdf, txt или читать онлайн. Рейтинг книги составляет 4.5 из 5. Здесь так же можно перед прочтением обратиться к отзывам читателей, уже знакомых с книгой, и узнать их мнение. В интернет-магазине нашего партнера вы можете купить и прочитать книгу в бумажном варианте.

JQuery на практике, или мой топ5 ++ JQuery методов

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

В этой статье я хочу рассказать о своём наборе JQuery-методов, который прижился в реальной практике, на примере одного из сайта своей работы. Для новичков в JQuery (среди них, кстати, не исключены профессиональные веб-дизайнеры или программисты) — может упростить понимание общих принципов работы с этим приложением. Для владельцев сайтов — послужить в качестве идейного плацдарма.

Мастер Йода рекомендует:  Dead Man Zero – сервис для тех, кто хранит секреты

В статье рассмотрены методы:

  • Анимация объектов (.animate ())
  • Динамичная смена классов CSS (.css())
  • Динамичная смена содержимого (картинки) (.attr())
  • Действие по таймеру (setInterval)
  • Затухание и возгорание текста (.fadeIn() и .fadeOut())

В конце текста вы найдёте небольшую шпаргалку-словарик методов (написан для себя).

Следует уточнить, что в статье сознательно обходятся JQuery-методы, связанные с AJAX, т.к. это, вероятно, тема отдельной записи.

Библиотека JQuery — установка

Для начала, нам потребуется подключить библиотеку JQuery. Для этого, можно скачать последнюю версию с официального сайта Скачать JQuery , или использовать запрос к гугловской базе. Подключаем скрипт в :

Анимация объекта + определение длины окна

Метод .animate (динамичное преображение объекта).

Стиль выплывающего объекта в CCS-файле: В данном примере, для того, чтобы произвести анимацию выплывающей сбоку области, мы должны сначала определить длину окна (минус отступ слева на 40 пикс.). Для этого используем строку кода:

После определения, создаем анимацию объекта с >

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

Второй пример анимации: увеличение картинки при подведении курсора.

Принцип примерно тот же. Код анимации будет выглядеть следующим образом:

Смена стилей (классов)

Методы .removeClass() (удаление класса) и .addClass() (добавление класса).

В CSS-файле задаем класс .price и .price.over (у меня к ним действует картинка-подклака с белым и красным кругом). Далее пишем код, который будет обрабатывать наведение курсора на круг.

Таким образом, при подведении «мыши» к цене, выделяется красным возможность «Купить сейчас». Если курсор уйдёт в сторону, ценник снова отобразится неактивным — с белой подкладкой.

Смена содержимого через объединяющий родительский элемент

Метод .attr(…, …) (подстановка / смена атрибута) через методы .parents() (обозначение родителя) .find() (находить).

Примерная структура в документе:

Объединяющим является блок с классом «.catalog_item_photos». Т.к. таких иллюстрационных контейнеров на странице несколько (для каждого товара), мы будем обращаться к дочерним элементам того из них, по миниатюрке какого щёлкнули «мышкой». Для этого используется «$(this).parents(‘.catalog_item_photos’)». Внутри родителя начинаем поиск дочернего элемента с классом «.catalog_item_photos_big», используя .find(). Неразрывно от запроса родителя, добавляем к строке запись: «‘.find(‘.catalog_item_photos_big’)». И, наконец, производим смену атрибута src (собственно, адрес картинки заменяем на тот, который был в ссылке «.attr(‘href’)» ). Да, тавтологии концовка не миновала: «.attr(‘src’, $(this).attr(‘href’));».

Обратите внимание на структуру и url_1, url_2, url_3.

По типичной схеме мы переставляем адрес ссылки на большую картнику ( «… » заменяем на «… » ). Если родитель остался тот же, то теперь в нём мы ищем ссылку с классом «.flink», и будем заменять атрибут ‘href’ на тот же ‘href’: «.find(‘.flink’).attr(‘href’, $(this).attr(‘href’));».

Действие по таймеру и затухание-возгорание текста

Методы setInterval() (установка временного интервала — таймера), .text() (подстановка текста), .fadeIn() (возгорание) и .fadeOut() (затухание).

Упрощённый внешний вид блока в документе:

Создаём простенькую функцию (slidingSwitch()), основанную на массиве (mess_tab) строк, которые будут сменяться по таймеру. Они будут вкладываться в элемент с id #message_top. Последовательность смены определяется условным порядковым номером. Когда он доходит до «5», сбрасываем на «0» и начинаем заново. Чтобы обозначить затухание и возгорание в этом переходе, используем метод .fadeOut(), установив время затухания на 700 миллисекунд. Внутри него происходит собственно смена строки на новую, с возгоранием последней также в интервале 700 миллисекунд.

Функция будет выглядеть следующим образом:

Для того, чтобы задать время, по которому будет вызываться эта функция, используем setInterval, установленный на 8 секунд:

Словарик-шпаргалка по JQuery-методам

.add
Добавление элементов к группе соответствющих элементов.
Пример:
$(«p»).add(«div»).addClass(«widget»);
var pdiv = $(«p»).add(«div»);

.addClass()
Добавление заданного класса, CSS

.after()
Вставка контента после означенного элемента.

.animate()
Движение, преображение объекта с анимационным эффектом.

.attr()
Получение значения атрибута, подстановка атрибута для соответствующего элемента.

.click()
Обработка события щелчка «мыши» для указанного элемента.

.dblclick()
Обработка события двойного щелчка «мыши» для указанного элемента.

.contents()
Получение дочерних элементов для соответствющего элемента.

.css()
Получение параметров стиля, подстановка стилей CSS для элемента.

.each()
Выполнение для каждого соответствующего повторяющегося элемента.

$(‘li’).each(function(index) <
alert(index + ‘: ‘ + $(this).text());
>);

.empty()
Очистка указанного элемента от всех дочерних, включая текст и другое содержание.
$(‘.hello’).empty();

event.pageX
Позиция курсора «мыши» относительно левого края документа.

event.pageY
Позиция курсора «мыши» относительно верхнего края документа.

.fadeIn()
Вывод элемента с эффектом возгорания (постепенное появление).

.fadeOut()
Скрытие элемента с эффектом затухания.

.fadeTo()
Регулировка прозрачности к элементу.

Синтаксис: .fadeTo( duration, opacity [, easing] [, callback] )
[Параметры в скобках: продолжительность, прозрачность, простота перехода, операция после выполнения]

Пример:
$(‘#clickme’).click(function() <
$(‘#book’).fadeTo(‘slow’, 0.5, function() <
// Animation complete.
>);
>);

.filter()
Выборка в JQuery по фильтрам.
Например, для чётных строк в перечне (списке), установим серый фон:
$(‘li’).filter(‘:odd’).css(‘background-color’, ‘silver’);
Odd значит нечётный, однако по причине того, что отсчёт будет вестись по индексу с 0, то результат выпадает на чётные строки. Для нечетных, «:odd»
Примечание: Хорошо подходит для создания эффекта «зебры» в таблице (чередование полос).

.find()
Определение дочернего элемента в родителе.

.height()
Определение высоты элемента, CSS.
Примечание: Удобно использовать в веб-дизайне, рассчитанном на «гибкость» элементов соразмерно окну обозревателя.

.hide()
Скрыть элемент.

.hover()
Событие: курсор «мыши» подведён к элементу.

:gt() Селектор — Выборка
Выбрать все элементы после определенного порядкового номера (индекса).
Пример:
Зачеркнуть текст после 4-го столбца.
$(«td:gt(4)»).css(«text-decoration», «line-through»);.

.mousedown()
Обработка события движения курсора «мыши» вниз по элементу.

.mouseenter()
Обработка процесса вступления курсора «мыши» с элемента.

.mouseleave()
Обработка процесса покидания курсора «мыши» с элемента.

.mousemove()
Обработка события движения курсора «мыши» по элементу.

.mouseout()
Обработка события отсутствия курсора «мыши» с элемента.

.mouseover()
Обработка события наведения курсора «мыши» с элемента.

.mouseup()
Обработка события движения курсора «мыши» вверх по элементу.

.next()
Применение к следующему за указанным элементом.

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

:parent Селектор
Выбор всех элементов по родителю одного из элементов, включая текст.

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

.removeAttr()
Удаление атрибута у заданного элемента.

.removeClass()
Удаление заданного класса, группы классов у соответствующего элемента(ов), CSS

.replaceWith()
Замена содержания элемента на новое.
Синтаксис: .replaceWith( Новый контент )
Может быть использовано с функцией.
Синтаксис: .replaceWith( function() <
return $(this).contents();
>); )

.resize()
Динамичное изменение размера.

.scroll()
Скроллинг (прокрутка) элемента.

.scrollLeft()
Скроллинг по левому краю.

.scrollTop()
Скроллинг по верхнему краю.

.show()
Отобразить выбранные элементы.
Примечание: может применяться в скриптинге в паре с методом .hide() (скрыть).

.slideDown()
Эффект слайдинга вниз.

.slideToggle()
Отображение или скрытие элементов с эффектом слайдинга.

.slideUp()
Эффект слайдинга вверх.

.text()
Получение и замена текста в элементе.

.toggleClass()
Добавление или удаление одного и более классов в зависимости от значения сменяющегося аргумента в любом из сопутствующих элементов, CSS

.val()
Получение значения у полей формы, подстановка значения в поля формы.

.width()
Получение длины элемента, CSS.

Курс Javascript/jQuery

Интерактивный мини-курс Javascript и jQuery с нуля

Цель мини-курса Javascript/jQuery дать начальное представление о работе с DOM, как с помощью Javascript ES5, так и с помощью jQuery. Курс Javascript(JS)/jQuery подходит для начинающих с нуля, однако необходимо знать основы HTML/CSS.

  • 21 заданий
  • 1 час видео
  • Сертификат об окончании

О курсе

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

В уроках Javascript/jQuery вы узнаете:

  • Что такое язык Javascript и как его используют
  • Базовый синтаксис классического Javascript (ES5)
  • Как пользоваться переменными в Javascript
  • Какие бывают виды циклов в Javascript и для чего они нужны
  • Что такое массивы и как работать с массивами в Javascript
  • Что такое JSON
  • Функции для работы со строками и массивами в Javascript
  • Как создавать собственные функции
  • Как создавать и обрабатывать события при клике на кнопку
  • Как изменять CSS-стили при клике на кнопку
  • Что такое библиотека jQuery
  • Как встроить jQuery в html-страницу

Язык Javascript изучают не только Frontend (фронтенд) разработчики, но и Backend разработчики, для программирования серверной части веб-сайтов. После завершения мини-курса по основам Javascript и jQuery, мы рекомендуем пройти уроки современного Javascript (ES6, ES7, ES8)

План курса

План мини-курса Javascript/JQuery включает в себя уроки Javascript (видео), тесты Javascript, интерактивные задания Javascript в браузере

Курс «Javascript + jQuery для начинающих»

Новые технологии в сайтостроении 21 мин. 14 сек.

Что ждет вас в курсе:

  • 17 часов практического обучения по JavaScript и jQuery, основанные на современных методиках;
  • Вы получите гарантию на целый год со дня покупки и доступ к форуму для клиентов;
  • Три бонуса, которые обязательно пригодятся вам.

Преимущества курса:

  • Автор предоставляет гарантию курса — если по каким-то причинам он до вас не дойдет, то курс будет отправлен вам повторно;
  • После закачивания курса, вы можете записать его на DVD диск;
  • Если курс вам не подойдет, то вы вправе вернуть деньги назад. Гарантия 365 дней.

Кто автор курса?

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

Другие курсы и тренинги Евгения Попова

Отзывы о курсе «Javascript + jQuery для начинающих»

Редакция ИнфоХит не несет ответственности за содержание отзывов, результаты обучения индивидуальны. Пожалуйста ознакомьтесь с правилами размещения отзывов.

Другие курсы по этой теме

Любое использование или копирование материалов сайта, элементов дизайна и оформления допускается лишь с разрешения правообладателя и только со ссылкой на источник: info-hit.ru

Слово «Инфохит» зарегистрировано в Государственном реестре товарных знаков и знаков обслуживания Российской Федерации 7 ноября 2020 года. Свидетельство № 634857.

Добавить комментарий
Поставьте оценку