JQuery для начинающих

JQuery — это JavaScript-фреймворк (как бы, обёртка над Яваскриптом), который упрощает нам жизнь в несколько раз. В этой статье изложены основы JQuery, очень простые для понимания

Для начала, JQuery нужно скачать (с официального сайта, последняя версия). Он представляет собой обыкновенный js-файл, который нужно будет подключить:

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

или так:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--в этом случае, его не нужно скачивать, при работе он автоматом подгрузится с официального сайта-->

Доступ к элементам с помощью JQuery

JQuery работает с объектной моделью документа (DOM).

• $('tag') — доступ к тегу tag: $('span') получит все теги <span>
• $('#id') — доступ к элементу по идентификатору id: $('#my') получит элемент с id='my'
• $('.class') — доступ к элементу по имени класса: $('.portret') получит все элементы с class='portret'
• $('*') — доступ ко всем элементам. Получит все элементы документа

Это основные способы доступа к элементам в JQuery. Их, также, можно комбинировать, тогда получается интересный результат

• $('img.portret') получит все <img class="portret" />
• $('img .portret') получит все элементы с классом portret, которые находятся внутри <img> (обратите внимание на пробел перед точкой)
• $('img, .portret') получит все элементы <img>, а также все элементы с классом portret (обратите внимание на запятую)
• $('img#myPortret') получит элемент <img id="myPortret" />

В JQuery есть возможность выбора определенных элементов из DOM (объектной модели документа). Например, если вам нужен только первый элемент с классом portret или только чётные пункты списка <li>, то JQuery придёт вам на помощь:

• $('element:first') — первый элемент: $('.portret:first')
• $('element:last') — последний элемент: $('img:last')
• $('element:even') — чётный элемент
• $('element:odd') — нечётный элемент

А ещё JQuery хорошо работает с атрибутами тегов:
$('input[type=button]') — получит все теги <input type="button" />

Это далеко не полный список селекторов, доступных в JQuery, которые вы можете применить. В конце этой статьи приведена так называемая JQuery cheat sheet (таблица с подсказками по JQuery)

Обработка событий в JQuery

Получать доступ к элементам в JQuery мы научились. Но что же делать с ними дальше? Теперь мы можем повесить на элемент какой-либо обработчик события. В обычном JavaScript мы это делали так: document.getElementById('id').click = function1;. В JQuery же это можно сделать несколько проще:

$('#id').click(function(){
	//тут код обработки щелчка по id
});

Анонимные функции — хорошая вещь — то, чего лично мне не хватает в PHP.

Теперь, когда речь зашла о событиях, можно смело показать какой-нибудь живой пример. Дело в том, что весь JQuery-код пишется, как обработка события ready документа, т.е., простым языком, когда «документ готов», то мы можем делать что-либо (что вполне логично). Итак, первый самый простой пример:

<img src="/i/myphoto.jpg" id="myfoto" />
<script type="text/javascript">
$(document).ready(function(){
	$('#myfoto').click(function(){
		alert('This is my photo!');
	});
});
</script>

Основные события в JQuery:

• mousedown — нажата кнопка мыши
• mouseup — отпущена кнопка мыши
• mouseover — курсор поместился над элементом
• mouseout — курсор ушёл с элемента
• mousemove — курсор переместился по элементу
• keypress — нажата клавиша
• submit — отправлены данные (применимо к форме и её элементам)
• focus — получен фокус
• change — изменено (применимо к полям вода, переключателям и др.)
• click — клик

Попробуем изменить предыдущий пример так, чтобы теперь сообщение всплывало не при щелчке на картинке, а при наведении курсора на неё:

<img src="/i/myphoto.jpg" id="myfoto" />
<script type="text/javascript">
$(document).ready(function(){
	$('#myfoto').mouseover(function(){
		alert('This is my photo!');
	});
});
</script>

Эффекты на JQuery

Нынче на сайтах очень популярны всякие «живые» штучки. Например, выезжающее меню, или схлопывающиеся элементы. Реализовывать такое в JQuery — одно удовольствие

Итак, для начала приведу список JQuery-методов, с помощью которых можно «оживить» сайт:

