Это одна из самых популярных библиотек JavaScript . И это неудивительно для тех, кто её использует. Она позволяет упростить, ускорить и, что самое удивительное, улучшить разработку скриптов на JavaScript .

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

• Очень удобная работа с элементами , основанная на селекторах CSS .
• Отличная кроссбраузерность . Многие программисты не задумываются над кроссбраузерностью, однако, это необходимо, ведь один и тот же код разные браузеры могут обрабатывать по-разному. все эти нюансы учитывает, и Вам уже не надо об этом задумываться.
• Отличные возможности по анимации . Анимация украшает страницу и делает её более приятной для использования. Проще сделать анимацию, чем это реализовано в , просто невозможно: огромные возможности при простоте использования.
• Большое количество готовых плагинов . Чтобы сделать тот же слайдер изображений на JavaScript , может потребоваться несколько дней. А установить и настроить готовый плагин можно за несколько минут.

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

1) Как установить .

2) Что такое функция $() в .

3) Как сделать выборку элементов в .

4) Как работать с выборкой на .

5) Как добавлять и удалять элементы в .

6) Как обработать события на .

7) Как делается анимация на .

8) Как сделать зумирование изображений на .

9) Как сделать плавную кнопку "наверх" на .

10) Как сделать динамическую загрузку файлов на сервер.

11) Как делается адаптивная вёрстка на .

12) Как отправлять асинхронные запросы на

13) Как отправлять Ajax запросы с помощью методов $.post() и $.get()

14) Как сделать радио кнопки в виде слайдера на .

15) Как установить слайдер slick .

16) Как сделать архив с помощью плагина для .

17) Как сделать экскурсию по сайту на .

18) Как сделать красивые табы на JQuery .

19) Как создать титры на сайте с помощью плагина для .

20) Как создать красивый progressbar с помощью плагина для .

21) Как сделать замок по шаблону на .

22) Как добавить динамики на сайт с библиотекой dynamo.js .

23) Как сделать видео на заднем фоне с помощью .

24) Как сделать подтверждение отправки почты на .

25) Как сделать красивый и эффектный слайдер на JQuery .

26) Как сделать красивый выпадающий список на .

27) Как сделать красивое всплывающее окошко на JQuery , используя WebUI-Popover .

28) Как сделать красивые уведомления на JQuery , используя плагин Noty .

29) Как сделать красивое выпадающее меню с интересным эффектом на CSS и .

30) Как сделать задний фон в виде частиц на .

31) Как сделать интерактивное сравнение двух фотографий на JQuery .

32) Как сделать круговой ползунок на JQuery .

33) Как сделать облака на JQuery .

34) Как вывести время, прошедшее с момента опубликования записи , на .

35) Как вывести специальные символы на JQuery .

36) Как сделать счетчик обратного отсчета на JQuery .

37) Как сделать кастомное меню на JQuery .

38) Как сделать анимацию при загрузке страницы на .

40) Как сделать выезжающее меню на JQuery .

41) JQuery LightGallery - плагин для создания галерей.

42) Как обернуть элемент в макет браузера или устройства на .

43) Как сделать красивую галерею с сортировкой на JQuery .

44) Как сделать интерактивный 3D объект на JQuery .

45) Как сделать всплывающее окно на JQuery .

46) Как сделать скроллинг параллакс эффект .

47) Как сделать гамбургер меню на CSS и JS. Часть 1.

48) Как сделать гамбургер меню на CSS и JS. Часть 2.

49) Как сделать выдвигающийся поиск по клику .

50) Как сделать валидацию формы на jQuery .

51) Как сделать маску ввода телефона на jQuery .

52) Как работать с библиотекой jQuery .

53) Как работать с библиотеке jQuery UI .

54) Как использовать jQuery UI Slider .

55) Как применить виджет jQuery UI Datapicker .

56) О плагине для табов EasyTabs .

57) Как настроить слайдер BxSlider .

58) Как поставить таймер обратного отсчёта на сайт .

59) Как сделать AJAX-форму без перезагрузки страницы .

60) Как создать эффект печатающегося текста на сайте .

61) На реальном примере про анимацию SVG вектора .

62) Фильтры в jQuery.

63) Как получить селектор в jQuery .

64) Как манипулировать атрибутами в jQuery .

65) Как работают jQuery события мыши .

66) Как работают jQuery эффекты .

67) Как сделать (часть 1).

68) Как сделать всплывающее окно popup на jQuery (часть 2).

69) Как сделать фильтрацию по первым буквам на jQuery .

70) Как сделать анимацию кнопки меню гамбургер .

71) Как сделать адаптивное меню гамбургер .

