Основы JQuery в одной статье

07 August 2016

1837

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

Для понимания урока необходимо обладать начальным пониманим языка javascript и, само собой, html и css.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементовDOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом. ©Wikipedia

Все, кто уже посмотрел курс по основам html и css, уже знают, что html и css строятся на двух-трех простых правилах и чтобы полностью познать язык, необходимо просто выучить свойства. Например html строится на тегах и атрибутах, а чтобы познать язык, необходимо выучить теги.

JQuery изучается точно так же.

О основе фреймворка лежат селекторы. Это часть кода, которая позволяет обращаться к какому-то тегу и выполнять с ним какие-то действия.

Селектор выглядит так:

$('.class')

Вместо точки и class мы пишем точно такое же обращение к диву как и в css. Подробнее моежет прочитать в этом уроке: lesson-web.ru/course/27

Далее через точку мы можем писать какие-то действия с объектом, например:

$('.class').hide();
//Данный код скроет объект

Мы можем выполнить с объектом несколько типов действий, которые называются функциями:

Изменение состояние объекта.
Мы можем скрыть объект, передвинуть, изменить его сss-свойства. В общем-то все, что только душе угодно!
```
$('.class').show(); //Показать 
$('.class').css('background','#000'); //Назначить черный цвет фону $('.class').animate({'marginLeft','+=200px'},500); //переместить объект на 200px
```
Получение данных объекта.
Есть возможность занести в переменную любое свойство объекта. В общем счете это действие сводится к тому, что мы можем получить значение любого атрибута или содержание объекта.
```
var value=$('.class').text(); //получить текст
var value=$('.class').html(); //получить html
var value=$('.class').attr('id'); //получить значение id
var value=$('.class').data('id'); //получить значение data-id
```

Назначить объету данные.
Все то же самое, что и в предыдыщуем пункте, только мы не забираем значения, а назначаем.

$('.class').text('value'); //назначить текст
$('.class').html('value'); //назначить html
$('.class').attr('id','value'); //назначить значение id
$('.class').data('id','value'); //назначить значение data-id

Так же в jquery есть такая классная штука, как события. То есть мы можем совершить какое-то действие, если над объектом было совершено действие, например клик. Вот так выглядит обработка клика левой кнопкой мыши по объекту:

$('.tab').click(function(){
});

Теперь давайте рассмотрим пример с использованием jquery: ссылка на пример. Можете смело скачивать его и открывать в браузере index.html.

Чтоб мы видим? Несколько табов, при клике по которым, открываются разные разделы. Теперь можно покопаться в коде)

Во-первых, расскажу как подключить jquery. Для этого кладете файл jquery в проект и подключаете следуюущим образом:

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

Теперь разберем код из примера.

Логика простая:

Обрабатываем клик по классу .tab
Убираем всем табам класс active
Задаем табу, по которому был выполнен клик, класс active
Забираем у объекта атрибут data-id
Скрываем все section
Находим section_ с таким же id и показываем его

Обратите внимание, что мы используем функции slideUp() и slideDown(), которые позволяют плавно развернуть и свернуть объект.

Весь код с комментариями написан в файле script.js. Оу, и еще два важных момента.

Сначала мы подключаем библиотеку, а потом пишем код.
Чтобы jquery заработал, нам надо весь код поместить в функцию:
```
$(document).ready(function(){
  //код js и jquery
});
```

Вот так, по сути, работает Jquery. Самое главное, чтобы вы поняли, что такое селекторы и узнали несколько функций. Теперь вам просто надо начать изучать как можно больше функций, а для этого вот вам ссылку в помощь.

P.S. Это мой первый опыт структурирования знаний по jquery, поэтому если вы заметили ошибку или не правильную формулировку, смело пишите в комментарии.