Продолжаем разбирать 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);
});
