Правильно ли скачивать библиотеку jquery. Подключение JQuery при помощи CDN. Описание библиотеки jQuery

jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS.

Что умеет jQuery

• Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
• Работать с событиями.
• Легко осуществлять различные визуальные эффекты.
• Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).
• Имеет огромное количество плагинов, предназначенных для создания элементов пользовательских интерфейсов.

Как это работает

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

Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег , который и отвечает за подключение внешних файлов скриптов (). Добавим этот тег в html-страницу (так же мы подключали страницу script.js с функциями js): * Обратите внимание на имя файла. Здесь используется библиотека jquery-1.2.6, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.*

Итак, у нас в папке лежат html-страница, страница со стилями (style.css), страница с js-функциями (script.js) и (jquery-1.2.6.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):

Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate() Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки: Эффекты jQuery Эффект Show() Эффект SlideDown() Эффект Animate()

Оформим внешний вид и сделаем прямоугольники невидимыми с помощью . Код style.css:

#kv1, #kv2, #kv3{ width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; }

Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:

function addEffect1(){ $("#kv1:hidden").show(); } function addEffect2(){ $("#kv2:hidden").slideDown("slow"); } function addEffect3(){ $("#kv3:hidden").show().animate({ fontSize:"36px" } , 3000); }

Что же делают эти функции?

Функция addEffect1() видит $ ("#kv1:hidden") и понимает, что ей нужно найти элемент с id="kv1", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.

Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv2:hidden") и понимает, что ей нужно найти элемент с id="kv2", обладающий свойством hidden (невидимый). Далее она видит .slideDown("slow") и понимает, что найденный элемент надо медленно ("slow") отобразить сверху-вниз (slideDown).

Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит ("#kv3:hidden") и понимает, что ей нужно найти элемент с id="kv3", обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит .animate({fontSize:"36px"} , 3000) и понимает, что размер шрифта нужно за 3 секунды (3000) увеличить до 36 пикселей (fontSize:"36px")

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

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

Где селектор - элемент или элементы, с которыми мы будем что-либо делать.

действие - что именно мы будем делать с выбранными элементами. Мы можем добавить какой-либо эффект, css-стиль, изменить html-код и т.д. Здесь же могут быть указаны какие-либо события.

свойства действия - если они предусмотрены действием.

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

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

На данном сайте есть описание практически всех функций библиотеки 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:

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

(Последнее обновление: 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, находим и чуть ниже добавляем (или можно выше тега):

Друзья, здравствуйте.

Неожиданно для себя обнаружил, что на блоге нет, фактически, ни одного упоминания о чумовой библиотеке для работы с JavaScript - jQuery.

Если считаете, что для удобной и быстрой разработки клиентского взаимодействия достаточно обычного JavaSciprt, которые вроде бы и не сложен, могу ответить одно: почти наверняка на вашем пути сложных проектов ещё не встречалось. Конечно, для простейшего взаимодействия со страницей - например, запросить содержимое элемента по его id - библиотеки не нужны. Но представьте, если нужный элемент располагается где-то в недрах кода, и для доступа к нему потребуется пройтись по дереву вышележащих элементов и классов. В этом случае придётся писать свою реализацию для поиска. Однако, сюрпризы только начинаются - код, прекрасно работающий в Firefox, может напрочь отказаться работать в IE или Chrome. Соответственно, придётся либо искать универсальный метод, который бы работал везде, либо использовать «костыли», что довольно долго, т. к. подразумевает дополнение кода проверками работы того или иного метода.

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

Что же позволяет этот «зверь»? В самом ли деле нужно изучать основы работы и новый синтаксис ещё одной библиотеки? Если попробуете, то сможете легко получить доступ к элементам страницы с помощью модели построения селекторов в CSS, манипулировать элементами, классами и атрибутами и ещё много чего полезного. Но на самом деле - решать вам. Только учтите, что поработав с jQuery будет сложно заставить себя программировать по старинке, на чистом . Ну, я предупредил.

Прежде, чем перейти к основным темам статьи, позволю себе объяснения, которые в дальнейшем пригодятся. Так повелось, что язык гипертекстовой разметки - - постоянно развивался и продолжает это делать сейчас. Начиная с 4-ой версии от него отпочковался XHTML, который предусматривает несколько другую обработку документов - весь код должен быть абсолютно валидным и не содержать ошибок (в противном случае, браузерам разрешается прекращить дальнейшую обработку), в то время, как HTML допускает любые вольности, и все обозреватели обязаны хоть как-то, но отобразить страницу. Чтобы узнать, какую спецификацию поддерживает сайт, достаточно заглянуть в начало кода страницы и найти тег DOCTYPE.

Следующие документы следуют спецификации XHTML:

Спецификация HTML5 имеет упрощённое определение:

Основное значимое отличие - XHTML требует, чтобы все теги были закрытыми. В случае отсутствия у элемента закрывающего тега на конце необходимо использовать слеш /. Кроме того, названия нужно задавать в нижнем регистре. Несколько примеров помогут понять, о чём речь:

HTML XHTML

link		link

Где скачать jQuery?

Самое простое - перейти на официальный сайт . Там, помимо самой библиотеки, можно найти ещё множество разных полезностей - от jQuery UI (для более простого и удобного создания пользовательского интерфейса) до разнообразных плагинов, которых насчитывается более 2500!

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

Как подключить библиотеку jQuery к своей странице?

Если предпочитаете все файлы хранить на своём сервере, лучше будет выделить единое место, в которое позже, возможно, добавятся плагины или другие библиотеки. Пусть это будет папка /scripts/ в корне сайта. Переходим на страницу официального сайта (ссылка чуть выше). Здесь нам предлагаются две версии - 1.x и 2.x - из которых предпочтительнее выбрать последнюю. Первая версия «тянет» с собой устаревший код, поэтому занимает несколько больше места. Для размещения на сайте лучше выбрать compressed-версию, это максимально «скукоженный» по размеру файл, который предоставляет те же возможности, как uncompressed-версия, с той разницей, что последнюю лучше использовать для разработки - в ней сохранено форматирование и удобно посмотреть, как реализована та или иная функция. Допустим, выбран файл jquery-2.1.1.min.js, который необходимо загрузить в директорию /scripts/. В этом случае, код для подключения будет такой (нужно использовать только 1 вариант, согласно значению тега DOCTYPE):

или

В случае, если файлы планируется подключать с ресурса-хостинга JS-библиотек:

или

Всё, после этого можно использовать всю мощь jQuery.

Основы работы с jQuery

Т. к. jQuery - это библиотека, написанная на JavaScript, код необходимо писа́ть в местах, это допускающих. В общем случае - между тегами и .

Выборка одного элемента в JavaScript производилась с помощью метода document.getElementById(‘id-элемента’), нескольких - documents.getElementsByTagName(‘тег нужного элемента’), после чего по списку требовалось пробежаться в цикле и выполнить необходимое дейстие. В jQuery это выполняется гораздо проще, а нужное действие можно применить сразу же ко всем элементам. Для выборки служит такая конструкция:

jQuery("selector").func()
где selector - правило, определяющее часть страницы (тег, класс, идентификатор),
func - метод, который будет применён ко всем полученным элементам.

Основные селекторы jQuery

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

• * - универсальный селектор, выбирающий абсолютно все элементы;
• tag - селектор элементов, представляющий просто название любого тега (например: p, div, span, a); выбираются все запрашиваемые теги на странице;
• .class_elems - селектор классов ();
• #id_elem - селектор идентификаторов ()
• tag - селектор атрибутов ();
• elem1 elem2 - комбинатор потомков - элеметны (теги, классы, идентификаторы) elem2, расположенные внутри elem1 (p i →

  text

  );
• elem1 > elem2 - комбинатор «детей» - элеметны elem2, непосредственно вложенные внутрь elem1 (p > b →

  text

  ), в отличие от предыдущей конструкции, p > i не найдёт ни одного элемента, т. к. i не является прямым потомком p (вложен в b );
• elem1 + elem2 - комбинатор «следующий брат» - elem2, расположенный (не вложенный!) сразу же после elem1, по сути - следующий элемент (b + i → bi);
• elem1 ~ elem2 - комбинатор «нижеследующие братья» - elem2, расположенные (не вложенные!) после elem1, в отличие от предыдущего пункта, ищутся элементы, не обязательно непосредственно следующие за elem1 (b ~ i → bspani);
• elem:first - выбор только первого элемента из всех elem;
• elem:last - выбор только последнего элемента;
• elem:eq(n) - выбор только n-ного элемента; нумерация начинается с нуля, запись:eq(n) эквивалентна:first;
• elem:lt(n) - выбор всех элементов до n-ного;
• elem:gt(n) - выбор всех элементов после n-ного;
• elem:even - все чётные элементы (важно знать, что нумерация начинается с нуля, поэтому нулевой эменнт является чётным, хотя в потоке следует первым);
• elem:odd - все нечётные элементы;
• elem:visible - видимые элементы;
• elem:hidden - невидимые элементы.

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

• div h2 ~ table - найти внутри div таблицу, следующую после подзаголовка h2;
• form.reg input - все теги , расположенные внутри формы с установлленым классом reg ;
• div > table td - ячейки таблицы, непосредственно вложенной в тег div .

jQuery: метод css против свойства style

На самом деле, нет ничего сложного. Если в обычном JS для манипулирования существовал элемент style , то здесь всё гораздо проще:

jQuery("selector").css("property", ["value"])
где property - CSS-свойство,
value - значение свойства.

В случае, года значение не задано, будет возвращено текущее значение свойства. Свойства используются в «чистом виде», т. е. так же, как они записаны в стилях. Для JS пришлось бы писать, например, что-то вроде:

document.getElementById("id").style.backgroundColor = "#f0f";
В jQuery код сократится до:

jQuery("#id").css("background-color", "#f0f");
Но не забываем, что здесь в качестве селектора можно задать сложное правило - библиотека возьмёт на себя поиск элемента. В чистом JS пришлось бы с этим повозиться.

Атрибуты элемента: получить, удалить, добавить, изменить

Получение, добавление или изменение атрибута выполняется аналогично, как и в случае с css , только нужно использвоать другой метод - attr :
jQuery("selector").attr("name", ["value"])
где name - название атрибута,
value - значение атрибута (если не задано, будет возвращено текущее значение).

Для удаления атрибута существует специальный метод:
jQuery("selector").removeAttr("property")

Классы элемента: удалить, добавить, изменить

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

Добавить класс:
jQuery("selector").addClass("class_name")
где class_name - новый класс.

Удалить класс:
Помимо этого есть весьма полезная возможность «переключения» класса. Принцип работы состоит в том, что если элементу уже назначен класс class_name , он (класс) удаляется, если нет - добавляется:
jQuery("selector").removeClass("class_name")
И осталась ещё одна функциональность, которой не коснулись - проверка, назначен ли элементу заданный класс (true, если да):
jQuery("selector").hasClass("class_name")

Содержимое контейнера - аналог innerHTML

В JavaScript свойство innerHTML служит для получения или установки всего HTML-содержимого элемента. Для jQuery код упрощается до такого:
jQuery("selector").html(["code"])
где code - HTML-код, который будет присвоен найденным элементам. Если параметр не задать, будет возвращено содержимое (HTML).

Как удалить элемент в jQuery?

В отличие от чистого JavaScript, операция вырождается в одну строку кода:
jQuery("selector").remove()

Как вставить текст?

Для JS существует свойство innerText которое, однако, поддерживают не все браузеры. Но мы же не ищем сложных путей, верно?
jQuery("selector").text(["str"])
где str - текст, который будет вставлен. Если параметр не задать, вернётся текущее текстовое содержимое.

Как узнать количество элементов? Как скрыть или показать элемент?

Для этого существует два метода:
jQuery("selector").hide(); // скрыть
jQuery("selector").show(); // показать

Что ещё может jQuery?

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

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

В случае появления вопросов - жду их в комментариях.