Как подключить библиотеку jquery в javascript
Перейти к содержимому

Как подключить библиотеку jquery в javascript

  • автор:

Как подключить jQuery к файлу Js

Знак $ если я не ошибаюсь это библиотека jQuery, которая не подключена к данному файлу. Подскажите пожалуйста как я могу подключить эту библиотеку?

Отслеживать

user194625

задан 30 авг 2018 в 18:05

69 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков

30 авг 2018 в 18:25

А можно ли подключить к самому js файлу?

25 мая 2021 в 10:49

Можете скопировать содержимое файла jquery.js и вставить его в ваш файл скрипта перед вашим кодом.

Урок №3 — Подключение jQuery

Урок №3 - Подключение jQuery

В видео уроке мы научимся подключать библиотеку jQuery к проекту. Без подключения jQuery ни одна из встроенных функция работать не будет, поэтому это первое что необходимо рассмотреть.

Видеоурок

При использовании любой сторонней библиотеки необходимо подключать её как отдельный файл внутрь HTML страницы.

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

  • скачать jQuery файл, добавить в проект и далее подключить локально с проекта;
  • не скачивать jQuery файл и подключить удаленно с сервера других компаний.

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

Весь код будет доступен после подписки на проект!

Узнайте как подключить библиотеку jQuery

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

Как можно коротко описать эту вспомогательную JavaScript-библиотеку?

Как вы уже поняли со слов JavaScript-библиотека, jQuery взаимодействует с JavaScript, а также с HTML. Главный плюс этой библиотеки в том, что с ее помощью можно получить доступ к любому элементу DOM-структуры с удивительной легкостью. А также, jQuery предоставляет удобный API для работы с AJAX (c AJAX мы познакомимся в будущем). В общем, можно найти множество плюсов и «тайных дверей» в этой библиотеке, но сейчас у нас с вами стоит задача о подключение jQuery. Чем мы с вами сейчас и займемся.

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

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

JQuery_Download

Заходим на сайт http://jquery.com/. После выбираем вкладку Download. В открывшемся окне нам нужно скачать подходящую нам версию jQuery. Там вы можете увидеть jQuery 1.x и jQuery 2.x. Чем же они отличаются? Да практически ничем, а только тем, что jQuery 2.x не поддерживается нашим «любимым» IE (версии 6, 7, 8). Так что, выбираем jQuery 1.x. Там тоже есть некое разветвление. Нашему вниманию предлагают сжатую и не сжатую версию библиотеки (Download the compressed, production jQuery 1.11.3, Download the uncompressed, development jQuery 1.11.3). Обе версии абсолютно одинаковы, за исключением экономии места. Вы можете скачать обе и увидеть, что в не сжатой версии есть комментарии, в то время как сжатая предстает перед нами даже без пробелов.

После скачивания самой библиотеки нам надо подключить ее к нашему потенциальному HTML-документу. Делается это следующим образом:

Вот и подключена наша библиотека. Первый способ мы рассмотрели.

Второй намного проще и удобнее.

Так как Google является самой крупной компанией на рынке браузерных технологий, он приготовил фишечку и для любителей jQuery. Просто в место указанного нами пути скаченной библиотека вставляем вот эту волшебную ссылку http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js. Если вы ее откроете, то увидите сжатый код библиотеки jQuery. Также, вы можете наблюдать там AJAX-технологии, которые в будущем вам не придется подключать отдельно.

В общем-то и все. Можем приступать к работе с jQuery и осваивать новые горизонты с помощью этого могущественного механизма.

Установка библиотеки jQuery

Прежде всего, вам понадобится библиотека jQuery, доступная для бесплатной загрузки на сайте jquery.com. В правой части главной страницы указанного сайта находится кнопка Download, щелчок на которой открывает новую страницу, на которой можно выбрать, какой из двух доступных вариантов файла библиотеки должен быть загружен: сжатый (Production) или несжатый (Development):

Сайт jquery.com

Скачивание библиотеки jquery

