LOGO JQuery
Что такое jQuery | Учебник JQuery

Что такое jQuery

Итак, jQuery— это JavaScript-библиотека, обеспечивающая кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome).

Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в августе того же года была выпущена первая стабильная версия библиотеки.

За прошедшие годы библиотека претерпела множество изменений и на текущий день содержит функционал, полезный для максимально широкого круга задач.

Селекторы

Потрясающие возможности механизма селекторов, позволяющие легко получить доступ к любому элементу объектной модели документа, сделали библиотеку jQuery очень популярной.

Судите сами. Чтобы получить ссылку на DOM-элемент с помощью Javascript, обычно используется метод getElementByld().
Например, изменим HTML-код элемента с идентификатором myid.
document.getElementByld ('myid').innerHTML = "Новый текст";
Код на jQuery, выполняющий то же самое действие, будет в два раза короче.
$("#myid").html("Новый текст");
Функционал селекторов далеко не ограничивается одним идентификатором.

В качестве примера изменим цвет текста во всех элементах А, в параметре title которых содержится слово на buble.
$("a[title*='buble']").css("color", "red");
Откройте пример в новом окне и посмотрите исходный код

Попробуйте выполнить аналогичную операцию с помощью JavaScript. Для этого понадобится далеко не одна строка кода.

Еще одной отличительной особенностью библиотеки jQuery является возможность составлять цепочки из вызовов методов.
$("#message") // Получили ссылку на элемент с id=message
	.html("Сообщение")
	.css("background-color", "blue") // Задали цвет фона message
	.parent() // Получили ссылку на родительский элемент
	.css("background-color", "#fff4dd") // Задали цвет фона parent
	.width(150) // Ширина
	.height(60); // Высота
Откройте пример в новом окне и посмотрите исходный код

Подключение библиотеки jQuery

Прежде чем использовать библиотеку jQuery, ее необходимо вначале скачать с сайта http://jquery.com/download

Либо воспользоваться репозиториями от YANDEX или GOOGLE

Подключение производится с помощью тега script, в параметре src которого указывается абсолютный или относительный путь к библиотеке.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Сам тег script должен быть размещен в разделе HEAD HTML-документа.

Если посетитель ранее заходил на другой сайт, на котором библиотека jQuery также подгружалась с сайта http://ajax.googleapis.com/, то веб-браузер не будет повторно загружать библиотеку и использует данные, сохраненные в кеше.

Таким образом, скорость работы вашего сайта может увеличиться.

Определение готовности документа

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

Без библиотеки jQuery для этой цели обычно используется событие onload объекта window.
window.onload = function() {
	alert("Документ полностью загружен");
}
Однако это событие возникает только после полной загрузки самого HTML-документа, а также всех других элементов, например изображений.

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

Библиотека jQuery предоставляет возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов.
$(document).ready(function() {
	alert("Документ доступен для выполнения скриптов");
});

Форматы функции $()

Основную функциональность библиотеки jQuery выполняет функция jQuery().

Которая имеет псевдоним $().

Это единственные идентификаторы, которые доступны в глобальной области видимости.

Все остальные функции находятся в области имен библиотеки jQuery.

Функция $() поддерживает несколько форматов:
$(<Функция>);
$(<Элемент объектной модели документа>);
$(<НТМL-текст>);
$(<Селектор>[,   <Контекст>] ).
Если в качестве параметра указать функцию, то она будет выполнена сразу после формирования структуры документа.
$(function() {
	$('div#helloid')
		.html('Документ доступен для выполнения скриптов')
		.css('background-color','blue');
});
Откройте пример в новом окне и посмотрите исходный код