Меньше слов, больше дела. Начнём пожалуй с основ.
Выборка элементов
Выборка элементов практически идентична с выборкой в CSS.
Давайте посмотрим на такой пример:
<div class="one">
<div id="two">
<a class="block">Выбираемый элемент</a>
</div>
</div>Чтобы получить доступ к Выбираемому элементу нужно использовать следующий код:
$('div.one #two a.block')
Естественно правильнее будет так:
$('#two a.block')
но нужно было просто привести пример.
Чтобы выбрать все якоря, которые находятся, скажем в div классе 'one', нужно использовать следующий код:
$('div.one > a')
Оператор > показывает, что элемент справа является дочерним для элемента слева.
Также можно использовать псевдоэлементы, такие как :first, :last, :eq() и подобные, к примеру: чтобы выбрать первый дочерний якорь для div класса
'one' нужно использовать следующий код:
$('div.one > a:first')
Чтобы выбрать 4ый якорь нужно использовать
$('div.one > a:eq(4)')
Думаю здесь всё понятно.
Итак начнем
Я уже описал пару примеров в другой теме, поэтому просто скопирую их сюда:
<div class="hide">Текст скроется если на него нажать</div>
<script type="text/javascript">
$('div.hide').fadeOut('slow');
</script>Теперь все элементы, заключенные в <div class="hide"></div> при клике на них будут скрыватся.
<div class="hidenext">Скрыть/открыть</div>
<div>Текст</div>
<div class="hidenext">Скрыть/открыть 2</div>
<div>Текст 2</div>
<script type="text/javascript>"$('div.hidenext').click(function (){$(this).next().slideToggle('normal')});</script>С данным кодом при клике на любой элемент в div классе hidenext следующий элемент будет скрыватся, при повторном клике раскрыватся.
Фокусы с функцией animate()
Функция animate() позволяет создавать любые анимации с использованием обычного CSS.
Рассмотрим следующий пример:
$('div.navigation a').hover(
function(){$(this).stop(true).animate({width: '+=10px'}, {duration: 200, queue: false})},
function(){$(this).stop(true).animate({width: '-=10px'}, {duration: 200, queue: false})});В данном коде очень много неизвесного, но и не сложного.
Начнем разбор:
$('div.navigation a') -- этим кодом мы выбираем все якори в div классе 'navigation'
Ф-ия hover принимает два параметра: код который будет исполнятся при наведении курсора(mouseOver), и код, который будет исполнятся при отведении курсора(mouseOut) от элемента.
На самом деле это не совсем функция, а скорее обработчик событий. Существует много обработчиков событий:
mouseOver
mouseOut
focus -- получение фокуса
blur -- потеря фокуса
mouseDown -- кнопка мыши нажата
mouseUp -- кнопка мыши отпущена
click -- обьеденяет 2 предыдущих события
dblclick -- двойной щелчок
change -- элемент формы потерял фокус и его значение было изменено
keyPress -- клавиша нажата
keyUp -- клавиша отпущена
submit -- данные формы отправлены(если возвратит false, отправка не произойдет)
Это естественно не все, но думаю пока хватит. Также эти события можно использовать в HTML коде в качестве аттрибутов тегов с добавлением в начало слова "on". Например:
<input type="text" name="text" onFocus="alert('Получен фокус')"/>Продолжим:
первая ф-ия -- увеличивает ширину ссылки на 10 пикселов, а вторая уменьшает.
{duration: 200, queue: false} -- означает, что анимация исполнится за 200 мс и что отменян=ется очередь анимации.
В CSS нужно прописать следующий стиль для ссылок в навигации:
.navigation a{
background-color: rgba(198,214,229,0.7);
display: block;
margin-bottom: 2px;
padding: 5px;
text-decoration: none;
}
.navigation a:hover{background-color: rgba(198,214,229,0.9);}
Результат показан на скриншоте.
.gif)