72) Как делать Mobile first верстку .

73) Как делать плавный якорь на jQuery .

74) Как сделать прокрутку страницы вверх .

75) Как сделать виджет аккордеон библиотеки .

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

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

Очень интересный скрипт. Позволяет, используя HTML5, сгенерировать PDF документ из содержимого страницы. Теперь для скачивания статьи в PDF больше не нужно использовать сторонние сервисы, все можно сделать, как говорится, «не отходя от кассы»

Очень навороченный скрипт JQuery, который умеет делать с объектами практически все. Сжимает, двигает, растягивает, крутит по всякому — масса вариантов для использования. Использует механизм трансформации CSS3, весит очень мало — всего 2 килобайта в сжатом виде.

Хорошие новости для тех, кто оптимизирует свой сайт для мобильных устройств с использованием @media. Этот маленький по объёму слайдер работает со всеми браузерами, начиная с IE6, мобильными устройствами на всех современных ОС и позволяет масштабировать картинки под разрешение экрана устройства. Всем мобильным разработчикам — мастхэв

Скрипт-инструмент для создания mobile-friendly сайтов. Поддерживает HTML5, имеет кучу настроек для комфортной работы разработчика.

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

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

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

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

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

С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

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

Tabulations
Описание: Позволяет отображать содержимое страницы в табах.
Когда и где используется: Когда вы хотите освободить место на экране, предоставив быстрый доступ к скрытой информации. Часто используется в виджетах к различным премиум темам WordPress.
Скрипт, пример, документация
Плагин к WordPress

