Последнее обновление: 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).
Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика 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. Все доступные версии можно найти по адресу
(Последнее обновление: 10.09.2017)
Всем привет! Наша тема на сегодня - подключение библиотеки jQuery к Blogger . В начале, что бы вы немного представляли: что такое jQuery и что может jQuery, небольшое введение. jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
Небольшое отступление от нашей темы для тех, кто не знает,что такое JavaScript. JavaScript - это программный участок кода, который внедряется в код шаблона,страницы и позволяет реализовать различные эффекты, недоступные с помощью HTML и CSS. Т. е. в нужные места шаблона или страницы подставляют программные участки кода, которые и выполняют нужную задачу. Это и есть JavaScript. В Blogger для этих целей мы используем удобный гаджет HTML/JavaScript.
Продолжим нашу тему. Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, бо́льшая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно ту JavaScript-функциональность, которая на нём была бы востребована.
Возможности библиотеки jQuery:
Движок кроссбраузерных CSS-селекторовSizzle, выделившийся в отдельный проект;
Переход по дереву DOM, включая поддержку XPath как плагина;
События;
Визуальные эффекты;
AJAX - дополнения;
JavaScript-плагины.
А теперь давайте подключим библиотеку jQuery для Blogger . Подключив один раз, Вам не придётся в дальнейшем при установки скриптов, виджетов на jQuery и т.д. подключать библиотеку.
Как добавить библиотеку JQuery на Blogger/BlogspotЗаходим в панель управления blogger - Шаблон - Изменить HTML, находим и чуть ниже добавляем (или можно выше тега):
Перед тем как начать хочу сказать, что на данную стать меня натолкнул вот этот :
Наталия полностью права, мой блог посвящён, в принципе, JQuery, и JQuery плагинам, но что это такое, и как эти плагины применять на сайтах я не писал ниразу. Дорогие читатели, простите меня:-) я исправлюсь, честно:-)
Наталия, спасибо Вам большое за такой комментарий! И хотелось бы отметить, что Наталья — начинающий блоггер (как и я:-)) и всем родителям советую почитать её блог Маминого малыша . Наталья, у Вас и Вашего блога большое будущее.
Ладно, не будем сильно отвлекаться от темы, давайте перейдём ближе к делу. Дам общее понятие что такое JQuery.
JQueryjQuery – это в первую очередь большая библиотека JavaScript скриптов, с помощью которой можно получить доступ к любому элементу так называемого DOM (объектная модель документа). Другими словами с помощью этого jQuery на сайте можно сделать что хочешь как хочешь и когда захочешь, в частности касается это анимации:-) В основном эту библиотеку используют для украшения сайта, которая уже давно заменила flash . Если не в далёком прошлом красивый сайт можно было сделать только при помощи флеш элементов, то в настоящее время всё это можно сделать с помощью jQuery.
Честно признаюсь не хочется долго объяснять именно значение этого слова, а хочется подробнее остановиться на jQuery плагинах, как их прикрепить к сайту. Но для начала давайте узнаем, что такое плагины.
jQuery плагиныjQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.
Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.
Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами и поставьте вот это:
Вот и всё, первый шаг сделали:-)
ПримерНапример, мне захотелось на свой сайт прикрепить вот такие интересные и красивые картинки с классной анимацией:
Как видите у меня есть три папки с картинками, стилями и с самим скриптом, а также три примера index.html . В данном случае будем использовать именно его.
Далее открываем первый пример, например в Опере, затем нам нужно посмотреть исходный код самой страницы, там же нажимаем правую кнопку мыши и выбираем Исходный код , и по его примеру прикрепляем галерею на свой сайт. В общем смотрим как сделано там и также делаем себе.
Говорю сразу, что все исходные коды могут быть разными, но принцип один и тот же. Я, например, всегда так делаю, смотрю исходный код в примере и так же делаю у себя.
Важные моменты в данном примере.Нужно прикрепить стили именно того плагина, который прикрепляете, в данном случае это делается так:
Эту строчку нужно ставить между тегами и и на той странице где будет сама галерея, если у Вас, например Вордпресс, нужно ставить в header.php .
Так же ещё нужно прикрепить и сам скрипт этой красивой анимации, опять же между тегами:
Ну а сейчас давайте посмотрим, что у меня получилось. Напоминаю, что я создал новую страницу и прикрепил туда галерею. Вот полюбуйтесь:
Обязательно пользуйтесь исходным кодом примера плагина, для того чтобы было легче прикрутить его на свой сайт. Исходный код вы можете посмотреть в моём примере, и сюда его выложу тоже, на всякий случай:-)
< !DOCTYPE html>
Вот в принципе и всё. Самое главное пробуйте сами изменять, вставлять, удалять и т. д. Испортили, скачали ещё раз и всё по новой пока не получится желаемый результат. Надеюсь, что я всё доступным языком Вам рассказал. Если Вам всё же будет что то не понятно обязательно спрашивайте в комментариях. До скорых встреч, друзья.
Библиотеки 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:
Плагин позволит временно показать вводимый пароль пользователю, если он того захочет.
Перед тем, как приступить к изучению библиотеки jQuery, ее следует подключить к нашему документу . Для этого давайте создадим самую простую страницу, без всяких излишеств – index.html, и на ней будем подключать наш jq (сокращение от jQuery, начинайте привыкать).
Как подключить библиотеку jQuery? И где взять код?Есть 2 способа подключения библиотеки к сайту . Перед тем, как начну описывать оба способа, не надо сразу повторять за мной. Сначала прочитайте об этих способах, а потом выберите подходящий вам способ и все подключите. Не волнуйтесь – jQuery подключается одной строчкой кода , поэтому, если вы не обладаете памятью, как у рыбки, то все будет хорошо.
Первый способ – качаем с сайта jquery.comЕсть такой замечательный сайт – это официальный сайт библиотеки. Как любая библиотека, jq разработали простые программисты. Они поняли, что можно уменьшить язык программирования JavaScript, начали долго и усердно трудиться – и в итоге получилась самая распространенная библиотека, горячо любимая веб-программистами.
Важно! Все картинки кликабельны.
Подключение библиотеки jQuery с официального сайта
На картинках ниже я показал небольшие куски кода двух версий.
В принципе, это 2 абсолютно одинаковые версии. Единственная разница между этими файлами – в jQuery сжатой версии весь код написан в одну строчку. В jQuery, которая предназначена для разработчиков – весь код идет с табуляцией, пробелами и соответственно его можно легко читать.
Так как для браузера (а именно браузер обрабатывает этот код) не видит разницы между двумя этими файлами, то лучше на своих «живых» проектах использовать сжатую версию, потому что она намного легче (из-за отсутствия пробелов). А как известно, чем меньше весят исходные файлы сайтов – тем быстрее он загружается, что положительно влияет на и поведенческий фактор.
Блок «1» - размер файла сжатой версии – 96 Кб.
Блок «2» - размер файла версии для разработчика – 280 Кб.
Полная версия почти в три раза тяжелее!
Не сжатая версия jQuery служит для того, чтобы более детально углубиться в эту библиотеку. Если вы очень дотошный разработчик, то можете удалить ненужные функции, добавить свои и т.д.
Лично я – вообще ни когда туда не залезал, за три года не было такой необходимости. Да и я не особо любитель читать 10 тысяч строчек.
Отличить эти 2 версии можно по названию. В сжатой версии перед.js всегда идет.min (на рисунке это показал в блоке под номером «3» ). Если вы достаточно долго уже работает в веб-разработке, то наверное замечали этот «фокус» у других библиотек.
Как подключить jQuery?Да подключение происходит также, как css, только используя другой тег.
Внимание! Весь код, который будете писать, используя jq – нужно писать ниже подключения этой библиотеки. В противном случае – у вас выскочит ошибка и ни чего работать не будет.
Второй способ – используем гуглПочему я просил не торопиться с закачкой этой библиотеки? Да все просто – ее можно напрямую подключить с Google.
Как известно, Google – не только поисковая система, но в этой гигантской корпорации присутствует много всяких фишек, которые созданы для облегчения жизни программиста.
Гугл использует также сжатую версию. И в этом коде можно найти одно важное дополнение – в ней присутствует ajax технология (об этом мы еще поговорим). Это очень полезная вещь, и рано или поздно она вам пригодится. И если вы подключите библиотеку с google – то вам не придется тратить свое время на поиск и подключения всех функций для ajax.
Т.к. google – очень крупная компания, их сервера ни когда не упадут, и поэтому можно быть полностью уверенным в том, чтобы jQuery всегда будет работать на вашем сайте.
Но есть один минус – если вы подключаете библиотеку с гугл, то при разработке сайта вам нужно постоянно иметь доступ к интернету.
Ну а теперь, когда я описал оба способа – можете выбирать более подходящий для вас и подключать к вашему html документу.
ТестированиеКак только вы подключили библиотеку, желательно ее протестировать. Ниже я привел часть jq-кода – особо не вдавайтесь в подробности (об этом будут дальнейшие уроки), что там написано, просто напишите тоже самое и посмотрите на результат.
Какой-то текст
После запуска страницы – должны появиться слова «Тут какой-то текст». А после нажатия на этот текст – он должен пропасть. Если у вас все именно так отработало, то вы все правильно сделали.
P.S. Иногда встречаются вопросы: «как подключить jQuery к Joomla 3?», «как подключить jQuery к Bitrix?», «как подключить jQuery к WordPress?». Не зависимо какой движок используете на сайте, способ подключения всегда одинаковый. В шаблон помещаем нужную строчку - и все у вас будет работать.
