Подключение библиотеки jQuery к Blogger. Введение в jQuery
Первый вопрос, который возникает при начале работы с библиотекой 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. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:
offlink.ru
Как быстро подключить jQuery :: SYL.ru
JQuery — библиотека готовых решений на языке JavaScript, позволяющая легко добавить на страницу интерактивность. Она состоит из набора функций, упрощающих процесс написания кода. Разработка сайта с использованием jQuery упрощается тем, что для выборки элементов в этой библиотеке используется CSS. Программистам, знакомым с CSS, намного удобнее работать с готовыми функциями, а не писать сложный JS-код.
Преимущества jQuery
Многие решения уже созданы, потому верстальщикам нет смысла тратить время на написание кода с нуля. В процессе работы над проектом часто возникают ситуации, когда необходимо оперативно добавить на сайт какой-то функционал, уже разработанный кем-то другим. Редкий заказчик оценит по достоинству код для слайдера, написанный за 10 часов на чистом JavaScript, если намного быстрее подключить jQuery или добавить фреймворк – часть уже написанного кода, и получить удобный интерактивный элемент за пару минут. После этого достаточно применить готовый слайдер к выбранным элементам. Тем самым программист экономит время заказчика и свое собственное, не тратя его на «создание велосипеда».
Как подключить библиотеку jQuer?
При помощи библиотеки создаются галереи, слайд-шоу, можно добавлять на страницу разнообразные эффекты и работать с AJAX (асинхронными запросами к серверу). JQuery поддерживает кроссбраузерность, облегчает работу с событиями и легко подключается.
Рассмотрим, как подключить jQuery в HTML на примере создания слайдера. Для этого достаточно выполнить пять простых шагов:
- Открыть HTML-код страницы, где будет размещен интерактивный элемент.
- Создать функционал для реализации кода. Добавить ссылки на изображения, которые будут перемещаться в слайдере.
- Перейти на официальный сайт библиотеки jQuery и скачать ее на компьютер. Если подключать ее через ссылку, в какой-то момент она может перестать работать, потому использование скачанного скрипта надежнее.
- Перетащить полученный файл в папку с проектом.
- Теперь требуется подключить jQuery – сделать это можно способом, похожим на подключение стилей CSS. В тег head добавляем скрипт и прописываем его адрес. Он выглядит примерно так: <script src=” jquery.js”>< /script>
Теперь библиотека подключена и можно протестировать ее функциональность. Открываем официальный сайт и переходим на страницу с плагинами. Здесь можно найти готовые решения для созданий интерактивных элементов. Перед тем как подключить плагин jQuery, находим нужный архив и скачиваем его. Его также перемещаем в папку с проектом, затем его необходимо разархивировать. Оставляем папку с плагином, а ненужный архив удаляем.
Состав плагина jQuery
Все подсказки о последующих действиях есть на официальном сайте библиотеки. Они располагаются в меню, справа от списка историй версий плагина. Выбрав пункт с просмотром демо-версии, можно узнать, как работает плагин и какие функции выполняет. Пункт с документацией описывает состав архива и его основные характеристики. Здесь же находится код для подключения плагина. В самом архиве есть два файла с разными расширениями. Один из них будет иметь расширение CSS — это файл со стилями, другой, код скрипта – JS.
Как подключить плагин к коду HTML
Для того, чтобы подключить плагин jQuery к коду страницы, в теге link нужно прописать пути ко всем файлам из архива на вашем компьютере. Сначала добавляем в HTML файл с расширением CSS и подключаем точно также, как файл стилей: <link rel=”stylesheet” href=”../dist/plagin.css”>. Эта ссылка располагается в теге head сразу же после скрипта со ссылкой на библиотеку. Следующим подключаем файл с расширением js. Это скрипт, и добавить его можно тем же способом, что и файл с библиотекой. Всего подключаем три файла: саму библиотеку jQuery, стили и скрипт.
Следующий шаг – запуск или инициализация плагина. На странице с документацией будет несколько вариантов кода для различных целей. Выбираем нужный, копируем его и вставляем в HTML, как скрипт в тег head. Для этого просто копируем написанный код в тег script. Теперь разберемся с синтаксисом плагина jQuery. На первой строчке скопированного кода будет название класса родительского блока, который необходимо добавить в HTML проекта. Подсказка о том, куда его вставить, будет на странице с документацией. В случае со слайдером, нужный класс добавляется к блоку со ссылками на изображения.
Особенности запуска скрипта
Перед запуском плагина, библиотека jQuery проверяет готовность страницы и только после этого происходит инициирование скрипта. Поэтому следует указать, что страница готова к работе и все необходимые элементы на месте. Для этого используем готовый код со страницы с документацией, содержащий условие запуска.
Теперь проверяем работоспособность плагина на сайте. Если все сделано правильно и нет ошибок в коде, скрипт сработает корректно и на странице появится слайдер с изображениями.
Теперь стало очевидно, что подключить JQuery намного быстрее и проще, чем создавать JS-код с нуля. Работа с этой библиотекой помогает сэкономить время заказчика и исполнителя, быстро подобрать готовое решение и протестировать его на практике. Именно поэтому многие программисты и верстальщики обращаются к библиотеке готовых решений для оптимизации и ускорения своей работы.
www.syl.ru
jQuery подключение к сайту
- SEO Блог
- Веб-дизайн
Подключение фреймворка (англ. framework) jQuery совсем не сложная задача с которой вполне способен справиться любой начинающий блогер.
Подключив jquery, вы сможете наслаждаться огромными, почти безграничными возможностями которые предоставляют его многочисленные плагины: создавать красивые галереи картин и фотографий, динамические всплывающие меню и многое многое другое.
Мне нравится этот фреймворк и поскольку я сам пользуюсь jquery, то часто публикую статьи с интересными на мой взгляд решениями с применением jquery плагинов, поэтому дабы не описывать подключение jQuery в каждой новой статье, а просто ставить ссылку для тех кто не знает как подключить jquery я решился на написание данной статьи.
Подключение jQuery — как подключить jQuery
Чтобы подключить jQuery к сайту вам надо выполнить всего несколько довольно простых действий:
- Открываете в текстовом редакторе (я использую
- если сайт статический (не используется ни какая CMS — движок) — поочередно все страницы сайта
- если сайт создан на wordpress — header.php используемой темы
- для динамических сайтов на других CMS — ту часть шаблона (темы) где расположена секция HEAD
- Находите секцию HEAD — все что находится между открывающим и закрывающим тегами: <HEAD>…</HEAD>.
- И добавляете в самый ее конец, перед закрывающим тегом </HEAD> следующий код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>Главная причина, почему я рекомендую вам
И вот теперь когда этот замечательный фреймворк уже подключен вы можете пользоваться любыми его плагинами подключая их скрипты сразу после основного скрипта фреймворка.
Комментарии к статье
← Предыдущая статьяСледующая статья →
Рекомендую
- WEBHOST1 — проверенный недорогой хостинг для сайта с PHP
- LOGASTER — генератор логотипов и фавиконок с поддержкой кириллицы.
- QComment — наполнение сайтов комментариями и заработок на отзывах.
Категории
Как создать:
Где найти:
Как заработать:
seodiz.ru