Подключение jquery


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

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

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

Так выглядит структура проекта, библиотеку jQuery скачали в папку js

структура проекта
библиотека лежит в папке js

В некоторых случаях, библиотеку подключают перед закрывающимся тегом body


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

Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize.

Способ 2. Подключаем напрямую с CDN

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

Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

и подключить ее в файл. Выглядит это так:

Второй способ подключения, перед закрывающимся тегом body:

Все просто!

w3.org.ua

Что это такое


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

Подключение jquery

Уметь работать с ним должен любой вебмастер, который хочет создать профессиональный интернет-проект. Перед началом изучения ознакомьтесь с моей статьей «JavaScript для чайников».  Она поможет вам в дальнейшем изучении jquery. Используя эту библиотеку, вы получите такие преимущества по сравнению с использованием javascript:

  • Работает со всеми современными браузерами;
  • Быстрое внедрение визуальных эффектов, а также скрытие и появление элементов на блоге;
  • Много плагинов, облегчающих работу — галереи, слайдеры формы, выпадающее меню и другие элементы страницы.
  • Работа с ajax. Это технология, разрешающая отправлять запрос к серверу без перезагрузки браузера.

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Для подключения переходим на официальный сайт jquery.com и нажимаем ссылку «Загрузить».

Подключение jquery

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».


Подключение jquery

Далее осталось в исходном коде перед закрывающимся тегом head написать следующее:

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

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.

Важно! Перед началом работы с данным фреймворком у вас должны быть начальные знания в области веб-программирования. Это не так сложно, как кажется. На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

Подключение jquery

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

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


Подключение jquery

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

Как проверить правильность подключения

Чтобы убедиться, что все работает как следует, напишите такой скрипт в html-коде между тегами «head»:

Если добавление выполнено правильно, то в окне браузера появится слово «Работает».

Важно! Не изменяйте название скачанного файла. Хотя ошибки в работе не возникнет, все-таки лучше будет если вы оставите официальное название, полученное при загрузке. Это нужно для того, чтобы знать какая версия использовалась. Хотелось отметить, что подключение к файлу придется выполнить на всех страницах сайта, где будет работать фреймворк.

Как подключить в WordPress

Работать с jquery возможно если интернет-проект создан на Вордпресс. Если вы не в теме, посмотрите статью «Обзор популярных движков». Для этого подключите библиотеку при помощи функции wp_enqueue_script(). Ее напишите в файле с темой header.php:

Важно! Эту функцию поместите до wp_head(). В таком случае загрузка библиотеки будет происходить быстрее.

Подключение с внешнего ресурса


Альтернативный вариант добавления библиотеки в исходный код на странице — использование CDN. В переводе это значит сеть доставки контента. При таком варианте ядро фреймворка находится на стороннем ресурсе. Это может быть Гугл, Майкрософт, Яндекс.

Подключение jquery

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

Своя сборка

Исходный код библиотеки скачайте с github.com. Он разделен на модули. Поэтому если не требуется поддержка какой-то функции, например, Аякс, то этот модуль исключите. Инструкцию как это сделать посмотрите по ссылке на github.com.

Остались еще вопросы? Рекомендую ознакомиться с видеокурсом от Михаила Русакова. В нем подробно, с практическими примерами показано, как работать с этой библиотекой.

Подключение jquery

Вывод


Итак, подключить рассмотренный фреймворк к сайту не сложно. Используйте эту технологию для создания уникального и профессионального интернет-проекта. Чтобы повысить уровень знаний в области создания сайтов, рекомендую посетить портал программистов GeekBrains.ru. Здесь вы найдете для себя полезную информацию.

Подписывайтесь в мою группу ВКонтакте, в ней есть что посмотреть.

start-luck.ru

Подключение последней версии jQuery. Пример:

  <head>   <!-- ... -->   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <!-- ... -->  </head>  

Подключение необходимой Вам версии, например 2.1.1:

  <head>   <!-- ... -->   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <!-- ... -->  </head>  

