Ростелеком ТВ 

Head привязать свои библиотеки jquery ucoz. Что такое jQuery

Последнее обновление: 1.11.2015

Что такое jQuery

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

Хотя мы и можем назвать jQuery библиотекой, он на самом деле понятие "jQuery" объединяет целую экосистему библиотек, построенный вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная для создания визуальных интерфейсов, это и jqyery.mobile, используемая при разработке мобильных сайтов и др.

Какие преимущества несет нам использование jQuery?

    Упрощение работы с кодом . jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.

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

    Кроссбраузерность . jQuery имеет поддержку большинства известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).

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

Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/ . На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.

Библиотека представлена в двух вариантах - Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js . Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.

Библиотека jquery подключается также, как и другие файлы javascript. Например:

Мир jQuery

В данном случае я использовал минимизированную версию библиотеки jquery - jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:

Мир jQuery Добро пожаловать в мир jQuery jQuery JavaScript $(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });

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

У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick="alert("Мир JavaScript"); " .

Другая же кнопка делает практически тоже самое, но только с jquery. Для этой кнопки определен id (id="btn1"), через который в функции jquery мы будет ею управлять.

В самом низу страницы мы определим функцию jquery:

$(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });

Выражение $(function(){}); - это и есть краткое определение функции jquery. Эту функцию принято помещать в конце документа, как в данном случае, перед закрывающем тегом body. Данная функция включает весь код на языке javascript, который будет выполняться при загрузке страницы.

Смысл использованного кода состоит в том, что мы получаем элемент кнопки в выражении $("#btn1") и затем вешаем на него обработчик нажатия. Фактически выражение $("#btn1").click будет аналогично использованию обработчика onclick в теле разметки кнопки. При этом нам не надо никак изменять разметку самой кнопки, что-то туда дописывать. Все делается в функции jquery.

Что в нашем случае она включает? Во-первых, мы устанавливаем цвет кнопки: $(this).css("background-color", "red"); . А дальше просто выводим сообщение на экран.

Использование сетей CDN

В предыдущем примере я подключил библиотеку jquery непосредственно с локального диска, однако нам необязательно загружать библиотеку и размещать на локальном диске рядом с прочими файлами. Вместо этого мы можем использовать сети CDN (Content Delivery Networks). В данном случае сама библиотека будет находится физически в какой-либо сети CDN, а мы можем указать на нее ссылку.

Например, подключим библиотеку jquery, находящуюся в jQuery CDN:

Мир jQuery

Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/

Также мы можем использовать и другие сети CDN. Например:

    Google CDN: предоставляется компанией Google. Все доступные версии можно найти по адресу https://developers.google.com/speed/libraries/devguide?hl=ru#jquery .

    Microsoft CDN: предоставляется компанией Microsoft. Все доступные версии можно найти по адресу https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 .

    Формат подключения будет следующим:

    Yandex CDN: предоставляется российской компанией Yandex. Все доступные версии можно найти по адресу

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

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

Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $() . При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.

Выполнение различных сценариев возможно только после окончания загрузки структуры документа document , когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция

JQuery(document).ready(function() { ... });

Сначала производится обертывание экземпляра document в функцию jQuery() , после применяется метод ready() , которому передается функция function() {...} , исполняемая после загрузки документа.

На практике обычно используется сокращенная форма такой записи jQuery(function() {...}); , или $(function() {...}); .

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

$h = $(".list").parent().parent().detach();

Для хранения нескольких элементов используются массивы JavaScript:

$k = 15;

Правила работы с библиотекой jQuery 1. Как добавить jQuery на веб-страницу

Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:

Использовать версию файла jQuery, размещенную на ресурсах Google , Microsoft или jQuery.com .
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.

Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:



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

Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.

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

2. Правила добавления jQuery на страницу

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

3. Как создать новый html-элемент

Создать пустой html-элемент, например, блок, можно несколькими способами:

1) с помощью краткой формы записи $("")
2) с помощью инструкции $("")
3) с помощью инструкции $("")

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

При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:

$("", {src: "images/flower.jpg", title: "Rose_in_garden", click: function() {...} }).appendTo("body");

