Подключить jquery к html


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

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

<head>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>    </head>

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

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

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


Подключить jquery к html

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

<head>    <script type="text/javascript" src="/js/jquery-1.10.1.js"></script>    </head>

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

<head>  <script type="text/javascript" src="/js/jquery-1.10.1.js"></script>  <script type="text/javascript" src="/js/other.js"></script>  </head>

Также хочу обратить внимание на то, что подключение к 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

<script language="JavaScript" type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.js"></script>

Как подключить библиотеку jQuery к другой CMS?


Достаточно подключить последнюю версию jQuery с Google API. Данное подключение располагается практически везде в файле header.php. Нужно указать следующую строку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Спасибо за внимание!

tradebenefit.ru

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

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

1. Удаленный:

Добавляем на страницу код в «head» либо в самом конце страницы…всё! В зависимости от того, как требуется загрузка jQuery.

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

2. Локальный:

Заходим на официальный сайт jQuery

Нажимаем Download jQuery

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

У нас открывается новая страница. где нас интересует две строчки — это первая строка — несжатая библиотека jQueryИ сжатая!

Какая между ними разница!? Они отличаются весом (первый вариант весит 85 Кб, а второй 260(вес может немного отличаться в зависимости от версий…)) и структурой кода(первый вариант оптимизированный, а второй для разработчиков).

А в остальном они одинаковые! Логично, что стоит использовать первый вариант

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


Если не случилась загрузка jQuery

Вы нажали на кнопку загрузить, но загрузка не произошла, а вышло новое окно, где вы увидели много кода! Что делать с ним!?

Нажимаем ПКМ и выбираем строку сохранить как… Показываем место сохраняем.

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

Вернемся к подключению…

После того, как скачали файл jQuery, его нужно переместить на сервер, где он и будет находиться…

Как и в первом варианте создаем код, в котором нужно прописать путь до файла…

<script src="http://ВАШ_САЙТ/ПУТЬ_ДО_ФАЙЛА/НАЗВАНИЕ_ФАЙЛА.js"></script>

Какой из вариантов подключения выбрать!?

В сети очень часто видишь, что, когда говорят о подключении jQuery, то рекомендуют удаленное подключение.

Я конечно не знаю — они все очень умные, и мне до них как до луны!

Но сами себя спросите, что лучше расположение на удаленном сервере или на локальном!?

Лично я сторонник того, чтобы никаким образом, если это возможно — никогда не зависеть от второго лица!

Зачем нужен jQuery !?


Мы не будем вдаваться во всякие мудрствования, о том откуда пошел jQuery , почему так сложилось, что javascript по ощущениям … какой-то ущербный без jQuery .

Давайте приведем простой пример, который показал бы, что без jQuery javascript – довольно тяжел для запоминания и понимания… не буду что-то придумывать свое, вот пример из интернета:

<script>

var elem = document.getElementById('p');

var elem = $('#p');

</script>

dwweb.ru

Сначала надо скачать саму библиотеку (которая находится в разделе «программы»), разархивировать и перенести в ту же папку, где лежат ваши html-страницы.

Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов. Добавим этот тег в html-страницу, так же как мы подключали файл «script.js» с функциями js:

Файл: «index.html»

  <html>   <head>   <title>jQuery</title>   <link rel="stylesheet" type="text/css" href="cascade.css">   <script type="text/javascript" src="jquery-1.7.1.js"></script>   <script type="text/javascript" src="script.js"></script>    </head>   <body>   </body>  </html>  

Обратите внимание на имя файла. Здесь используется библиотека jquery-1.7.1, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.

Итак, у нас в папке лежат html-страница, страница со стилями (cascade.css), страница с js-функциями (script.js) и библиотека jQuery (jquery-1.7.1.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):

Эффекты jQuery

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

Файл: «index.html»

<htm.  

ect1()">Эффект Show()</button> <button onclick="addEffect2()">Эффект SlideDown()</button> <button onclick="addEffect3()">Эффект Animate()</button> </body> </html>

Оформим внешний вид и сделаем прямоугольники невидимыми с помощью CSS.

Код cascade.css:

Файл: «cascade.css»

#xy1, #xy2, #xy3{   width:50px;   height:80px;   float:left;   background:red;   margin:5px;   color:white;   display:none;  }

Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:

Файл: «script.js»

function addEffect1(){   $("#xy1:hidden").show();  }  function addEffect2(){   $("#xy2:hidden").slideDown("slow");  }  function addEffect3(){   $("#xy3:hidden").show().animate( {   fontSize:"36px"   } , 3000 );  }

Что же делают эти функции?

Функция addEffect1() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#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-код и т.д. Здесь же могут быть указаны какие-либо события.

свойства действия — если они предусмотрены действием.

www.web-shpargalka.ru

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

Подключить 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

Что это такое

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

Подключить jquery к html

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

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

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

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

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

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

Подключить jquery к html

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

Подключить jquery к html

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

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

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

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

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

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

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

Подключить jquery к html

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

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

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

Подключить jquery к html

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

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

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

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

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

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

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

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

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

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

Подключить jquery к html

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

Своя сборка

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

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

Подключить jquery к html

Вывод

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

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

start-luck.ru

Способ 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

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 со страницы своего сайта

И так, ситуация первая. Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.