Учим 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 селекторов.

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);

});

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru

Пишите, отвечу на любые вопросы.
E-mail: dmitriyribka@gmail.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *