Учим jQuery – Часть 1

Библиотека jQuery – одна из самых популярных, даже в 2020 :). Учим jQuery, а в голове помним что это != javascript.

1.1 Подключаем jquery.js

Скачать и подключить эту библиотеку вы можете на официальном сайте jquery.com, или воспользоваться ссылкой на CDN – code.jquery.com (в некоторых случаях загрузка будет быстрее).

Рекомендую воспользоваться CDN от Google:

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Подключаем как и любой другой скрипт через script src=…. Есть минифицированная версия для более быстрой загрузки страницы, её и рекомендую использовать. Развернутый вариант библиотеки служит для углубленного изучения и понимания.

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

1.2 Полная загрузка документа и выполнение скрипта

$(document).ready(function(){
  alert('test');
});

В нашем скрипте пишем код в таком виде. Есть еще несколько вариантов записи этой функции:

$(function(){
..
});

или:

(function($){

  // code

})(jQuery);

или:

;(function($, undefined){
  // code
})(jQuery);

$() — это синоним для jQuery(), а последние два варианта функции обертки помогают избежать конфликта с другими библиотеками.

Что же делает эта функция? Она выполняет код только после полной загрузки всей страницы. В своих проектах использую чаще всего именно второй вариант записи. Хотя последний вариант может помочь избежать некоторых ошибок.

Весь код мы будем писать внутри этой функции.

Читать далее Учим jQuery – Часть 2