Еще один вариант подключения необходимой Вам версии, например 2.1.1

  <head>   <!-- ... -->   <script type="text/javascript" src="http://www.google.com/jsapi"></script>   <script type="text/javascript">   // подключаем нужную версию jquery   google.load("jquery", "2.1.1");   google.setOnLoadCallback(function() {   alert('версия jQuery: ' + jQuery.fn.jquery);   });   </script>   <!-- ... -->  </head>  

Самый надежный вариант. Подключение с Google, если Google недоступен — подключаем со своего сайта:


  <!DOCTYPE html>  <html>   <head>   <!-- ... -->   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   <script type="text/javascript">   if (typeof jQuery == 'undefined') {    document.write(unescape("%3Cscript src='/path/to/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));   }   </script>   <!-- ... -->   </head>   <body>   <!-- ... -->   <script>   var msg;   if (window.jQuery) {   msg = 'версия jQuery: ' + jQuery.fn.jquery;   } else {   msg = 'jQuery не установлен';   }   alert(msg);   </script>   <!-- ... -->   </body>  </html>  

Список всех версий jQuery можно посмотреть по адресу: http://code.jquery.com/jquery/

Плюсы подключения через Google:

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

Минусы:

  • Зависимость от третей стороны. Если упадут сервера Google (что мало вероятно), то пользователь не получит библиотеку.
  • Если Google забанил IP пользователя, то библиотека не будет загружена.
  • Нет возможности получить урезанную версию плагина.

Несмотря на эти недостатки большинство проектов получит значительное ускорение при загрузки сайта.

кодер.укр

Способы подключения библиотеки

Подключить jQuery к сайту можно двумя основными способами:

  • Динамическое подключение jQuery, то есть подключение библиотеки со стороннего ресурса.
  • Локальное подключение jQuery. Это когда готовая библиотека лежит у вас на сайте, и вы ее подключаете.

Динамическое подключение

Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:


Данный код будет осуществлять подгрузку последней библиотеки jQuery из хранилища Google.

Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:

Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.

Для того, что бы убедиться, что по данному адресу в хранилище Google действительно находится нужная вам библиотека, достаточно просто скопировать данный адрес и вставить его в адресную строку браузера и затем нажимать Enter.

И вот мы видим код самой библиотеки, и в самом верху написана ее версия.

Достоинствами динамического подключения:

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

Недостатки подключения:

  • Если IP пользователя, добавившего данную библиотеку, Google решит забанить, либо просто с самим сервисом Google что-то случится, то данная библиотека, естественно, перестанет работать на вашем сайте, и все элементы, которые были с ней связаны, так же перестанут работать.

Для того, что бы этого избежать, можно использовать следующий способ подключения – это локальное подключение.

Локальное подключение

Для локального подключения данной библиотеки делаем следующее:


  1. 1.Переходим на сайт jQuery.com, в раздел download. Здесь нам предлагается для скачивания сжатая версия библиотеки и обычная.

    Сжатая версия библиотеки представляет собой минифицированный код, из которого удалены все лишние пробелы и enter-ы и за счет этого уменьшен размер данного файла.

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

    Если вы не планируете вносить какие-то правки в код самой библиотеки, то скачивайте сжатую версию и подключайте к сайту именно ее.

  2. 2.Если в вашем браузере закачка не начинается автоматически, и при переходе по ссылке открывается вот такой код:

    То вам нужно, просто, его скопировать и вставить в какой либо текстовый редактор, в моем случае это Notepad++, и сохраняете файл с именем-названием и версией библиотеки и с расширением .js.

  3. 3.Затем, этот файл нужно будет загрузить на ваш сайт. Желательно, для всех скриптов создать отдельную папочку js, и в неё загружать все скрипты.
  4. 4.После того, как файл библиотеки загружен, открываем в любом текстовом редакторе страницу вашего сайта, или если ваш сайт сделан на CMS, то вам нужно будет открыть соответствующую часть шаблона, в которой находится код шапки сайта.
  5. 5.Далее, перед закрытием тега </head> нам нужно будет вставить вот такой код:

    В кавычках должен быть указан путь к вашей библиотеке.
    Вместо jquery-3.1.0.min.js будет название вашего файла с jQuery библиотекой

Проверка подключения библиотеки jQuery

После того, как данный код вставлен на сайт, было бы не плохо, проверить работоспособность этой библиотеки. Для этого мы можем воспользоваться специальным скриптом.

Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .

После вставки кода сохраняем изменения и обновляем страницу нашего сайта.

Если библиотека подключена правильно, то на сайте должно будет высветиться сообщение о том, что библиотека jQuery подключена.

Если библиотека не подключилась то в данном сообщении будет написано, что jQuery не подключена.

На что нужно обязательно обратить внимание при подключении библиотеки jQuery?

  1. 1.Прежде всего, если вы подключаете на одном сайте несколько библиотек jQuery разных версий, то будьте готовы к тому, что у вас может произойти конфликт, и все элементы на сайте, которые работали с использованием jQuery, могут просто перестать работать.
  2. 2.Так же, большое значение играет сама версия jQuery. К примеру, если у вас на сайте используется слайдер, разработанный на основе библиотеки версии jQuery 2.2, а вы подключаете jQuery 2.1, либо какую-то другую версию, то данный слайдер может у вас не работать.
  3. 3.Так же, при подключении данной библиотеки следует обратить внимание на то, подключается у вас в шапке сайта какие-то другие скрипты или библиотеки, связанные с jQuery. Если они у вас подключаются, то выполнить подключение самой библиотеки jQuery вам нужно будет не перед закрытием тега </head>, а немножко раньше. Иначе, у вас эти библиотеки или скрипты могут не работать. Да и вообше, при подключении данной библиотеки, порядок подключения скриптов имеет большое значение.
  4. 4.Так же, обращаю ваше внимание на то, что если ваш сайт работает на CMS, то во многих из них подключение библиотеки jQuery осуществляется автоматически.
  5. 5.Может быть такое, что вы подключаете какую-то библиотеку, затем прописываете какой-то свой скрипт, и этот скрипт у вас не работает. Это так же связано с конфликтом jQuery, и для того, чтобы решить эту проблему нужно прописать этот скрипт в режиме jQuery no-conflict. Для этого, сам скрипт оборачивается вот в такой вот код:

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

Видеоинструкция

На этом у меня все. Если у вас остались какие-то вопросы, вы можете задать их в комментариях. Подписывайтесь на мой канал и рассылку! До встречи в следующих статьях и видео уроках!

С уважением Юлия Гусарь

impuls-web.ru

Прежде всего создадим простейший html документ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  	</head>  	<body>    	</body>  </html>  

Предполагается, что читатель знаком с основами html и css, поэтому разъяснять, как строится структура html документа я не буду. Теперь пришла очередь обзавестись библиотекой.

Получить последнюю версию можно многими способами. Опишу наиболее распространенные из них, а заодно и обсудим их достоинства и недостатки.

Локальное подключение библиотеки

Первый способ — сохранить файл ядра библиотеки в проекте. Для этого потребуется скачать его на свой компьютер и подключить к документу. Заходим на официальный сайт jQuery (http://jquery.com/). На главной странице справа видим блок с большой кнопкой Dounload (jQuery), кликнув по которой можно закачать последнюю версию (на момент написания статьи последней является версия 1.8.2).

jqueru

Радио переключатели, расположенные сверху кнопки, позволяют выбрать для закачки сжатый (Production), или полный (не сжатый — Development) вариант библиотеки. Второй вариант понадобится, если очень хочется покопаться в недрах кода фреймворка, но при этом размер его сильно отличается в большую сторону (247 kb). По умолчанию выбрана сжатая версия — ее и следует загружать.

Жмем по ссылке и… вместо ожидаемого диалога для закачки файла открывается окно с кучей непонятных строк.

jqueru code

Если это окно вызвало недоумение, не пугайтесь — все в порядке. Что бы сохранить этот код в файл, в меню браузера выбираем файл — сохранить как…

menu browser

и в появившемся окне указываем папку, куда хотим залить библиотеку.

save dialog

При желании можно переименовать сохраняемый документ, но лучше оставить имя по умолчанию — не придется в дальнейшем гадать, что это за файл и за что он отвечает. Для завершения процедуры жмем кнопку сохранить и нужный файл появится в указанной папке.

Теперь нужно прописать путь к этому файлу в разделе head html документа. Для удобства я обычно создаю папку js в корне сайта в которую складываю все необходимые для работы сайта js файлы. Если Вы поступили так же, то скопируйте файл библиотеки в эту папку (по умолчанию он будет иметь название jquery-1.8.2.min.js, где 1.8.2 — это версия библиотеки) и в разделе head html страницы, с которой работаете пропишите следующую строку <script type=’text/javascript’ src=’js/jquery-1.8.2.min.js’></script>.

В итоге раздел head html документа должен выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type='text/javascript' src='js/jquery-1.8.2.min.js'></script>  	</head>  	<body>    	</body>  </html>  

Все, библиотека подключена. Убедимся, что все сделано правильно. Все в том же html документе, в разделе body пропишем следующий код:

  <script>  	$(function() {  		alert ('jQuery подключен и отлично работает!');  	});  </script>  

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type='text/javascript' src='js/jquery-1.8.2.min.js'></script>  	</head>  	<body>  		<script>  			$(function() {  				alert ('jQuery подключен и отлично работает!');  			});  		</script>  	</body>  </html>  

Теперь, когда библиотека подключена и все работает как надо, пару слов о достоинствах и недостатках этого способа подключения.

Плюсом является то, что можно работать с js кодом не имея доступа в интернет (библиотека находится на локальном компьютере). Однако, использовать локальную версию не очень удобно на рабочем сайте, особенно, если проект постоянно совершенствуется и в коде используются возможности новых версий библиотеки. В этом случае все время приходится повторять описанную выше процедуру. Благо, есть способы облегчить себе жизнь…

Удаленное подключение библиотеки

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

Следующая строка <script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.js»></script> позволяет загрузить самую последнюю версию библиотеки с официального сайта jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  	</head>  	<body>    	</body>  </html>  

Этой строкой <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»></script> подключается последняя версия библиотеки с Google (я рекомендую использовать именно этот способ в рабочих проектах).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  	</head>  	<body>    	</body>  </html>  

Еще одной полезной плюшкой у Google является то, что можно загрузить при необходимости какую то конкретную версию. Например, эта строка <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script> загрузит библиотеку версии 1.7.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  	</head>  	<body>    	</body>  </html>  

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

siteis.ru

Сжатый и несжатый варианты jQuery

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

Начиная с jQuery-1.9 доступна так же карта исходников (sourcemap). С помощью нее можно производить отладку сжатой версии, так, как если бы она не была. Подробнее о картах исходников можно прочитать здесь (англ.).

Версии jQuery

Сейчас существует две основные ветки версий jQuery 1.x и 2.x. Их отличия заключаются лишь в том, что в версиях 2.x перестали поддерживаться браузеры IE версий 8, 7 и 6. Это позволило уменьшить размер jQuery более чем на 10%, а так же немного ускорить работу библиотеки. Пока что старые версии IE все еще в ходу, поэтому рекомендуется использовать ветку 1.x.

Практически каждая следующая версия jQuery совместима с предыдущими. То есть, если ваш сайт работает с jQuery-1.7, то его можно безболезненно переводить на jQuery-1.8. Исключением стала версия jQuery-1.9, в которой некоторые (сомнительные) функции были удалены. Для того чтобы перевести сайт с jQuery 1.8 и меньше, на 1.9 (или более новые версии), можно воспользоваться следующим руководством (англ.).

Загрузка и подключение jQuery

Загружать jQuery желательно с официального сайта. Уже на первом экране будут ссылки на свежие версии jQuery 1.x и 2.x, в сжатых и не сжатых вариантах. Чтобы закачать файлы по этим ссылкам, нужно кликнуть по ним правой клавишей и выбрать «Сохранить ссылку как».

После того как вы скачали нужный файл с jQuery, нужно закачать его на сервер, где располагается ваш сайт и подключить его на страницы своего сайта, прописав до него путь:

Подключение jQuery с CDN

Существует альтернативный вариант подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а так же CDN который организовали создатели jQuery.

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

Узнать о некоторых трюках подключения jQuery с CDN можно здесь.

Собственная сборка jQuery

Исходный код (его можно найти и скачать с github.com) jQuery разделен на модули. Поэтому, в случае, если вам не требуется поддержка некой функциональности (например ajax), можно сделать собственную сборку jQuery, включающую только необходимые модули (описание того как это сделать есть на github.com). Правда стоит заметить, что едва ли это приведет к заметному приросту производительности, размер jQuery около 90кб, столько же весит средняя по размерам и качеству картинка. К тому же, будучи подключенным один раз, jQuery будет закеширован браузером и при следующих обращениях будет браться уже от туда.

jquery.page2page.ru

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

Итак, для начала нужно непосредственно скачать свежую версию. Ее скачать вы можете с сайта разработчика, а именно jquery.com.

Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.

  • Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 кбайт.
  • Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.

Немного о версиях

Если обобщить, то существует две версии этой библиотеки. Разница между ними в основном в совместимости браузеров.

jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. На данный момент последняя версия – 1.11.2.

jQuery 2.x – это последняя выпущенная версия библиотеки, включает в себя API jQuery 1.x, но проблема в том, что нету поддержки нашего «любимого» Internet Explorer версий 6, 7, 8. Последняя версия — 2.1.3.

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

Итак, давайте подключим jQuery к нашей странице. Скачаем файл jquery-1.11.2.min.js с сайта jquery.com и перенесем в папку js, в директории нашего сайта.

Для того чтобы подключить библиотеку, нужно прописать путь к файлу в теге SCRIPT, внутри тега HEAD.

В итоге наша страница будет иметь вид:

Я думаю тут будет всем понятен общий смысл.

Атрибут type говорит, какой тип подключаемого файла. Атрибут src указывает путь к файлу.

Как подключить библиотеку jQuery с внешних источников

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

Как вам возможно известно, скаченные файлы сайта, такие как css и javascript, а так же изображения скачиваются в кэш браузера.

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

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

Официальный сайт jQuery

Первый сайт, это конечно же официальный сайт разработчика jQuery — http://code.jquery.com/

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


 Google Libraries API

Второй сервис это всеми знакомый Google.

У Google есть проект – Google Libraries API. Этот проект предоставляет API для разработчиков на JavaScript, и позволяет подключать нужные библиотеки с серверов Google. Поддерживает не только библиотеки jQuery, но и Angular JS, Angular Material, Dojo, Ext Core, jQuery UI и другие.

Для подключения библиотеки с сайта Google используем код:

А вот если вы хотите подключить самую последнюю версию то нужен этот код:

Здесь главное в 1 – это показатель версии. А именно указывает на то что будет использовать библиотека последней версии jQuery 1.


Подключение с сайта Microsoft

Подключается абсолютно так же,  как и с другими сервисами.

От себя добавлю, что я редко видел, чтобы библиотека jQuery подключалась от Microsoft.

Заключение

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

hi-blog.ru

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

И так, ситуация первая. Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress. И вот, Вы хотите подключить jQuery на некую веб-страницу, и эта библиотека должна загружаться с Вашего сайта.

1. Загружаем свежую версию jQuery

Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».

2. Закачиваем jQuery на сайт

Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.

Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.

3. Создаём веб-страницу и вставляем туда ссылку на jQuery

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

  <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>  

После добавления, Ваша страница может иметь такой вид:

  <!DOCTYPE html>  <html dir="ltr" lang="ru-RU">  <head>  <meta charset="UTF-8" />  <title>Страница, на которую я подключаю jQuery</title>  <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>  </head>  <body>  Контент моей страницы  </body>  <html>  

Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery. На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код.

web-answers.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.