ГлавнаяПрограммирование › jQuery для начинающих - Появление блока

jQuery для начинающих - Появление блока

В этой статье мы с вами попытаемся рассмотреть несколько простых примеров использования jQuery, для профи эти уроки покажуться смешными и простыми, но данная статья расчитана на первое знакомство и поможет немного понять суть языка.

Для начала нужно скачать библиотеку jquery
После того как мы сохраним скачанную библиотеку в туже папку что и нашу страничку, мы должны подключить библиотеку. Для етого нужно просто указать путь к файлу jquery.
Расположить следующий код между тегами head

<head>

<script src="jquery.js" type="text/javascript">

</head>

Далее начинаем начинаем писать действия с конкретными обьектами созданными на странице. Рассмотрим пример:

<script type="text/javascript">
$(function () {
$(&acute;#div1&acute;).click(function ()
{
$(&acute;#div2&acute;).slideDown();
});
});
</script>

Имея при этом два дива c id: div1 и div2

<div id="div1" style="background-color: #cccccc; border: 1px solid #666666; width: 200px;">Здесь располагается содержимое нового тега Div1</div>

<div id="div2" style="background-color: #cccccc; border: 1px solid #666666; width: 200px; display: none;">Здесь располагается содержимое нового тега Div2</div>

Теперь разберем, что должно у нас получиться.

Строка 2 открывает функцию (вместо $ может писаться jQuery)
Строка 3 определяет id элемента с которым мы будем работать, в данном случае это див с id — #div1. Далее идет действие после которого должно что-то произойти. В нашем случае это .click — нажатие. Еще может быть .hover — при наведении.
Строка 5 с каким элементом будет происходить действие (#div2) и собственно какое действие .slideDown — скольжение вниз. Для этого мы заранее в свойствах дива #div2 поставили нулевую видимость — display:none.

Т.е мы получили простенькую команду: при нажатии на див1 показать заранее скрытый див2 причем не резко,
а применив аминацию — .slideDown

Отзывы

Сережа Пират (гость) 11.07.16 23:23
Защита данных это конечно хорошо, cntrl+c cntrl+v копируют вовсе не код))) Переписывать?) О ужс.
Чтобы оставить отзыв авторизируйтесь на блоге или войдите через социальную сеть
© Харьковблог - блог города Харькова
Напишите нам
create by motsenko.com
Харьковблог в