Таким образом создается элемент с заданными атрибутами и включается в дерево DOM.

Мельникова 620000 Россия, Свердловская обл., г. Екатеринбург. +7 953 039 559 1 info@сайт

Как подключить библиотеку JQuery

JQuery

Плюсы CDN

Примечание

Минусы CDN

Примечание

На странице jquery.com/download

1. Откройте страницу code.jquery.com в вашем браузере.

JQuery является библиотекой JavaScript, которая позволяет осуществить взаимодействие между JavaScript и HTML. Благодаря JQuery можно получить доступ к любому элементу DOM и манипулировать им. Разработчики предоставляют несколько версий данной библиотеки:

  • для релиза (сжатая версия, в которой удалены все комментарии и пробелы — имеет меньший вес);
  • для разработки (не сжатая версия для разработчиков с сохранённой структурой и пробелами — имеет больший вес)

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

Подключение JQuery при помощи CDN

CDN (Content Delivery Network) — географически распределённая сетевая инфраструктура для доставки контента пользователям. CDN позволяет ускорить доставку контента до оконечного пользователя.

Плюсы CDN

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

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

Минусы CDN

  • если сервер CDN по каким-то причинам не доступен, то библиотека JQuery не будет подключена к вашему сайту.

Примечание : очень минимальный процент что сервера инфраструктуры CDN бывают недоступны.

На странице jquery.com/download нам предлагают несколько серверов CDN (Google CDN, Microsoft CDN, CDNJS CDN и JsDelivr CDN) с которых мы можем загружать и подключать библиотеку. Мы будем использовать стандартный JQuery CDN. Для подключения JQuery выполните несколько простых действий:

1. Откройте страницу code.jquery.com в вашем браузере.

2. Выберите нужную версию и стиль библиотеки.

3. Добавьте следующий код для подключения библиотеки в область вашего сайта.

Атрибуты integrity и crossorigin используются для проверки целостности файла. Это позволяет браузерам гарантировать что файлы размещённые на сторонних ресурсах не были подделаны.

4. Библиотека успешно подключена к вашему сайту.

Подключение локальной библиотеки JQuery

Локальная библиотека — библиотека которую вы загрузили с официального сайта, а затем подключили её из корневой директории вашего сайта.

Плюсы локальной библиотеки

  • Библиотека JQuery всегда будет доступна для посетителей вашего сайта, так как будет загружаться из корневой директории.

Минусы локальной библиотеки

  • Когда посетитель зайдёт на сайт, браузер автоматически загрузит библиотеку JQuery в кэш. Это же в свою очередь скажется на производительности сайта.

Чтобы подключить библиотеку данным способом выполните несколько шагов по следующей инструкции:

1. Откройте страницу jquery.com/download в вашем браузере.

2. Найдите заголовок JQuery и выберите нужную версию.

3. Загруженный файл библиотеки поместите в корневую директорию вашего сайта.

4. Добавьте следующий код для подключения библиотеки в область вашего сайта.

Небольшая подсказка

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

Начнем

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

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

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

$("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.
$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.
$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.
$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.
$("#bigIt").html(

Новье!

) 		изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.
$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.
$(".someBox").empty() очистить от содержимого элементы с классом someBox.

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

Функция $()

Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять "на лету" новый html:

// создадим div-элемент и добавим его в конец элемента с идентификатором content $("

Ба-бах!

" ) .appendTo ("#content" ) ;

Начало работы скрипта

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

window.onload = function () { }

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

$(document) .ready ( function () { // вызов нужных функций скрипта } ) ;

Цепочки методов

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

$("#bigIt" ) .empty () .attr ("class" , "noContent" ) ; // в результате, у элемента с идентификатором bigIt будет удалено все содержимое, // после чего ему будет установлен класс noContent.

эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут "в столбик":

$("div" ) // найдем все div-элементы .parent () // найдем их родительские элементы .css ("heigth" , "10px" ) // установим последним высоту в 10 пикселей .fadeTo (0 , 0.5 ) // установим им (родителям div"ов) прозрачность в 50% .addClass ("divOwner" ) ; // добавим им же класс divOwner

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

Работа с набором элементов

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

$("div").parent() вернет родительские элементы всех div-ов.
$("div").children() вернет дочерние элементы всех div-ов.
$("#someId").next() вернет элемент, лежащий сразу после someId.
$("div").prev() вернет элементы, лежащие перед div"ами.
$("div").eq(i) вернет div-элемент, с индексом i в наборе.
$("div").get(i) вернет DOM-объект div"а, с индексом i.
$("div").get() вернет массив DOM-объеков всех div-ов.
$("div").size() вернет размер набора (количествово div-ов).

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

Отметим различия методов get(i) и eq(i) . Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery , именно его возвращает функция $() .

Ключевым методом, на которой базируются все остальные, является метод animate() , с помощью которого можно задавать плавное изменение различных CSS-свойств:

Animate(properties, , , ) properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение} , например:{opacity: 50, width: 100, height: 200}.
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах. callback — функция, которая будет вызвана после завершения анимации.

Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

$("#mydiv" ) .animate ({ height: "hide" } , 300 ) .text ("Новый текст" ) .animate ({ height: "show" } , 300 ) ;

значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

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

$("#my-div" ) .animate ({ height: "hide" } , 1000 ) ; $("#my-div" ) .animate ({ height: "show" } , 1000 ) ;

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

$("#my-div-1" ) .animate ({ height: "hide" } , 1000 ) ; $("#my-div-2" ) .animate ({ height: "show" } , 1000 ) ;

Ajax

В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax() , но мы ее не будем рассматривать):

$.post(url, , , ) $.get(url, , , ) url - url-адрес, по которому будет отправлен запрос. data - данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}. callback() - пользовательская функция, которая будет вызвана после ответа сервера. dataType - ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности ).

Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

$.get ("/plusOne.php" ) ;

Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра. // После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет // на экран сообщение с данными, присланными сервером. $.get ( "/ajaxtest.php" , { param1: "param1" , param2: 2 } , onAjaxSuccess ) ; function onAjaxSuccess(data) { // Здесь мы получаем данные, отправленные сервером и выводим их на экран. alert (data) ; }

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

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

Item 1 Item 2

Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

Load() .offset() и.position()

Подключение jQuery к вашему сайту

Для того, чтобы функциональность библиотеки jQuery стала доступной на страницах вашего сайта, необходимо скачать файл с библиотекой на официальном сайте jquery (ссылка с текстом "Download the compressed, production jQuery", чтобы скачать библиотеку, необходимо кликнуть по ссылке правой клавишей мыши и выбрать "Сохранить ссылку как.."). Полученный файл нужно будет загрузить на сервер, где лежит ваш сайт, и подключить этот js-файл на страницы сайта:

~lt~script type="text/javascript" src="js/jquery.min.js"~gt~~lt~/script~gt~

Тонкости подключения jQuery к сайту можно почерпнуть .

Титры

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

Библиотеки JQuery знакомы дизайнерам и разработчикам не понаслышке. Это одна из самых популярных библиотек JavaScript, которые вы найдете в Сети.

Каждый уважающий себя дизайнер и разработчик знаком с функциями и возможностями этой библиотеки:

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

Библиотеки JQuery — отличный инструмент для веб-разработчиков. В Сети есть огромное количество бесплатных плагинов.

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

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

1. Treed:

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

2. jQuery Vibrate:


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

3. Flight Indicators:


Очень простой в использовании плагин. Вы сможете отобразить высококачественные индикаторы полета с помощью HTML , CSS3 , JQuery и SVG -изображений.

4. jQuery LightSlider:


jQuery LightSlider — гибко настраиваемый тач-слайдер для отображения содержимого вашего сайта. В наличии эффекты slide и fade . Он совместим со всеми основными браузерами.

5. jQuery GoUp!


Очень прост в использовании. Позволяет посетителям вашего сайта переместиться на самый верх страницы в один клик.

6. Image Cropper:


Этот JQuery плагин позволяет обрезать изображения на сайте. Есть варианты настроек и предварительный просмотр. Вы также сможете установить высоту и ширину.

7. Devrama Slider:


Devrama полностью адаптивный слайдер изображений с уникальными возможностями. Поддерживает как изображения, так и HTML -контент. В наличии несколько вариантов эффектов смены картинок.

8. jQFader:


jQFader простой плагин для применения эффекта fade out к элементам вашего сайта. Прост в использовании. Легко подойдет к использованию на любом сайте.

9. Forkit:


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

10. Vertical News Slider:


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

11. Looking For:


Этот jQuery плагин позволяет выполнять поиск текста в списках, доступных на странице. Скрывает элементы, не совпадающие с поисковым запросом.

12. Browser Swipe:


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

13. Chicken Dinner:


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

14. Flicker Plate:


Полностью адаптивный и очень простой в использовании плагин. Позволяет создать подобие постраничного пролистывания контента на сайте.

15. SVGMagic:


Как конвертировать SVG -картинки в PNG -формат? Воспользоваться этой простой jQuery библиотекой. Она выполняет поиск изображений в SVG -формате на сайте, и, если браузер не поддерживает SVG , конвертирует их в PNG .

16. lazyYT:


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

17. ScrollMagic:


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

18. RowGrid:

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

19. Remodal:


Этот jQuery плагин используется для создания модальных окон с hash -трекингом. Полностью адаптивный, дизайн в стиле flat и очень легок в настройке.

20. Panorama Viewer:


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

21. Floatlabels:


Этот плагин, построенный на jQuery , знаком многим разработчикам. Его работа заключается в выводе некоего текста по-умолчанию в поле ввода и его смена, когда пользователь начинает печатать.

22. Fluidbox:


Очень полезный jQuery плагин. Расширяет и улучшает возможности модуля fluid light box . Работает в виде ссылки на увеличенное изображение.

23. Headroom:


Headroom.js поможет вам скрывать навигацию (либо другой контент из хедера) по сайту. Когда посетитель прокручивает страницу вниз — навигация исчезает, и появляется, когда пользователь возвращается к верхней части страницы.

24. A-Slider:


A-Slider адаптивный и простой слайдер, который, к тому же, поддерживает аудио-контент. Очень прост в использовании и довольно гибко настраивается с помощью HTML .

25. CoverflowJS:


Это проект coverflow , который позволит воссоздать эффект ‘CoverFlow’ с помощью компонентов jQuery UI и трансформаций CSS3 .

26. jQuery URLive:


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

Плагин позволяет веб-приложениям загружать изображения под разные разрешения экранов.

28. jQuery Collapser:


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

29. Parallax ImageScroll:


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

30. Block Scroll:


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

31. Full Page Image Slideshow:


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

32. EasyTree


jQuery плагин EasyTree предназначен для конвертации UL или JSON списков в древовидное меню вашего сайта. Легок в использовании и абсолютно бесплатен.

33. Mapsed:


Mapsed упрощает процесс отметки мест на карте. Вы также можете добавлять и редактировать места, если их нет в Google Places API .

34. Radiant Scroller:


Этот jQuery плагин позволяет создавать респонсивные скроллеры (карусели) с сеточной и простой горизонтальной разметками. Radiant Scroller поддерживает ряд опций для настройки, а также предоставляет API для управления.

35. Image Lightbox:


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

36. Mr.JsonTable:


Этот плагин очень прост в использовании. С его помощью вы сможете оформить JSON данные в виде HTML таблицы, с возможностью пагинации и сортировки. Так же можно скрывать столбцы.

37. ImageFit:


ImageFit может оказаться очень полезным для разработчиков. Выполнен просто. Имеет малый размер. Поможет уместить любое изображение в любом месте вашего сайта.

38. Bootstrap Validator:

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

39. Resize End Plugin:


Этот плагин используется для вывода сообщений после изменения размера окна браузера.

40. Adaptive Backgrounds:

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

41. FormChimp:


jQuery плагин, представляющий собой полностью настраиваемую Mailchimp Ajax -форму, позволяет пользователю легко залогиниться в Mailchimp .

42. Password Peekaboo:


Плагин позволит временно показать вводимый пароль пользователю, если он того захочет.