Должен признаться, что я являюсь очень инертным человеком. Этот недостаток часто мешает сесть и заняться изучением чего-то нового. Зато, если вдруг все-таки сяду, то не встану ;-). Так было и с jQuery. Это было время, когда я только начинал работать веб-разработчиком. Тогда мне мало приходилось писать client-side кода, и если передо мной вставала задача сделать ajax-скрипт, то я решал вопрос варварски. Эх, как же я ошибался тогда, считая, что использование низкоуровневых средств и передача готового xml будет работать быстрее, чем какой-то там фреймворк (хотя, если передавать json, то может и будет… надо как-нибудь поэкспериментировать).

Довольно вступления. Думаю, что jQuery не нуждается в представлении. Наверняка каждый, кого хоть краем касается веб-разработка, слышал об этой замечательной вещи. С ее помощью можно без особого труда “вдохнуть жизнь” в страницы вашего проекта. API jQuery достаточно для удовлетворения большинства потребностей современного веб-разработчика и верстальщика. Что уж говорить о комьюнити, которое постоянно подогревает популярность фреймворка новыми плагинами.

API jQuery

Разработчики jQuery разделяют его API на функциональные группы:

  • Core – ядро
  • Selectors - селекторы
  • Attributes – методы для работы с атрибутами dom-элементов
  • Traversing – методы для работы с наборами элементов (поиск, изменение набора)
  • Manipulation – манипуляция элементами
  • CSS – работа со стилями
  • Events – работа с событиями
  • Effects – реализация эффектов
  • Ajax – думаю, что тут название говорит само за себя
  • Utilities – методы-утилиты, упрощающие жизнь
  • jQuery UI – методы для создания интерфейса пользователя

Естественно, рассмотреть весь набор методов фреймворка в одной статье не удастся, но я буду возвращаться к этой теме еще не раз. Если же вам не терпится узнать что-либо, пожалуйста, оставьте комментарий или задайте мне вопрос, используя специальную форму.

Функция $()

Эта функция является лишь сокращением функции jQuery(). Через нее, а также через класс jQuery, реализована вся работа фреймворка. Используется она для селектирования наборов элементов, создания jQuery-объекта из dom-элемента.

Совет: для больших проектов и объемных скриптов используйте именно jQuery(), а не $(). Это позволит избежать возможных проблем портирования кода или добавления функционала другой javascript-библиотеки.

$(document).ready()

Практически все, что делается с помощью фреймворка, происходит с использованием объектной модели документа (DOM). Следовательно, только после полной загрузки документа может выполняться какой-либо код.

Событие $(document).ready() является как бы отправной точкой для большинства скриптов. В callback-функции этого события ставятся нужные event-handler’ы, запускаются эффекты, ajax-запросы и т.д.

Селекторы

Под селекторами подразумеваются выражения, которые соответствуют определенному набору элементов. В jQuery в качестве языка селекторов используется комбинация соответствующих языков CSS и xPath.

Например

$('a.menulink')  // Вернет набор элементов тегов  класса menulink
$('a.menulink > span')  // Вернет набор элементов тегов, дочерних тегам  класса menulink
$('a.menulink:hidden > span')   // Вернет набор элементов тегов, дочерних всем скрытым тегам  класса menulink
$('div#menu')   // Вернет элемент тега 
с id="menu" $('#form1 > input[name=title]') // Вернет элемент тега с аттрибутом, дочернего форме с id="form1"

Список примеров можно продолжать бесконечно. Языка селекторов более чем достаточно для получения любого нужного набора элементов в документе. Использование селекторов не ограничивается лишь использованием функции $(). Их можно применять и к наборам элементов, для фильтрации (filter(), not()), расширения (add()) или для последующего поиска (find()). Понимать и уметь пользоваться этими инструментами очень важно. Советую, досконально изучить всю информацию по этому вопросу в официальной документации.

Манипуляция

В jQuery есть полный набор средств для изменения структуры документа.
Основные методы:

  • append() – добавление дочернего элемента в конец содержимого элементов набора
  • prepend() – добавление дочернего элемента в начало содержимого элементов набора
  • insertAfter() – вставка перед элементами набора
  • insertBefore() – вставка после элементов набора
  • html() – получение и установка содержимого текущего элемента
  • text() – возвращает суммарный контент всех элементов набора или устанавливает контент каждого из них
  • empty() – очистить содержимое элемента
  • remove() – удалить элементы набора
  • wrap() – обрамление элементов набора

Одних только этих инструментов вполне достаточно для решения большинства задач.

Ajax

Простейший пример использования ajax-средств jQuery:

// загрузить в контейнер тег класса .content с его содержимым с главной страницы сайта yoursite.ru
$('#ajaxcontaner').load('http://yoursite.ru .content');

Правда, данный код будет работать только для скриптов на страницах этого домена. Если надо получить данные с другого домена, нужно использовать json с указанной jsonp callback-функцией. Но об этом как-нибудь в другой раз. Вообще гораздо правильнее, с точки зрения производительности, использовать именно json для ajax'а.

Например

$.getJSON("/jsontest.php", function(res){	// Обращаемся к скрипту на сервере, который вернет нам валидный json
	if(res.success) {	// Проверяем, было ли выполнение скрипта на сервере удачным
		alert('Все впорядке');
	} else {
		alert('Ошибка!');
}
});

В данном примере сервер сформировал нам json вроде этого

{ "success" : true }

Для более кастомизированных запросов можно использовать низкоуровневый метод $.ajax(). Подробно описывать его сейчас я не стану.

Удобство

Работать с jQuery одно удовольствие. Код пишется налегке, и образует собой интуитивно понятную конструкцию. Почти все методы, работающие с набором элементов, возвращают эти же наборы. Таким образом, можно выстраивать "цепочки" кода.

Например

$('.leftcolum > a').css({color : 'red'}).fadeOut(1500);
$('div#maincontent div.header').css({opacity : 0.65}).show(400);

Работает библиотека быстро. При использовании firebug'а, отладка не составляет труда.

Эффекты

Для реализации эффектов в jQuery есть набор специальных функций.

Вот их список:

  • show()/hide()/toggle() – показать элементы/скрыть элементы/переключение этих режимов
  • slideDown()/slideUp()/slideToggle() – выдвинуть элементы/задвинуть элементы/переключение
  • fadeIn()/fadeOut() – проявить/скрыть используя прозрачность
  • fadeTo() – изменить значение прозрачности (opacity) до указанного значения
  • animate() – наиболее удобная функция для создания собственных эффектов на основе css
  • stop() – остановить любую анимацию для элемента

Пример

$(document).ready(function(){
	$('.header').animate({background-color: 'white'},{
		duration: 1500,
		complete: function(){
			$('.header').animate({background-color: '#1515FF'},{
				duration: 1500
			}
		}
	});
};

В данном примере мы меняем цвет бекграунда шапки сначала на белый, а потом на синий, с длительностью в 1500 миллисекунд на каждую операцию.

На сегодня это все. Удачи ;-)