JavaScript

Знакомство с jQuery

В курсе по верстке, мы уже обращались к jQuery, скачивали, подключали, но что такое jQuery?

Это такая библиотека, которая очень сильно упрощает работу с javascript. Почему упрощает? Да вот почему: 

Напишем обращение к объекту через javascript и jQuery.

javascript:

document.getElementsByClassName(".button")[0]

jQuery:

$(".button") 

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

Как подключить?

Сначала, вам необходимо скачать jQuery с сайта http://jquery.com/. Там кликаете Download, а на следующей странице нажимаете на "Download the compressed, production jQuery 3.2.1". Со временем, скорее всего, цифра 3.2.1 изменится, так как jQuery постоянно обновляют. Да и ссылка тоже может изменится) 

Далее кладем файлик в папку js и подключаем его к проекту.

<script src='js/jquery'></script>

ВНИМАНИЕ! Файл должен подключаться первым. Сначала подключаем jQuery, а потом скрипты, где мы будем писать код, используя jQuery. 

В файле, в котором будет использоваться jQuery, необходимо написать:

$(document).ready(function(){

  /*javascript-код*/

});

Это нужно для того, чтобы скрипт начал работать только тогда, когда страница полностью прогружена и готова к работе. 

Как работает jquery?

На самом деле, у jquery, очень простой принцип работы. Именно поэтому, я советую начать писать сначала на jquery, а потом, если захотите, на чистом javascript, без использования jquery. 

Давайте, для начала, расскажу что jquery может делать: 

1. Обращаться к любому элементу на странице и как-то манипулировать с ним. 
2. Создавать события, например, клик об объекту. 
3. Легко осуществлять различные визуальные эффекты.
4. Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы).
5. Имеет огромное количество JavaScript плагинов, предназначенных для визуализации проектов или упрощения работы с нашей страницей. 

А как это все реализовать?

По большей части, чтобы jquery заработал, нам необходимо обратиться к объекту и выполнить с ним какое-то действие. 

Например: 

$('.button').css('background','red');

Если написать этот код, то блок с классом .button изменит свой цвет на красный. А по факту, у него добавится атрибут style, со значением background: red;

Чем-то похоже на css, не правда ли? Мы обращаемся с помощью селектора к объекту и меняем его свойства, только если css меняет только визуальные свойства, то у jquery возможностей будет немного побольше) 

На самом деле, вы, можно сказать, уже выучили jquery, осталось только изучить все действия, которые можно выполнять с объектами) Этим мы и займемся в процессе изучения jquery. Но, прежде чем их учить, в следующем уроке давайте немного остановимся на селекторах.