• show — показать элемент. В зависимости от параметров, либо просто пропиывает элементу display: block; без анимации, либо медленно сворачивает элемент
• hide — скрыть элемент. Аналогично предыдущему
• toggle — показать-скрыть. Если скрыт в данный момент — показывает, и наоборот
• slideDown — свёртывание
• slideUp — развёртывание
• slideToggle — свёртывание/развёртывание, в зависимости от текущего состояния
• fadeIn — появление
• fadeOut — затухание
• fadeTo — появление-затухание до нужной прозрачности

Первым параметром (необязательным) к каждому из этих методов идёт скорость в милисекундах. А к методу fadeTo вторым параметром идёт прозрачность, до которой необходимо затухнуть

Все эффекты Вы можете опробовать здесь:
Скорость: мс
show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeTo

Управление атрибутами с помощью JQuery

Ещё одна полезная возможность JQuery — управление атрибутами. Например, вы можете какому-либо элементу задать, удалить, получить класс, или вообще любой атрибут. Ширину и высоту, значение элемента (в случае с полями, например), html код — всё это можно получить с помощью JQuery. И сейчас я покажу как.

• .attr(имя_атрибута) — возвращает значение атрибута
• .attr(имя_атрибута, значение_атрибута) — устанавливает новое значение атрибута
• .removeAttr(имя_атрибута) — удаляет атрибут
• .addClass(имя_класса) — добавляет класс
• .removeClass(имя_класса) — удаляет
• .html() — возвращает HTML-код
• .html(код) — устанавливает HTML-код
• .val() — возвращает значение элемента
• .val(значение) — устанавливает значение элемента

$(document).ready(function(){
	$('#getter').click(function(){
		var value1 = $('input#field').val();
		alert(value1);
	});

	$('a#swap').click(function(){
		value1 = $('input#field').val();
		$('input#f2').val(value1);
		$('input#field').attr('disabled', 'disabled');
	});
});

JQuery AJAX

Кроме всего вышеописаного, с помощью JQuery можно очень легко и удобно использовать такую технологию как ajax. Для этой цели служит метод $.ajax(settings), где settings — это настройки (пары "ключ: значение")

Лучше всего рассмотреть на примере (пример из этого блога — отправка комментария с помощью ajax [в упрощенном виде])

<form id="comment">
<input type="hidden" id="contentid" value="номер статьи (вставляется с помощью PHP)" />
<input type="text" name="nick"><br />
<textarea name="comment"></textarea><br />
<button id="sendcomment">Отправить</button>
</form>

<script type="text/javascript">
$(document).ready(function(){
	$('#sendcomment').click(function(){
		$.ajax({
		url: '/some-url/content_id='+$('#contentid').val(), //Указываем, какой УРЛ запрашивать
		type: 'POST', //Указываем метод: GET или POST
		data: 'nick='+$('input[name=nick]').val()+'&comment='+$('textarea[name=comment]').val(), //Указываем данные, отправляемые POSTом
		success: function(data){ //Функция, которая будет выполняться при успехе
			alert('Ваш комментарий отправлен!');
		},
		error: function(){ //функция, которая будет выполняться при неудаче
			alert('Ошибка! Попробуйте ещё раз!');
		}
		}); 	
	});
});
</script>

Ну, это очень упрощенный вариант :)
На самом деле, этих параметров хватит для большинства простых задач, а в следующей статье будут рассмотрены остальные параметры...

JQuery cheat sheet

Представляю вашему вниманию таблицу с подсказками по JQuery, позволяющую легко ориентироваться во множестве методов и свойств JQuery

Вот мы и познакомились с JQuery, хотя здесь рассмотрены далеко не всё, а только основные его свойства и методы. Кроме того, мы рассмотрели примеры работы с JQuery — а это залог успеха в изучении. Однако, мы не рассмотрели работу с данными и кое-что ещё. Это сделано умышленно, дабы не нагружать уважаемого читателя сразу кучей информации. Более подробно о JQuery с примерами, а также с нерассмотренными в этой статье темами, написано в следующай статье

Предыдущая статья: JavaScript WYSIWYG своими руками. Часть 1 Следующая статья: Ajax на JQuery с примерами