На веб-сайте jquery.com для загрузки предлагаются две версии (во 2й версии отключена поддержка устаревших браузеров IE 6,7,8), каждая из которых имеет два файла. Первый из них, jQuery-1.10.2.js, содержит версию библиотеки, которую обычно используют при разработке веб-сайтов или приложений. В этом файле находится несжатый JavaScript-код, объем которого составляет примерно 265 Кбайт. Можете свободно открыть этот файл и изучить его содержимое, чтобы посмотреть, как jQuery реализует свои возможности, что позволит вам без труда развернуть стек вызовов в случае возникновения проблем с кодом.

Второй файл, jquery-1.10.2.min.js, используется при развертывании сайта или веб-приложения для пользователей. Он содержит тот же JavaScript-код, что и первый файл, однако сделан более компактным за счет удаления из него всех пробелов и использования односимвольных имен переменных вместо содержательных имен большей длины для экономии места.

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

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

    Библиотека jQuery  

Цветочный магазин

В этом примере библиотека jQuery добавляется в документ с помощью следующего кода:

Чтобы ваше внимание было постоянно сосредоточено на основном содержимом документа, стили CSS вынесены во внешнюю таблицу стилей, сохраненную в файле styles.css:

h1 < min-width: 70px; border: thick double black; margin-left: auto; margin-right: auto; text-align: center; font-size: x-large; padding: .5em; color: darkgreen; background-image: url("http://professorweb.ru/downloads/jquery/border.png"); background-size: contain; margin-top: 0; >.dtable .drow .dcell .dcell > * input label #buttonDiv button #oblock

В результате у вас должна получиться страница наподобие следующей:

Простая страница

Загрузка jQuery с использованием CDN

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

Существуют две причины, по которым имеет смысл использовать CDN:

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

Используя CDN, вы должны быть твердо уверены в надежности ее оператора. Вы должны быть уверены в том, что пользователь получит именно те файлы, на которые рассчитывает, и что служба будет оставаться всегда доступной. Google и Microsoft также предоставляют бесплатные услуги CDN по доставке библиотеки jQuery (равно как и других популярных библиотек JavaScript). Обе компании имеют богатейший опыт бесперебойного предоставления услуг, и от них вряд ли можно ожидать самовольного внесения каких-либо изменений в библиотеку jQuery.

Подробнее о службе Microsoft можно узнать по такому адресу: asp.net/ajaxlibrary/cdn.ashx. Ниже приведен пример подключения библиотеки jQuery через службу Google:

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

Отладка JavaScript-кода

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

    Библиотека jQuery    

В этом коде мы не использовали возможностей библиотеки jQuery, а написали скрипты на чистом JavaScript (сравните объем этого кода с примером чуть ниже, где реализуется тот же функционал, но используется библиотека jQuery).

Обратите внимание, что этот простой сценарий содержит вывод вспомогательного сообщения на консоль (console.log). — это простое (но весьма полезное) средство, предоставляемое браузером и предназначенное для отображения отладочной информации, генерируемой сценарием в процессе выполнения. Вызов консоли осуществляется в разных браузерах по-разному. В Google Chrome для этого следует нажать комбинацию клавиш Ctrl + Shift + I и выбрать вкладку Console:

Консоль Google Chrome

Как нетрудно заметить, результат, генерируемый вызовом метода console.log(), отображается в окне консоли вместе с дополнительной информацией о местонахождении источника сообщения (в данном случае это строки 34 и 42 файла test.html).

Первый сценарий jQuery

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

$(document).ready(function(e) < $("img:odd").mouseenter(function(e) < $(this).css("opacity", 0.5); console.log('Вы навели мышь на элемент  '); >).mouseout(function(e) < $(this).css("opacity", 1.0); console.log('Вы убрали мышь с элемента  '); >); >);

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

Согласитесь, данный сценарий гораздо меньше и проще в понимании, нежели предыдущий пример с использованием стандартных функций JavaScript. Плюс этот сценарий является кроссбраузерным, т.е. его можно запустить, например, в старых браузерах (IE

  • C# тест (легкий)
  • .NET тест (средний)

Лучший чат для C# программистов

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

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