Использование библиотеки jquery. Подключение библиотеки jQuery к Blogger

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

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

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

var elem = document.getElementById("p"); var elem = $("#p");

< p id = "p" > < / p > var elem = document . getElementById ("p" ) ; var elem = $ ("#p" ) ;

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

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

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

кроссбраузерность;

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

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

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

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

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

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

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

Итак, подключаем библиотеку:

jQuery

< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > jQuery < / title > < / head > < body > < / body > < / html >

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

This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

link Downloading jQuery using Bower

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher :

link Cross-Browser Testing with jQuery

Be sure to test web pages that use jQuery in all the browsers you want to support. The site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com .

link jQuery Pre-Release Builds

The jQuery team is constantly working to improve the code. Each commit to the Github repo generates a work-in-progress version of the code that we update on the jQuery CDN. These versions are sometimes unstable and never suitable for production sites. We recommend they be used to determine whether a bug has already been fixed when reporting bugs against released versions, or to see if new bugs have been introduced.

link Using jQuery with a CDN link Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site"s documentation.

Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

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

Неожиданно для себя обнаружил, что на блоге нет, фактически, ни одного упоминания о чумовой библиотеке для работы с 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, посмотрите официальные маны , там есть много чего полезного. Сразу предупреждаю, что там информация представлена на английском, но пусть это не страшит - по примерам почти всегда становится ясно, что делает тот или иной метод.

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

Библиотека jQuery

Если вкратце охарактеризовать то, что делает библиотека jQuery, то это прозвучит довольно обыденно: данная библиотека позволяет изменять содержимое HTML-документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).

Вам, наверное, уже приходилось манипулировать объектами DOM (Document Object Model - объектная модель документа) с помощью других библиотек JavaScript или встроенных функций API (Application Programming Interface - интерфейс программирования приложений) , которые поддерживаются большинством современных браузеров. Однако библиотека jQuery работает намного лучше. Она превращает манипулирование объектами DOM в увлекательное занятие, временами напоминающее настоящее развлечение.

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

Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.

Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий "выбрать-повторить-изменить", больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.

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

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

Описание библиотеки jQuery:

• 1. Основы jQuery, работа с DOM-моделью
  • Вставка дочерних, сестринских и родительских элементов

Первый вопрос, который возникает при начале работы с библиотекой jQuery — как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.

В этой статье я расскажу как правильно добавить jQuery на обычном html-сайте и на популярных движках.

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

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

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

Заголовок сайта

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

Заголовок сайта

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1).

Подключение jQuery на страницы своего сайта с внешних источников

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

Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.

Наиболее популярные CDN для подключения jQuery:

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

Заголовок сайта

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Заголовоксайта< / title > < / head > < body > < / body > < / html >

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

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

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

В итоге внутри тега HEAD появится строка подключения jQuery.

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

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php: