jQuery за 10 минут

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

• CSS селекторы (посмотреть можно здесь)
• XPath (посмотреть можно здесь)

На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет - все в ваших руках.

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

$("div") 					// все div'ы на странице
$("div:first")				// только первый div
$("div:last")				// только последний
$("div:even")				// все четные div'ы
$("div.myclass")			// div имеющий class="myclass"
$("#my")					// элемент с id="my"
$("input:text")				// все элементы input с type="text"
$("input:checkbox:checked")	// все чекбоксы с checked=true
$("div", "#myid") 			// все div'ы, находящиеся в контейнере с id="myid"
$("div.myclass img") 		// img, который находится в div'е с class="myclass"
$("div.myclass, div.my2")	// div'ы имеющие class="myclass" и class="my2"

Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя - $ (разве запрещено?), а в круглых скобках - параметры. Теперь становится понятным, для чего нужны CSS и XPath - их конструкции и выступают в качестве параметров для выборки.

Функция $ - это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она объект с массивом элементов, выбранных из документа на основе заданных параметров, т.о.

var tmp = $("div");			// можно присвоить значение
alert(tmp.length)			// и посмотреть количество выбранных элементов

Элементами данного массива можно манипулировать:

$("div").not('.red');				// все div'ы, кроме тех, у которых есть класс "red"
$("span.green").add("span.gray"); 	// в данном случае идентично $("span.green, span.gray"),
									// но бывает, что без add не обойтись
$("div").filter(".red, :first");	// выбирает все дивы, а потом выбирает
									// из них первый и с классом red

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

$("div")				//вернул все div'ы
.not('.red')			//отсек div'ы с классом red и вернул остальные
.add('span.green')		//добавил к выборке span'ы c классом green
.addClass('myclass')	//добавил класс myclass каждому элементу выборки
.removeAttr('title')	//удалил атрибут title у каждого элемента выборки (если был)

Методы выполняются в порядке вызова (за исключением ajax методов, которые ожидают ответа сервера) слева направо. Это можно использовать для свободного перемещения по DOM дереву:

$("#myid").click(function (){
	$(this).parent().prev().prev().empty();
});

Думаю, названия методов в предыдущем примере говорят сами за себя.

Ну вот, пожалуй, и все основы - выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

Быть добру!