Введение в jQuery | Подключение jQuery на сайте

jQuery - это ...

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

Преимущества, при использовании jQuery

Простота использования достигается за счет использования более простого и понятного синтаксиса по сравнению с языком JavaScript или других JavaScript-библиотек, также необходимого функционала можно добиться при использовании гораздо меньшего количества кода.
Небольшой размер загружаемого файла, который обрабатывает jQuery код и переводит его в код JavaScript. В большинстве случаях размер файла не превышает 100кб.
Большой объем библиотеки, обеспечивает выполнение многих тысяч функций по сравнению с другими библиотеками.
Отличная документация обеспечит новичка всеми необходимыми знаниями и поможет при решении возникших проблем.
Огромное сообщество пользователей за счет существующих форумов и обучаемых курсов может помочь начинающим быстрее и эффективнее освоить на практике эту JavaScript-библиотеку.
Поддержка асинхронного JavaScript и XML (AJAX). Эффективность jQuery становится более заметной при работе с AJAX, т.к. решение соответствующих задач при использовании JavaScript оказывается нелегкой работой.

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

Подключить jQuery можно несколькими способами:

Наиболее часто jQuery подключают в соответствующем файле HTML. Файл jQuery можно получить с помощью сети дистрибуции контента (CDN) или самостоятельно скачав сам JavaScript файл в папку Вашего проекта. В любом случае подключение осуществляется за счет использовании ссылки на файл и тега <script>.

Подключение jQuery с помощью CDN

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

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

Подключение jQuery из папки проекта (js)

<script src="js/jquery-1.12.0.min.js"></script>

jQuery в действии

<html>
<head>
  <title>Прячем элемент после нажатия на него</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div class="hide-me">
  Нажмите,чтобы спрятать этот блок.
  </div>
<script>
jQuery(document).ready(function($){
  $(document).on('click','.hide-me', function(){
    $(this).slideUp();
  });
});
</script>
</body>
</html>

<html>

<head>

<title>Прячем элемент после нажатия на него</title>

</head>

<body>

Нажмите,чтобы спрятать этот блок.

</div>

jQuery(document).ready(function($){

$(document).on('click','.hide-me', function(){

$(this).slideUp();

});

</script>

</body>

</html>

Введение в jQuery, подключение jQuery