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

Вопрос

Здравствуйте! Я полный новичок в веб-программировании, и я хотел бы разобраться, как подключить jQuery на страницу и начать работать с этой библиотекой.

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

Ситуация 1

Подключаем 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 и подставьте его в код.

Ситуация 2

Как подключить jQuery на свою страницу с сайта Google и других внешних источников

1. С сайта Google API

В Google есть дочерний проект под названием Google Libraries API, слоган которого “Make the Web Faster” («сделай веб более быстрым»). Этот проект предоставляет API для JavaScript разработчиков, позволяющее им подключать разные библиотеки не из создаваемых ими сайтов, а из сайта Google ().

Что чем же заключается преимущество того, что эта библиотека будет загружаться не с Вашего сайта, а с сайта Google? Такой вариант лучше тем, что это положительно скажется на скорости загрузки веб-страницы у пользователя. И дело здесь не в том, что скорость передачи данных с сайта Google выше, чем с Вашего собственного сайта. Дело скорее в том, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.

Чтобы подключить jQuery с сайта Google на свою страницу, необходимо всего лишь задать значение атрибута SRC тега SCRIPT на адрес библиотеки на сайте Google API. На данный момент последняя версия jQuery имеет там такой адрес:

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

Общий «скелет» страницы с подключенной jQuery может иметь такой вид:

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

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

Если же Вы хотите подключить последнюю версию jQuery, тогда Вы можете заменить строчку вставки на такую:

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

Цифра 1 здесь означает последнюю версию линейки 1, которая уже долгое время является последней. Когда выйдет jQuery 2-й линейки, в ней могут быть некоторые существенные изменения (например, удалены или изменены некоторые функции), следовательно, если Вы делаете сайт на долгое время, то нет смысла подключать самую последнею версию jQuery. Однако, как это сделать, написано ниже.

2. Подключить последнюю версию jQuery с официального сайта

Хотя рекомендуется в первую очередь подключать jQuery именно с сайта Google API, но можно также сделать это с официального сайта. Строчка подключения последней версии этой библиотеки будет иметь вид:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Или, если надо, подключаем конкретную версию:

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

3. C сайта Microsoft

Также можно с сайта Microsoft, это делается так:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

Также советую Вам почитать ответы на вопрос «Загружать jQuery с сайта Google, а в случае ошибки — из своего?»

Ситуация 3

Подключить jQuery на локальную веб-страницу

Чтобы подключить jQuery на веб-страницу и работать с этой библиотекой, не обязательно иметь сайт, запущенный на реальном сервере. Более того, совсем не обязательно устанавливать и запускать локальный хостинг (как Денвер). Можно просто создать веб-страницу в произвольной папке.

Откройте Блокнот, поместите туда код из предыдущего пункта (там где речь шла о подключении jQuery с сайта Google). После этого сохраните этот файл как веб-страницу (при сохранении в поле «Тип файла» выберите «Все файлы», укажите кодировку «UTF-8», а затем дайте файлу произвольное имя и расширение html). Теперь этот файл можно открыть в любом браузере, и локальная страница будет отображена, при этом библиотека jQuery загрузится с интернета.

Проверка

Проверить, правильно ли подключён jQuery

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

<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<br/>Этот текст добавлен с помощью jQuery');
});
</script>

Этот код выполняется, когда страница будет полностью загружена (это обеспечивается методом ready). К содержимому тега BODY добавляется ещё некое содержимое с помощью функции append. Подробнее я описывать не буду, так как в этой статье я всего лишь пытаюсь рассказать о подключении jQuery.

Ещё один способ проверить, что jQuery работает, это использовать консоль, которая есть в расширении Firebug для Firefox. Выглядит она так:

Проверить jQuery в Firebug

Можно написать туда какую-либо команду JavaScript, в которой будет использоваться функциональность jQuery, например:

alert($('body').html());

Или же выполнить такой вот-код, который выводит в консоль версию jQuery:

if ($ === undefined) {
    console.log('jQuery не подключён.');
} else {
   console.log('Версия jQuery: ' + $.fn.jquery);
}

Подобная консоль также есть в браузере Chrome по умолчанию.

Ситуация 4

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

На этом сайте уже есть ответ на вопрос, как динамически подключить jQuery на веб-страницу. Динамическая загрузка этой библиотеки (или другой) предполагает, что она не будет загружаться вместе со страницей, это будет происходить только после определённого действия пользователя, такого как нажатия на кнопку. Для достижения такого эффекта можно пойти следующим образом:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function(){
    $(document).ready(function() {
        alert('jQuery загружен.');
    });
}, false);

17 комментария

  • Спасибо. Нужная информация. А как потом присоединять файлы, содержащие jQuery?

  • Pavel:

    А как подключить библиотеку к js, который работает на стороне сервера?
    Там нет ни тегов src, ни объекта document…

  • Иван:

    Большое спасибо!Удачного вам кодинга!

  • JamesHaige:

    ждут вас! На нашем сайте все анкеты проституток отмеченные значком 100 % фото, действительно проверяются
    [URL=http://nsksex.club — проститутки новосибирска[/URL —
    [URL=http://nsk.sibirki.com — проститутки новосибирска[/URL —
    [URL=http://sexonsk.love — проститутки новосибирска[/URL —
    [URL=http://sib.nsexy.ru — проститутки новосибирска[/URL —
    [URL=http://www.siblaguna.net — проститутки новосибирска[/URL —
    [URL=http://sexi-nsk.ru — проститутки новосибирска[/URL -

  • wnikast:

    Пройдите 1 регистрацию, сделайте 2 действия
    и получайте от 8950 рублей каждые сутки в автоматическом режиме.

    Мы гарантируем:
    - Первый заработок в течении 60 минут.
    - Стабильный доход 24 часа в сутки.
    - Поступление денег без задержек.
    - Для России, стран СНГ и Европы.
    - Без вложений и установки ПО.
    - Специально для новичков и людей без опыта.

    Более подробная информация у нас на сайте. ( prosto.zarplatt.ru )

  • lnikast:

    Пройдите 1 регистрацию, сделайте 2 действия
    и получайте от 8950 рублей каждые сутки в автоматическом режиме.

    Мы гарантируем:
    - Первый заработок в течении 60 минут.
    - Стабильный доход 24 часа в сутки.
    - Поступление денег без задержек.
    - Для России, стран СНГ и Европы.
    - Без вложений и установки ПО.
    - Специально для новичков и людей без опыта.

    Ознакомтесь с условиями на нашем сайте. ( prosto.zarplatt.ru )

  • MakONoFFS:

    Идеи бизнеса без вложений тут p-business.ru
    реальные и бесплатно.

  • Tannertulge:

    Acai Berry — Exactly Why Is Acai Berry Supplement Good For You?
    Is the item certified holistic? There are many copycat companies seeing that are creating products which have low in quality , nor use essentially the most beneficial associated with extracting the juice around the berries.

    Most individuals who are thinking about their bodies know around the health benefits of acai berry products.
    They have been used for centuries in Latin america by ancient medicine persons.
    The people in the U .
    s . just started using Acai in then everything else couple of years, as several endorsements from actresses.

    Acai fruit drink is similar to acai fruit juice except it contains less among the fruit.
    It can generally be a product provides more filtered water content than juice, and may have added ingredients like sugar or corn syrup.

    Acai Capsules are a greatly concentrated capsule or pill that is packed significant vitamins nutrients utilizing the berry itself.
    With the the additional nutrients include Phosphorus, Calcium, Potassium and valuable fat including Omega 6 and Omega some.
    Acai capsules are also very easy perform into daily daily ritual.
    For these reasons medications hold are preferred way utilizing Acai within a an acai weight loss program.

    The Amazonian fruit is a strong defense again medical concerns that nearly all of us have trouble with and that’s the why its popularity has grew so ultra fast.
    Such issue with inflammation, heart disease and auto immune disorders are helped by taking the pure juice on a daily basis.
    It additionally be full of vitamin E among other vitamins that aid associated with look and feel of the skin.

    Having more energy can produce a powerful impact on the way reside your our life.
    When you feel sluggish and exhausted at the end belonging to the day, deals with thing unwanted weight to do is hit the gym or put up with a grueling workout activities.
    You need energy to burn fat — there’s no way around it.
    An acai berry supplement is certainly a jolt to power level — and a secure one that.
    You won’t ought to put develop the jitters that other weight loss supplements cause that make you feel much like your heart is concerning to explode.

    ORAC (oxygen Radical Absorbance Capacity) score of berry is 167.
    It efficacy in comparison to its anti oxidants can be gauged against the fact that blue berry’s ORAC score is 32 and associated with Apple is 14.

    If simply the luxury of exercising all day, every day, you need to focus on what’s happening inside your system to aid you in getting the results you require.
    The best place to start is increase your metabolism as almost as much ast possible.
    The entire metabolism burns away fat you have in your body.
    When you have a pokey metabolism, body fat that the actual takes in is usually saved and builds up, a person the kilos that you’ll rather donrrrt you have. http://bloggb.top/natural-xl/

  • Cidessenak:

    Acai Berry — Exactly Why Is Acai Berry Supplement Good To You?
    Is employ this product certified holistic? There are many copycat companies now that are creating products that are low in quality and never use essentially the most beneficial process of extracting the juice from berries.

    Most people who are focused on their bodies know in regards to health benefits of acai berry products.
    They have been used for centuries in South america by ancient medicine adult.
    The people in the Country just started using Acai in focus of the final couple of years, associated with several endorsements from megastars.

    Acai fruit drink is the similar to acai fruit juice except supply less on the fruit.
    In order to generally be deemed as a product provides more filtered water content than juice, and will surely have added ingredients like sugar or corn syrup.

    Acai Capsules are a greatly concentrated capsule or pill that is usually packed with several vitamins nutrients inside addition to the acai fruit itself.
    Most of the additional nutrients include Phosphorus, Calcium, Potassium and valuable efas including Omega 6 and Omega 9.
    Acai capsules are also very easy to into a good daily daily habit.
    For these reasons several different ingredients are which are coming out way relying on Acai from a an acai weight loss program.

    The Amazonian fruit is really a strong defense again health concerns that lots of us suffer from and can be why its popularity has grew so ultra fast.
    Such issue with inflammation, heart disease and auto immune disorders are helped by the particular pure juice on every day basis.
    It additionally full of vitamin E among other vitamins that aid previously look and feel of the epidermis.

    Having more energy can even make a powerful impact with a way reside your days.
    When you feel sluggish and exhausted at the end among the day, will establish thing more powerful and healthier to do is hit the gym or endure a grueling workout routine.
    You need energy to burn fat — there’s no way around it.
    An acai berry supplement is much like a jolt to your energy level — and a safe and secure one overly.
    You won’t ought to put on top of the jitters that other weight loss supplements cause that lead you to feel like your heart is centered on to explode.

    ORAC (oxygen Radical Absorbance Capacity) score of acai berry is 167.
    It efficacy in relation to anti oxidants can be gauged off of the fact that blue berry’s ORAC score is 32 and associated with Apple is 14.

    If you don’t have the luxury of working out all day, every day, you can focus on what’s happening inside your body to help you get the results you want.
    The best place to start is increase your metabolism as almost as much ast possible.
    The business of metabolism burns away excess fat you have in one’s body.
    When you have a slow metabolism, body fat that shape takes was usually saved and builds up, a person the lbs that end up being rather dont you have. http://blognl.top/

  • AUTDipuri:

    Интернет магазин запчастей для машин autocomponent63.ru — это качественные комплектеющие, наилучшие профессионалы и удобство заказа. Потребность купить запчасти для иномарок возникает регулярно, ведь авто изнашиваются частями. И с этим согласны все автомобилисты. Рынок автозапчастей в наши дни – пестр и огромен, с этим также все согласятся. Именно из-за этого подбор запчастей для иномарок как и поиск запчастей по авторазборам для иномарок может оказаться трудным. Но не для тех, кто обратился в интеренет-магазин запчастей для авто autocomponent63.ru. Если Вы ищете автозапчасти, аналоги запчастей, авторазбор для иномарок, недорогие запчасти, запчасти для авто Кинель, запчасти в Самаре – считайте, Вам подфортило. Каталог запчастей для иномарок на нашем сайте – прост и легок в использовании. И что даже более важно, здесь Вы увидите богатый ассортимент. Единственное, чего чего Вы у нас не увидите – это б/у запчасти и детали сомнительного производителя, ведь мы гарнтируем высокое качество. Не нужно больше спрашивать у поисковика, где найти автозапчасти официальный сайт, то, что Вы искали – это autocomponent63.ru.
    Запчасти для иномарок: каталог автозапчастей для иномарок

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


(обязательно)