• Страница 1 из 1
  • 1
Форум » II. jQuery » Базовое знакомство с jQuery » Что такое jQuery и как с ним работать (Подключение библиотеки jQuery)
Что такое jQuery и как с ним работать
1
jQuery - это библиотека JavaScript, коллекция кодов, позволяющих решать многие типовые задачи программирования. В данной библиотеке содержится множество готовых функций, которые облегчают выполнение распространённых действий.




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

Очевидные плюсы jQuery:

- малый вес файла библиотеки

- для работы с этой библиотекой достаточно знать CSS

- популярна и надёжна

- абсолютно бесплатна

- имеет большое сообщество разработчиков

- множество плагинов

Помимо jQuery, существует множество других библиотек JavaScript, например Yahoo User Interface Library, Dojo Toolkit, Mootools, Ember.js, AngularJS, Backbone.js, Underscore.js, Raphael

Изменить / Удалить

2 Как подключить jQuery, чтобы начать с ней работать.

Библиотека jQuery представляет собой внешний файл с расширением js.
Где его взять и как подключить? Самые последние версии можно найти на этих ресурсах:

jQuery CDN

Google CDN

Microsoft CDN

CDNJS CDN

jsDelivr CDN

CDN(Content Distribution Network) - это сеть доставки и дистрибуции контента. Файлы библиотеки jQuery расположены на CDN-серверах, которые предоставляют их любому желающему


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

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

Код
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


или, если вы подключаете jQuery с серверов Google, то таким образом:

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


если же вы скачали файл библиотеки и разместили его на своём сайте, то просто укажите путь к нему:

Код
<script src="здесь размещаете путь к файлу библиотеки"></script>


Цифры в названии файла обозначают версию библиотеки jQuery, чем больше цифры, тем более новой считается версия. Для веб-сайтов лучше использовать минимизированные версии файлов библиотеки (обозначаются с префиксом min.js), они имеют меньший вес. Размер несжатых файлов библиотеки гораздо больше и используется для разработчиков и изучения кода библиотеки.

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

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  /* Здесь код программы */
});
</script>

Изменить / Удалить

3 Функция $(document).ready()

$(document).ready() - это встроенная функция библиотеки jQuery, которая ждёт, когда полностью загрузится HTML-код страницы, прежде чем запустить JavaScript-сценарий, поскольку множество JavaScript кода предполагает манипулирование с содержимым веб-страницы, а пока браузер это содержимое не загрузит, то и работать с содержимым через JavaScript сценарий не получится.


Функцию:

Код
$(document).ready(function() {
/* программный код */
});


можно записывать короче:

Код
$(function() {
/* программный код */
});


Альтернативой функции (document).ready() является расположение вашего скрипта в конце кода страницы, перед закрывающим тегом body.

Код
<script src='здесь путь к файлу jquery'></script>
<script>
/* здесь ваш код */
</script>

Изменить / Удалить

4 Рекомендации по работе с jQuery

1. Библиотека jQuery в коде страницы должна располагаться выше JavaScript-кода, который её использует

2. Помещайте свой JavaScript-код после всех таблиц стилей CSS, в идеале непосредственно перед закрывающим тегом head

3. Добавляйте комментарии в коде после сочетания символов }); например:

Код
$(document).ready(function() {
/* программный код */
}); // здесь окончание ready

Изменить / Удалить

Форум » II. jQuery » Базовое знакомство с jQuery » Что такое jQuery и как с ним работать (Подключение библиотеки jQuery)
  • Страница 1 из 1
  • 1
Поиск: