Правильно ли скачивать библиотеку jquery. Как скрыть или показать элемент? Как подключить библиотеку 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-моделью
  • Вставка дочерних, сестринских и родительских элементов

Мельникова 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 — как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.

В этой статье я расскажу как правильно добавить 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:

Первый вопрос, возникающей в начале работы с билиотекой jQuery - как подключить её к сайту? Есть два варианта: подключать с другого сайта или скачать её к себе на сервер.

Подключение JQuery к сайту1. Первый и самый простой - используете файл с другого сайта . Для этого достаточно одной строки перед закрывающим тегом head Вашей страницы:

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

2. Вы загружаете на сервер свой файл библиотеки

Последнюю версию jQuery можно скачать с главной страницы официальнго сайта: jquery.com .

Скачиваем файл. В корневой директории (папке) сервера создаём папку js (если её нет) и закачиваем файл туда. Допустим файл называется jquery-1.10.1.js . Пример подключения ниже:

Строка с подключением к файлу jQuery ложна быть первой в списке подключаемых js-файлов (если у Вас имеются другие подключения js).

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

Как уже говорилось, многие популярные CMS сегодня уже поставляются с jQuery, и ВордПресс не исключение. Однако, если библиотеку не подключают плагины, то jQuery автоматически не подгрузится. Чтобы подключить данный фреймворк корректно, нужно использовать функцию wp_enqueue_script(). Поместите следующий код в файле header.php вашей темы (откройте через редактор):

Как подключить библиотеку jQuery в WordPress? В настоящее время почти все CMS используют встроенный jQuery. Его остаётся подключить специальной командой. Не всегда плагины подключают библиотеку автоматически, поэтому некоторые блоки и модули могут не работать. Для подключения следует использовать функцию wp_enqueue_script() .

Ниже приведён код, который нужно прописать в файле header.php (открыть через редактор)

Wp_enqueue_script("jquery");
Данная функция должна быть размещена между тегами head ДО вызова функции wp_head(). Такой порядок сэкономит время загрузки старницы.

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

$document = JFactory::getDocument();
$document->addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"); // здесь неважно откуда подключение, можно и из сети.
/* или же так */
$document->addScript("http://mysite/js/.js");
В случае с шаблонной версией страницы нужно вставить код PHP