Шаг 6: Jquery основы работы

Jquery — самая популярная библиотека для JS. Фактически это файл .js в котором описан ряд функций  на чистом JS. Подключается на страницу как обычный файл скрипта. Т.к. библиотека написана на js то работаем с ней как обычными js функциями и классами. Обращаемся к библиотеке как к объекту с именем $() или jQuery(). Записываем возвращаемые значения в переменные. Или вызываем функции (методы) с нужными параметрами.

Основное удобство этой библиотеки — обращение к HTML объектам с помощью селекторов, как это делает CSS.

js:

document.getElementById('name');
document.getElementsByTagName('div');

jquery:

$( '#name' ); - выбрали все элементы с ид name
$( 'div' ); - все элементы с тегом div
$( '.name' ); - все элементы с классом name

Очень удобно. Также можно составлять длинные цепочки как и в CSS. Например можем точно указать какой именно объект с классом .name нам нужен (удобно когда много элементов с классом name):

html:

<div class="container">
	<form class="registration">
		<div class="name" > Петя </div>
	</form>
	<form class="enter">
		<div class="name" > Ваня </div>
	</form>
</div>
<div class="container-2">
	<div class="name" > Вася </div>
</div>

Jquery:

var myname = $( '.container form.enter .name' ); - выберем имя в форме входа (с классом enter)

Сейчас в myname хранится весь объект «<div class=»name» > Ваня </div>» со всеми метаданными (значение, позиционирование, дочерние объекты, классы и т.д.).

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


.remove() — удалить объект и html код со страницы, включая все дочерние элементы.

$('#button').remove();

.parent() — получить родителя;

.parents() — получить родителя по селектору;

Например получит у myname (Вася) родителя и родителя по селектору:

var parent1 =  myname.parent() - объект form
var parent2 =  myname.parents('.container') - родитель верхнего уровня <div>

.find() — найти в объекте. Полностью повторяет функцию поиска $().

parent2.find('.registration .name');

Казалось бы мы можем найти используя нам уже знакомую функцию поиска $() похоже по логике но не работает.

parent2.$('.registration .name') - не верно! - именно для этого и существует функция find()

.val() — получить или установить значение <input>

.html() — получить или установить значение вывода

Если в скобках передать значение, то оно будет установлено выбранному объекту. Если оставить скобки пустыми, то мы получим значение элемента.

$('.name').html('Дима'); - теперь у всех элементов с классом name установлены значения Дима.

Важно различать обычный элемент от элемента формы типа input. Эти функции делают одно и то же для разных элементов. Это специфика js так что примите как данность.

<input id=»#one»> — устанавливаем и получаем значения с помощью .val(), т.к. value — это атрибут находится внутри скобок <  >.

<p id=»#two»></p> — устанавливаем и получаем значения с помощью .html(), т.к. значение находится за пределами скобок <  > между открывающим и закрывающим тегами.


.attr() — получить или установить атрибут

Например php получил данные из БД и построил html, а мы хотим добавить элемент в корзину при клике по элементу, поэтому сохранили ид в атрибуте:

html:

<div id="name" data-element-id="123"> Зубная щетка </div>

js:

var id = $('#name').attr('data-element-id');
console.log( id ); - выведет 123

Например нам надо сделать кнопку не кликабельной:

html:

<button>Оформить заказ</button>

js:

$('button').attr('disabled','true');

.append() — добавить в этот объект в конец

.prepend() — добавить в этот объект в начало

.appendto() — тоже что и append только добавляем этот объект к указанному в скобках в конец

.prependto() — тоже что и prepend только добавляем этот объект к указанному в скобках в начало

html:

<div>
	<p>Два</p>
</div>

js:

$('div').append('<p>Три</p>');
$('div').prepend('<p>Раз</p>');

html результат:

<div>
	<p>Раз</p>
	<p>Два</p>
	<p>Три</p>
</div>

Например задача перенести один элемент внутрь другого.

html:

<div>
	<p>Иван</p>
</div>
<span>
	<p>Егор</p>
</span>

js:

var p = $('span p');
$('div').append( p );
или
$('div').append(  $('span p')  );

html результат:

<div>
	<p>Иван</p>
<p>Егор</p>
</div>
<span></span>

! Внимательно: Если вы получили элемент то вы работаете с ним. Т.о. если вам нужно дублировать элемент воспользуйтесь методом .clone().

var p = $('span p').clone();
$('div').append( p );
или
$('span p').clone().appendto(  $('div')  );

.each( функция ) — циклически перебрать все выбранные элементы. Принимает как параметр функцию, которая будет выполнятся. В функции будут переданы 2 параметра ключ и значение.

html:

<p>Вася</p>
<p>Петя</p>
<p>Саша</p>

js:

$('p').each( function( key , val ){
	console.log(key + ' => ' + val);
});

Результат:

0 => Вася
1 => Петя
2 => Саша

Как вариант можем получить jquery объект значения и работать дальше. Например удалить:

$('p').each( function( key , val ){
	$(val).remove();
});

.ajax(), .get(), .post() — методы для работы с ajax. Эти функции «Вишенка на торте» библиотеки т.к. писать обработку на чистом js не самое приятное занятие, учитывая кроссбраузерную разработку (когда писалась библиотека jquery браузеры по разному обрабатывать js команды, это и была одной из фишек jquery, хотя браузеры и сейчас местами работают по разному, но уже многие функции стандартизованы).

$.ajax({
    type: 'post',			/* Метод get или post */
    url: '/text.php',			/* URL адрес php скрипта который обрабатывает данные */
    data: {				/* Объект с передаваемыми переменными */
/* можно получить в $_POST, $_GET или $_REQUEST */
        action: 'add',
        name: 'Вася'
        id: '123'
    },
    dataType: 'json' 		/* Формат данных */
    success: function( data ){ 	/* Данные в формате json с которыми можно */
/*работать сразу как с объектами js data.name */
        console.log( data )
    }
});

.addClass( имя класса ) — добавить класс

.removeClass() — удалить класс

.hasClass() — проверка установлен ли класс

.toggleClass() — переключить класс — если добавлен удалит, если нету добавит

.show(число) — показать элемент, в скобках время анимации в миллисекундах, 1000 мс = 1 секунда

.hide() — скрыть элемент

.toggle() — переключить видимость (как и в toggleClass)

.slideDown(), .slideUp(), .slideToggle() — то же что и show/hide только анимация слайдера вниз/вверх

.fadeIn(), .fadeOut() , .fadeToggle() — анимация появление/затухание

Использование этой библиотеки избавляет нас от множество «велосипедов» (когда программист пишет новый код вместо того чтобы воспользоваться готовым решением) и сводит использование js до уровня условий, циклов и классов. Существует множество похожих библиотек, например jquery библиотека работы с куками или jquery библиотека работы с масками (маска используется в поле ввода телефона с пробелами и тире или вывода денежных единиц через пробел и запятую). Посмотреть и найти библиотеки можно на официальном сайте jquery.

Задание:

  • Посмотреть шпаргалки по jquery;
  • Изучить официальный сайт;
  • Скачать библиотеку не min версию, посмотреть код;
  • Изучить полный перечень возможностей.