Вероятно, библиотека Javascript jQuery будет интересна как начинающим, так и несколько продвинутым веб-дизайнерам.
Почему речь пойдет именно о jQuery?
Одна из его особенностей – отсутствие необходимости прописывать множество кодов Javascript, так как jQuery позволяет сделать все то же самое с помощью пары строчек. Кроме того, jQuery, как и привычный нам WordPress, отличается массой произведенных улучшений и дополнений.
Итак, jQuery — это библиотека JavaScript, в основу которой положено взаимодействие JavaScript и HTML. Она позволяет легко получить доступ к любому элементу DOM, с ее помощью обращаются к атрибутам и содержимому элементов DOM, а также производят с ними различные манипуляции. Кроме этого, библиотека jQuery для работы с Ajax предоставляет удобный API.
Итак, начинаем работу в jQuery.
Сначала нужно подключить jQuery:
[sourcecode language=’jscript’][/sourcecode]
Проверьте, какую версию вы используете: необходима Minifest.
Лучше всего осуществлять подключение, используя Google’s Content Delivery Network (CDN). Здесь вы получите именно последнюю версию.
[sourcecode language=’jscript’][/sourcecode]Прежде всего нужно научиться выбирать необходимые элементы. Для этого используют знак $, а именно: $(‘выбранные элементы’).
Если необходимо выбрать все div’ы на странице, пишут: $(‘div’).
[sourcecode language='jscript']$('div p') //выбираем все параграфы, содержащиеся внутри div'ов.$('.something') //выбираем элементы с class'ом 'something'
$('#something') //выбираем элемент с id 'something'[/sourcecode]
Возможны любые комбинации.
[sourcecode language='jscript']$('div p#something a') //выбирает все ссылки из параграфа с родителем div и с id 'something'.[/sourcecode]Давайте попробуем создать на странице новый Div
[sourcecode language='jscript']this is some text
Ему нужно прописать стили:
[sourcecode language='css']#something {width: 200px;
height: 200px;
background-color: red;
color: white;
border: 4px solid black;
margin: 100px 0 0 80px;
}[/sourcecode]
Вот что у нас получилось:
Теперь обеспечим движение данного блока на странице. Выделяем объект.
[sourcecode language='jscript']$('#something')[/sourcecode]В данном случае можно применить $(‘div’), но желательно указать более конкретно.
Чтобы объект смог двигаться, применим функцию animate():
Эта функция может содержать 3 опции, но, в принципе, одна из них не всегда применяется.
[sourcecode language='jscript'].animate(что поменять, скорость, возврат);[/sourcecode]Рассмотрим подробнее, что применить:
[sourcecode language='jscript'].animate({'параметр': 'величина', 'параметр2': 'величина'}, скорость, возврат)[/sourcecode]Итак, мы задали отступы: вверху - 300, слева - 400, выбрали скорость - 1000 (эквивалент 1 сек). После совершения движения выполняется ‘возврат’, но о нем позже.
[sourcecode language='jscript']$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);[/sourcecode]Вот что мы получили в результате:
Увидеть все это в демонстрационной версии можно здесь.