Coda slider
Описание: Создает слайдер, как на скриншоте с сайта Coda .
Когда и где используется: Как и в случае с Coda`ой, этот скрипт отлично подходит для представления продуктов или сервисов, сгруппированными по разделам. Пользователи получают возможность быстрого обзора, а также интуитивно понятную навигацию.
Скрипт, пример, документация
Тема к WordPress

Galleria
Описание: Galleria – javascript галерея, написанная в jQuery. Загружает изображения одно за другим и отображает к ним эскизы.
Когда и где используется: Чтобы показать фотографии какого-либо события или продукта, например.
Скрипт, пример, документация

jTip
Описание: Подсказки, реализованные в jQuery.
Когда и где используется: Когда требуется дать больше информации об объекте в контексте статьи или реализовать подсказки пользователю в различных веб-формах.
Скрипт, пример, документация
Плагин к WordPress

Stylesheet switcher
Описание: Позволяет посетителям на вашем сайте самостоятельно менять стили оформления «в один клик».
Когда и где используется: Когда вы хотите позволить пользователю выбирать шрифты различного размера, отображать информацию, оформленную для мобильного телефона либо для вывода на печать, позволить ему настраивать цвета. Stylesheet switcher может реально помочь повысить удобство вашего сайта.
Скрипт, пример, документация
Плагин к WordPress

jQuery Accordion menu
Описание: Позволяет создавать динамические меню.
Скрипт, пример, документация
Плагин к WordPress

Slider Gallery
Описание: Представляет продукты/изображения в виде прокручиваемой галереи.
Когда и где используется: Когда вы хотите уместить все элементы в сайдбаре, но не хватает места под все опции.
Скрипт, пример, документация

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

jGrowl
Описание: Выводит сообщения в браузере также, как Growl в MacOSX
Когда и где используется: Если вы сообщаете пользователю о действии, но не хотите чтоб он покидал текущую страницу/обновлял ее. Это отличный способ подтвердить действия выполненные пользователем, например регистрация. Также можно использовать jGrowl в различных магазинах и т.п. для подтверждения добавления товара в корзину или подтверждения транзакции.
Скрипт, пример, документация

Наверняка, Вы слышали о прекрасной библиотеке Javascript под названием jQuery. Что же такое на самом деле jQuery?

Как облегчить жизнь веб-разработчика? С чего начать? jQuery делает написание Javascript интересным и более простым. С помощью этой библиотеки многие достаточно сложные аспекты Javascript можно легко внедрить в любые приложения.

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

Что же такое jQuery?

jQuery очень легкая библиотека Javascript (некоторые называют ее фреймворком), которая избавляет от головной боли при написании Javascript кода. У нее много очень мощных возможностей, как например: отслеживание DOM, добавление красивых эффектов и анимаций к элементам, супер простые Ajax техники и методы. На главной странице сайта jQuery наиболее точное, на мой взгляд, описание:

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

Какие преимущества jQuery?

Давайте коротко пройдемся по некоторым преимуществам и свойствам данного фреймворка:

Существенно уменьшается количество кода (необходимого для работы скрипта) по сравнению с JavaScript, что в свою очередь означает меньше временных затрат и более читабельный код. Далее в статье будут рассмотрены некоторые примеры.

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

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

Использование Ajax становится намного проще. Вам потребуется всего 5 строк кода (иногда меньше) для создания простого Ajax запроса.

Огромное количество плагинов, с помощью которых можно сделать практически все что угодно.

С jQuery весело:)

Как начать?

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

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

Готов ли документ?

Для выполнения нашего первого jQuery скрипта, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM (когда "документ будет готов" - дословный перевод с англ.). Заметьте, что это очень похоже на популярное событие ‘onload’, но не является тем же самым. Давайте взглянем на пример:

$(document).ready(function(){ //Code here });

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

Для ленивых кодеров, или для тех, у кого каждый символ на счету, можно еще сократить код выше:

$(function(){ //Code here });

Ваш первый скрипт jQuery

Мы уже знаем, как ссылаться на библиотеку. Также нам немного понятна функция document.ready. Теперь пришло время написать простейший скрипт.

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

$(document).ready(function(){
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function(){
myQuote.show(500);
});
});

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

Как говорилось выше, мы помещаем весь код к выполнению внутри функции $document.ready().

Мы присваеваем id нашей цитаты (my_quote) переменную myQuote. Теперь у нас есть доступ к цитате с id my_quote.

Вот и все. При нажатии на кнопку в течении 0.5 секунды будет показана цитата. Очень легко, не правда ли?

Продолжение следует....

Спасибо за внимание! Всего наилучшего!

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

• — два очень простеньких универсальных варианта создания табов-переключателей. Пример в сайдбаре.

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

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

• — в данный момент рабочий пример находится справа вверху под поисковой формой. Думаю убрать эту функцию с блога. Интересно, кто-нибудь вообще пользуется ей?
• — скрипт, который меняет размер шрифта страницы в зависимости от размера окна браузера. Для себя я применения данному скрипту пока нигде не нашел.
• — предпросмотр появляется под формой добавления коммента по мере набора текста. Прицепить можно к любому сайту с формой.
• — предпросмотр появляется при клике на соответствующую кнопку и отображается вместо текстового поля. На мой взгляд, это более красивое решение, чем в первом варианте. Этот скрипт также можно приделать к любому сайту.
• . Этот скрипт — для пользователей веб-интерфейса Твиттера и любителей браузера Opera. Хотя, думаю, есть способ прикрутить его и к другим браузерам.
• — по мотивам вышеуказанного 2-го варианта я создал этот плагин. Мне очень нравится, как все получилось. На сегодняшний день его скачали около 8 тысяч раз.
• — аналогичный предыдущему плагин, только для страницы создания/редактирования записи в админке.
• — это для тех, кто умеет подключать UserJS-скрипты к своему браузеру. Удобная всплывающая форма авторизации.
• — показывает посетителю приветственное сообщение рядом с формой добавления коммента, если он хотя бы раз оставлял комментарий.

— это для пользователей WordPress, у которых стоит функция кэширования от Максима.

У скрипта есть косяк с UTF-8 — если писать имя русскими буквами через FireFox, то из cookie символы вставляются кракозябрами. В комментариях предложили решение, но у меня что-то ничего не вышло.

• — идея была позаимствована на Хабрахабре. Имеет смысл ставить, когда в комментариях сайта формируются большие ветки обсуждений.

— интерфейс работает с помощью jQuery, а перевод — с помощью API Гугла.

У меня получилось очень удачное и популярное решение — мой виджет в данный момент стабильно держит 2-е место в списке самых скачиваемых , что не может не радовать.

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

• Цитирование комментария — если выделить какой-либо кусок текста в комментариях, то около выделения всплывает панелька со ссылкой «вставить цитату в поле ответа», при клике на которую выделенный текст вставится в форму добавления коммента.
• Валидация полей «Имя» и «Е-mаil» в форме добавления комментария. Если одно из этих поле заполнено неправильно, то они подсвечиваются.

Вот такой получился немалый список. Думаю, со временем он еще более разрастется — уж больно люблю jQuery и процесс написания скриптов на нем.

Вообще, jQuery для меня — это такой следующий этап в моем развитии, как веб-разработчика, после CSS и HTML. Если в последних двух технологиях я уже довольно силен и тут двигаться особо уже некуда, то jQuery — это, как говорится, поле непаханое, и идти в этом направлении есть куда.

Блоггер Max1mus на своем персональном блоге публикует актуальные способы заработка в Интернете , полезную информацию о ведении блогов, SEO, SMO, а также делится личным опытом о раскрутке сайтов.