Как использовать jquery в html

jQuery CDN

Если вы не хотите скачивать и размещать библиотеку jQuery на сервере своего сайта, то вы можете подключить ее с CDN (англ. Content Delivery Network – Сеть доставки содержимого).

Библиотеку jQuery можно подключить с сети Google и Microsoft.

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

Подключение библиотеки jQuery. 4 способа

Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.

Способ 1. Скачать в папку и подключить файл

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

Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

Что такое jQuery и как его использовать

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

Как подключить jQuery?

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

     Содержание страницы 

После подключения jQuery (на строчках ниже подключения) можно использовать методы jQuery.

В примере была использована библиотека jQuery, которая находится на серверах Google. Ссылаться именно на эти серверы — это довольно распространённая практика. Но настоятельно рекомендуем скопировать библиотеку jQuery себе на сайт и загружать непосредственно со своего сайта. Потому что в некоторых странах серверы Google заблокированы, к примеру, в Китае. Это означает, что для пользователей из Китая библиотека jQuery не загрузится, и скрипты на вашем сайте для них не будут работать.

Код на jQuery компактнее, чем на JavaScript

Сравните код на JavaScript и jQuery. Вот код на чистом JavaScript:

document.getElementById('id').innerHTML = 'Тише мыши, кот на крыше';

В этом коде происходит обращение к тегу с определённым «id»: внутреннее содержание этого тега меняется на строку «Тише мыши, кот на крыше». Перепишем эту строчку, используя функции из jQuery:

$('#id').html('Тише мыши, кот на крыше');

Очевидно, код стал компактнее. Приведём ещё один пример, в котором разница в удобстве будет более очевидной. Допустим, нам надо изменить CSS свойство в нескольких тегах с одним и тем же классом. К примеру, сделать текст синим. На чистом JavaScript нам надо будет получить массив ссылок на найденные элементы с помощью метода getElementsByClassName, затем пройтись по массиву и установить CSS свойство для каждого из найденных тегов. Выглядеть это будет так:

var a = document.getElementsByClassName('class'); for (var i = 0; i

Перепишем этот пример, используя функцию из jQuery:

$('.class').css('color', 'blue');

Получилось, что четыре строчки кода были заменены одной, в которой находится довольно наглядная функция изменения CSS свойства.

Селекторы jQuery

Знак доллара $ в начале строки в приведённых выше примерах — это универсальная функция jQuery. Чаще всего её используют для выбора HTML элементов, поэтому после этого знака стоят круглые скобки, в которых находится указание на селектор.

Селекторы в jQuery точно такие же, как и в CSS. Поэтому рекомендуем посмотреть цикл наших статей по CSS.

Попробуем выбрать все элементы с классом «mouse» используя jQuery:

var a = $('.mouse');

Теперь выберем все с :

var a = $('#mouse');

А теперь выберем все с классом «mouse», но являющиеся div контейнерами:

var a = $('div.mouse');

Всё обращение к элементам происходит точно так же, как и в селекторах CSS.

Цепочки методов jQuery

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

$('.mouse').html('Тише мыши, кот на крыше').css('color', 'blue');

В этом примере мы выбрали все HTML теги на странице, у которых есть класс «mouse» и вставили в их содержание строчку ‘Тише мыши, кот на крыше’. Затем окрасили текст в каждом из этих тегов в синий цвет.

Cмотрите другие статьи:
Была ли эта статья полезна? Есть вопрос?
Закажите недорогой хостинг Заказать
всего от 290 руб

Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.

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

Последние новости

• Генератор паролей
• Генератор .htpasswd

Коврик для мыши новым клиентам

Оплатите хостинг на год и получите удобный коврик

Помощь в переносе
с другого хостинга

Хотите переехать? Мы поможем перенести всё

Запишитесь на интенсивные курсы по созданию сайтов.

Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.

• Пользовательское соглашение
• Политика конфиденциальности
• Публичная оферта
• Антиспам соглашение

Copyright © 2019-2023 «MouseDC.ru».
Все права защищены товарными
знаками и свидетельствами.

Как новичку подключить jquery к сайту

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

jQuery – это современная библиотека скриптов, основанных на базе прогрессивного языка программирования JavaScript, для реализации самых разнообразных задач в процессе создания сайтов. Библиотека помогает оформлять внешний вид сайта, скрывает блоки контента, фиксирует баннеры, завораживает эффектами анимации, участвует в проверке форм, взаимодействует с AJAX. Способов применения великое множество.

Недавно пришлось делать для изображений flip эффект. Картинка переворачивается плавно в горизонтальной, или вертикальной плоскости. При минимальном соприкосновением мыши, начинается показываться ее обратная сторона. В реальности эффект осуществляется при помощи двух картинок. Хотя возникает ощущение, что картинка одна. Такой вариант легко реализовать применяя css3. Но там эффект слишком ограничен. В jquery мы все чеканим до идеальности. В результате получается все реалистично и красиво.

Чтобы использовать скрипты jquery на блоге, следует подключить данную библиотеку. Способов подключения существует несколько. Рассмотрим наиболее актуальные.

Подключение джейквери через Google. Часто используемый вариант новичками. Требует минимум знаний в программировании. Вводим между тегами следующий вид кода:

[code lang="js"]  [/code]

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

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

[code lang="js"] http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js [/code]

[code lang="js"] http://code.jquery.com/jquery-1.12.0.js [/code]

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

Проблема решается предварительным скачивание библиотеки jquery и размещением ее файлов в специальной папке под название js (называем папку сами). Обычно папка ява скриптов находится в шаблоне движка cms. В простых html сайтах в корне.

Подключение для html сайта:

[php] [/php]

Подключение для Joomla:

[php] /* Используем конструктор объектов для получения методов других классов. Получаем объект класса JDocumentHTML. Другими словами мы создали оъект */ $doc = JFactory::getDocument(); $doc->addScript(JUri::base().'templates/'.$doc->template.'/js/jquery.min.js'); /* Назначаем путь к файлу */ [/php]

Как узнать подключилась ли библиотека

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

[js]    /* Ниже инициализируем скрипт, который выведет сообщение на экран в случаи удачного подключения */    [/js]

Возможности jQuery действительно внушительны. И будет большим плюсом научиться самостоятельно создавать собственные скрипты.