Что такое jQuery? Подключение библиотеки jQuery к Blogger.

(Последнее обновление: 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 – это 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, ее следует подключить к нашему документу . Для этого давайте создадим самую простую страницу, без всяких излишеств – index.html, и на ней будем подключать наш jq (сокращение от jQuery, начинайте привыкать).

Как подключить библиотеку jQuery? И где взять код?

Есть 2 способа подключения библиотеки к сайту . Перед тем, как начну описывать оба способа, не надо сразу повторять за мной. Сначала прочитайте об этих способах, а потом выберите подходящий вам способ и все подключите. Не волнуйтесь – jQuery подключается одной строчкой кода , поэтому, если вы не обладаете памятью, как у рыбки, то все будет хорошо.

Первый способ – качаем с сайта jquery.com

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

Важно! Все картинки кликабельны.

Подключение библиотеки jQuery с официального сайта

  • Заходим на официальный сайт;
  • Нажимаем ссылку «Download»;
  • Если нужна облегченная (сжатую) версия, то нажимаем на ссылку в блоке «3»;
  • Если нужна версия для веб-разработчиков, то нажимаем на ссылку в блоке «4»;
  • Качаем библиотеку:
  • Заливаем в папку, где расположен файл index.html.
    • Чем же отличаются сжатая версия от версии для веб-разработчиков?

    На картинках ниже я показал небольшие куски кода двух версий.



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

    Мельникова 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 к сайту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

    Похожие статьи