Изучаем jQuery. Часть 1. Подключение jQuery

Ромчик
9

Уроки по jQuery

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


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

Создадим виртуальный хост, например, jquery. В нем будет основной файл index.php, директория js — со скриптами JavaScript, директория img — директория с картинками и директория css — директория с файлами стилей CSS.  

В index.php добавим следующий код:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link href="./css/style.css" rel="stylesheet" media="screen">
    <title>Изучаем jQuery</title>
</head>
<body>
<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        Content
    </div>
    <div id="sidebar">Sidebar</div>
    <div id="clear"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>

В файл style.css, который находится в директории css, поместим следующий код:

html, body{
    padding:0;
    margin:0;
    height:100%;
    position:relative;
}
/* Header */

#header {
    background-color: red;
    height: 100px;
    width: 900px;
    margin: 0 auto;
}

/* Content */

#wrapper{
    background:#CCC;
    min-height:100%;
    margin: 0 auto;
    width: 900px;
}
#content{
    float: left;
    width: 700px;
}
#clear{
    clear: both;
    height: 50px;
}

/* Footer */

#footer{
    background:#36F;
    height:50px;
    margin: 0 auto;
    width: 900px;
    margin-top:-50px;
    position:relative;
}

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

Подготовка проекта

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

Первый способ — подключение локальной библиотеки jQuery

Для подключения библиотеки этим способом необходимо скачать ее с официального сайта. Для этого переходим на официальный сайт:

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

И жмем «Download jQuery»

Переходим на следующую страницу, где выбираем версию jQuery библиотеки. На момент написания можно было скачать две версии: jQuery 1.9.1 (устраевшая, но поддерживающая браузеры IE6/7/8) и jQuery 2.0.0 (последняя версия, которая уже не поддерживает браузеры IE6/7/8)

Если Вы качаете библиотеку для production, т. е. для готового проекта, то выбирайте сжатую версию Download the compressed, production jQuery… Если же качаете библиотеку для development, т. е. для разрабатываемого проекта, то качайте не сжатую библиотеку Download the uncompressed, development jQuery… Почему? Для рабочего проетак лучше сжатая версия, т. к. весит меньше. А для development — просто иногда хочется заглянуть в код, любопытство :)

Скачиваем jQuery

Я скачал не сжатую версию jQuery 1.9.1 и назвал файл с этой библиотекой jquery.js Теперь помещаем этот файл в папку js нашего проекта.

Открываем файл index.php и между тегами <head> и </head> помещаем следующий код:


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

Т.о. мы подключили библиотек jQuery к нашему проекту. Давайте проверим.

Для этого создадим в директории js еще один файл script.js и поместим в него следующий код:


$(function(){

alert('jQuery работает');

});

Данный код ничего особенного не делает, просто выводит сообщение «jQuery работает». Проверим, открываем через браузер нашу страницу и видим:

Проверка работоспособности jQuery

Как видим jQuery мы подключили и она работает.

Плюсы данного способа Вы не зависите от других сервисов. Минус — пользователь постоянно загружает библиотеку jQuery (а это влияет на загрузку самого сайта).

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

Второй способ — используем CDN для подключения jQuery

Что такое CDN? CDN (Content Delivery Network) — сеть доставки контента. И так, при использовании CDN само ядро jQuery уже храниться на стороне. Это может быть Google, Microsoft, Yandex или сам jQuery. Выбирать Вам. Я использую CDN от Google (самый стабильный, может конечно я не прав). Хотя следует отметить и CDN от Yandex они выкладывают и плагины за что им огромное спасибо.

Для того, чтобы подключить jQuery через CDN от Google. Откройте файл index.php и в тегах строку:


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

замените на:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Проверяем.

Если же Вы хотите использовать CDN от Yandex, то замените на:


<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

Проверяем и видим аналогичный результат.

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

Вот в принципе и все. Мы с Вами рассмотрели два способа подключения библиотеки jQuery к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Изучаем jQuery. Часть 2. Основы jQuery | Все о WEB программировании - 28.05.2013 в 12:24

    […] JavaScript — jQuery. В прошлой статье мы рассмотрели два способа подключения jQuery к проекту: их преимущества и недостатки. А сегодня мы поговорим […]

  • Изучаем jQuery. Часть 3. Выборка элементов | Все о WEB программировании - 04.06.2013 в 10:57

    […] Мы продолжаем изучать jQuery. Так мы с Вами уже умеем подключать jQuery к проекту, познакомились с основами jQuery. А сегодня мы […]

  • Изучаем jQuery. Часть 4. Фильтры | Все о WEB программировании - 11.06.2013 в 10:45

    […] библиотеку JavaScript — jQuery. Так мы с Вами уже умеем подключать jQuery к проекту, познакомились с основными принципами jQuery , […]

  • Изучаем jQuery. Часть 5. Понятие цепной функции | Все о WEB программировании - 17.06.2013 в 08:08

    […] Мы продолжаем изучать jQuery. Мы с вами уже научились подключать jQuery к проекту, рассмотрели основы jQuery, разобрались с выбором […]

  • Изучаем jQuery. Часть 6. Понятие автоматических циклов | Все о WEB программировании - 18.06.2013 в 08:03

    […] jQuery — фреймворк JavaScript. Так, мы уже умеем выполнять подключение jQuery к проекту, познакомились с основами jQuery, рассмотрели методы […]

  • Изучаем jQuery. Часть 7.1 Методы манипуляции над элементами | Все о WEB программировании - 24.07.2013 в 14:19

    […] jQuery. Мы с Вами познакомились с основами jQuery, научились подключать jQuery к проекту, рассмотрели методы выбора элементов, остановились на […]

  • Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами | Все о WEB программировании - 11.08.2013 в 10:48

    […] и недостатки данного фреймворка, в статье «Изучаем jQuery. Часть 1. Подключение jQuery» остановились на подключении jQuery различными […]

  • Изучаем jQuery. Часть 8.4 События | Все о WEB программировании - 26.08.2013 в 14:25

    […] замечательную библиотеку JavaScript – jQuery. Так мы с Вами научились подключать jQuery к проекту, причем остановились на нескольких способах […]

  • Изучаем jQuery. Часть 8.5 События | Все о WEB программировании - 03.09.2013 в 07:14

    […] с браузерами. Прежде, чем приступить мы вспомним: как подключить jQuery к проекту,  как выбрать необходимые элементы, как отфильтровать […]

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика