Учим jQuery — Часть 2

Продолжаем разбирать jQuery. #jquery_not_dead 🙂
В первой части мы научились подключать нашу библиотеку, и написали функцию, внутри которой будем писать весь дальнейший код.

2.1 Как написать селектор в jQuery?

Селекторы в jQuery – это по сути всё что есть в CSS и даже больше. Давайте приведем пару примеров:

$('.panel').hide(0);
$('#panel').hide(0);
$('ul').hide(0);

Итак, на примере выше мы выбираем сначала класс .panel, потом блок с id panel и затем просто тег списка ul. Общая запись такая:
$(‘SELECTOR’)… где SELECTOR – это наш элемент страницы, который мы выбрали при помощи CSS селекторов. Сильно затрагивать тему CSS не будем, надеюсь вы уже знаете его основы 🙂 .

Javascript – событийный язык, или другими словами язык сценариев. Мы будем записывать функцию (метод) либо действие для нашего селектора.

.hide(0) – означает “скрыть элемент со страницы” – сделать его display:none.
0 – время за которое выполнить функцию в миллисекундах.

Аналогично hide существует show().

2.2 Последовательный вызов нескольких функций

$(‘#panel1’).hide(); – вызов функции с параметром по умолчанию.
$(‘#panel1’).hide(5000); – выполнить функцию на протяжении 5 секунд

Последовательно скрыть \ показать 2 раза, с разной периодичностью.

$('#panel1').hide(300).show(1000).hide(300).show(1000);

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

2.3 Как установить задержку между функциями в jQuery

Для этого нам понадобится замечательная функция (метод, кому как удобнее) delay().

$('#panel1').hide(300).delay(1000).show(1000);

Как и в прошлом примере – параметры в миллисекундах.

Итак, наш итоговый код после 2 уроков:

$(function(){

	// hide element
	$('.panel').hide(0);
	$('#panel').hide(0);
	$('ul').hide(0);

	// functions
	$('#panel1').hide(300).show(1000).hide(300).show(1000);

	// delay
	$('#panel1').hide(300).delay(1000).show(1000);

});

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

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

#SaveUkraine