Знакомство с библиотекой jQuery

Сперва скажу, что jQuery – это супер. Теперь подробнее.

jQuery – это JavaScript фреймворк, библиотека, разработанная Джоном Резигом. Официальный сайт проекта – jquery.com (там же можно скачать эту библиотеку). Проект стартовал в 2006 году, когда была выпущена первая альфа-версия, на сегодняшний день jQuery является самым популярным JavaScript фреймворком. Данный пост – некая замануха,  хочу создать приятное впечатление об этой библиотеке. Знакомьтесь.

Итак, что же дает программисту jQuery? В первую очередь, мостик к возможностям браузера. Можно, прорываясь через бурную реку, преодолевая пороги, писать на чистом JavaScript, а можно воспользоваться таким инструментом, как jQuery. По сути, эта библиотека – набор функций, воспользовавшись которыми, можно без проблем, в одну-две строчки создать на странице какой-либо визуальный эффект, посредством технологии ajax загрузить другую страницу, а самое главное – jQuery позволяет очень просто работать с DOM элементами страницы, присваивать им какую-то функцию при каком-то действии, например, клике или наведении.

Эта библиотека подключается к странице как обычные JavaScript:

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

Чтобы использовать функции jQuery, подключите еще один скрипт. Для начала необходимо сделать так, чтобы все функции запускались и обрабатывались только после загрузки страницы:

$(document).ready(function(){
   //Тут непосредственно код.
}

А теперь давайте представим, что у нас есть некая выпадающая менушка, заголовок которой находится в теге <h3></h3>. Нам нужно, чтобы по клику по заголовку данная менюшка открывалась или закрывалась. Если вы используете jQuery, не нужно вешать классическое onclick на заголовок, как вы привыкли делать. Достаточно присвоить id этому заголовку h3, уже в коде, при помощи jQuery, повешать событие на этот id (id – уникальный идентификатор элемента на странице). Саму менюшку помещаем в ul, которому также присваиваем идентификатор + в css прописываем стиль для этого id: display: none (по умолчанию, при загрузке страницы, пусть менюшка будет скрыта).

<h3 id="pheader">Страницы</h3>
<ul id="pcontent" style="display: none">
<li><a class="links" href="http://google.com/">Элемент меню</a></li>
</ul>

Вы видите, что заголовок с id=»pheader», а менюшка с id=»pcontent». Теперь возвращаемся к JS коду, вешаем событие onclick на элемент на странице с id  «pheader»:

$(document).ready(function() { //Когда страница загрузилась
	$("#pheader").click(function() { //Вешаем обработчик на клик по заголовку
		if ($("#pcontent:first").is(":hidden")) { //Если менюшка скрыта
			$("#pcontent").show("slow"); //Открываем ее эффектом скольжения
		}
		else { //Иначе
			$("#pcontent").slideUp(); //Закрываем, тем же жффектом
		}
	});
});

Вот что получилось (кликните по заголовку): http://php.name/demo/jquery/

Если вы внимательно изучите код, то поймете всю суть, весь синтаксис этого фреймворка. Обращение к элементам страницы идет следующим образом: $(«#pheader»), далее идет событие (в данном случае – onclick), потом скобки, внутри которых функция, которая должна выполняться после выполнения события. Если нам нужно обратиться к какому-то классу, а не идентификатору, делаем так: $(«.links»), где links – нужный класс. Все как в CSS (точка и решетка – класс и id соответственно).

Но нам этого мало, чтобы продемонстрировать всю мощь библиотеки. Давайте сделаем так, чтобы по клику на ссылку класса links выскакивал алерт со значением href ссылки, по которой кликнули. Получение href ссылки может быть полезным, например, если нужно использовать ajax на странице, в определенном слое открывать ту или иную ссылку, не перегружая страницу и не вешая никаких событий на эти самые ссылки, достаточно повесить класс. Мы знаем, что href – это атрибут тега A, нам нужно получить этот атрибут. Итак, вот обработчик события для клика по элементам класса links:

$(".links").click(function() {
     var src = $(this).attr("href");
     alert(src);
     return false;
 });

Теперь в примере, приведенном выше, кликните по ссылке. Как это получилось? Обратите внимание на

$(this).attr("href");

И вы все поймете.

Согласитесь, очень здорово. Также в библиотеке есть встроенные функции для работы с ajax, думаю, вы сами найдете описания к ним. В Интернете достаточно документации и материала на эту тему, в том числе на русском языке.